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.
The Portfolio Collection unlocks the source for every Portfolio block. All Access unlocks every Collection.
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.