Framer component · $14
Caption Gallery
Turn a CMS Gallery field or a Collection List into a numbered gallery with captions and a full-screen view. One column, grid or masonry.
Click a picture to see it full screen. ← and → move between pictures. Esc closes it.
Masonry from a Collection List
Twelve photos from one CMS collection. Each picture goes to the shortest column, and the numbers keep the CMS order.
A grid that links to each project
With Click set to Item link, each cover opens its project page. There, the same component shows the project’s Gallery field.
Connect it to your CMS
01
Gallery field
On a CMS page, choose Insert → CMS → Fields and click your Gallery field. Framer puts a grid of its images next to the page.
02
Collection List
Or insert a Collection List with an image in each item. Put it next to the page, outside the breakpoints.
03
Content
Select the component and choose that grid or list in Content. It reads the images, numbers them and hides the original grid or list.
04
Captions
Captions come from each image’s alt text. Write “Short title. Longer text.” to get a bold first sentence.
Details
One column, grid or masonry
Full-width pictures for a case study, an even grid with a fixed ratio, or masonry that keeps each picture’s shape. Max height keeps tall pictures on the screen.
Numbers and captions
Numbers 01, 02, … or 01 / 12 in any corner. Captions from alt text, with an optional bold first sentence.
Full screen
Arrows, swipe, ← → Home End, Esc. Keyboard focus stays in the view while it is open and goes back to the picture when it closes.
Fewer columns on phones
Set the number of columns and the narrowest column width. On smaller screens the grid uses fewer columns by itself.
No extra fields
Works with the Gallery field and image fields you already have. Search engines still see your images and alt text.
Your look
Frame color, width, padding and corners, number colors and font, caption font and color, backdrop color.
Settings
Content
A Gallery field or a Collection List with images, placed next to the page.
Layout
One column, grid or masonry. Columns and the narrowest column width for grid and masonry.
Ratio and height
Original, or crop every picture to 1:1, 4:3, 3:2, 16:9 or 4:5 (grid and one column). Max height (720 px by default) makes tall pictures narrower so they fit on the screen. Align left or center.
Gaps
Space between columns and between rows.
Frame
Color, width, space between frame and picture, fill, and corner radius.
Number
01, 1, 01 / 12 or none. Corner, inset, fill, text, border and font.
Captions
On or off, bold first sentence, font, color, space above, and the maximum line width.
Click
Full screen, item link (for Collection Lists whose items link to a page) or nothing. Optional zoom on hover.
Full screen
Backdrop and control colors, and whether the caption shows under the picture.
How to use it
01
Buy it, then open the component link from your receipt.
02
Paste it on any page of your Framer project (⌘V).
03
Change the settings in the right panel. Preview to see it move.
From the same maker
Framer templates by H SHIFT WORKS
CIRCLED
Booking site for portrait and wedding photographers.
View template →
AGENDA
Conference site with schedule, speakers and venue.
View template →
OFFSET
Studio site for an independent digital agency.
View template →
TRUSS
Site for renovation and design-build companies.
View template →
GAZE
Dark, photo-led portfolio for one visual artist.
View template →
© 2026 H SHIFT WORKS. Framer templates, plugins and components.
framer.com/@hshiftworks
X: @hshiftworks