Spotlight Gallery
A large main image with a captioned location and date above a five-thumbnail strip with the active selection ringed.
A large main image with a captioned location and date above a five-thumbnail strip with the active selection ringed.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Spotlight Gallery shows one large Placeholder in a 16/10 aspect ratio as the main view, captioned with the selected location and date, Reykjavik, March 2025, with five square thumbnails in a strip below it. The first thumbnail carries a foreground ring to show it is the active selection; the remaining four are at 60% opacity to recede without disappearing. The single-image focus pattern rendered as a static blueprint is the distinctive detail: it communicates the lightbox interaction model to a client reviewing the portfolio without needing any running JavaScript.
Images are one array of id, caption, and a selected boolean. The component derives the main caption from find with a fallback, so noUncheckedIndexedAccess cannot throw at the selected access.
Reach for this block as the gallery section of a photographer, filmmaker, or travel writer portfolio, or anywhere a single image deserves extended focus. The installer swaps the five Placeholder tiles for real images, updates the captions, and wires the thumbnails to a state toggle for interactive use.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the travel or personal photography spotlight. Other spotlight layouts:
Tip: the caption on the main image is the only text the viewer reads at full attention; make it earn its space with location, date, or a brief note on the shot.