Framer Gallery: How to Build a CMS Image Gallery (2026)

To build a gallery in Framer, put your images in a CMS collection, add a Collection List to the page and design one image card. That gives you a working grid in a few minutes. Framer doesn't do lightbox or masonry natively, so for a full-screen viewer, varied-height layouts or thumbnail sliders you add a gallery component connected to the same collection.

We build Framer components used by 2,000+ Framer users, including the CMS gallery components covered below, so this guide starts with what Framer does natively and only reaches for a component where native stops.

Key Takeaways

• A native Framer gallery is a CMS collection plus a Collection List; it's the right choice for small, uniform grids.
• Framer has no native lightbox or masonry layout. Both need a component or hand-built overlay states.
• Framer's built-in Slideshow and Carousel cover simple sliders; CMS-driven sliders with thumbnails need a dedicated component.
• Pick the layout by content: masonry and lightbox for photography, uniform grid for products, slider for before/after work.
• Galleries are the easiest pages to make slow: compress before upload and lazy-load below the fold.

Step 1: Set up your CMS collection

Open the CMS panel and create a collection (or add fields to an existing one):

• Image field: the photo itself. One image per item is the simplest setup.
• Title field: used for alt text and captions.
• Category field (optional): if you'll filter or group the gallery.
• Order or date field: to control the display sequence.

If each item needs several images, such as a project with ten photos, use a gallery-style field that holds multiple images per item. The slider and popup components below read that kind of field directly.

Keeping images in the CMS means adding a photo later is filling in a form, not rebuilding a layout.

Step 2: Build a native Collection List grid

Drag a Collection List onto the canvas and connect it to the collection. Design the card: usually the image, cropped to a consistent aspect ratio, with the title as alt text. Set the list to a grid with fixed columns and adjust the columns per breakpoint.

For a small, uniform gallery (team photos, a short list of past projects, logo walls) this native grid may be all you need.

Step 3: Where the native grid stops

Four gaps show up once the gallery is the point of the page.

No lightbox

Clicking an image in a native Collection List does nothing. Visitors expect a thumbnail to open a full-screen view with next/previous navigation and keyboard support. Building that by hand means wiring overlay states, click handlers and key events yourself.

No masonry layout

Native stacks and grids use fixed rows, so images either get cropped to the same shape or leave uneven gaps. A masonry layout, where each image keeps its natural aspect ratio and the columns flow around different heights, isn't something Framer's layout tools produce. It's the look most photography and visual portfolios want.

Simple sliders only

Framer's built-in Slideshow and Carousel components work for a basic swipe-through. They don't read a multi-image CMS field per item or give you a thumbnail strip, which product pages and project galleries usually need.

Basic category filtering

For a gallery split into categories ("Weddings", "Portraits", "Events"), Framer's native Dynamic Filters on the Collection List handle simple single-category filtering. Our covers the setup and where native filtering runs out.

Step 4: Add the layout you need with a CMS gallery component

Each of these connects to the CMS collection you built in Step 1, so content stays editable in the CMS:

All of them are also included in the Components plugin, which has 90+ components for $99 one-time.

Setting one up

1. Add the component to the page (from its component page, or from the Components plugin inside Framer).
2. Connect it to your gallery collection and map the image field, plus the title for alt text and captions.
3. Set columns, gaps and breakpoints in the properties panel.
4. Turn on the extras you need: lightbox, category pills, thumbnails or hover effects.
5. Preview on a phone and test the swipe and close gestures before publishing.

Which gallery layout fits your project?

Add a component when the project needs lightbox, masonry or thumbnail behaviour. A small uniform set is fine on the native grid.

Optimising gallery performance

Galleries are among the easiest pages to make slow.

• Compress before upload. Uploading a 12 MB photo and letting the layout shrink it still sends 12 MB to the visitor. Resize and compress before adding images to the CMS.
• Serve thumbnail-sized images in the grid. Let the lightbox load the larger version only when it opens.
• Lazy-load below the fold. Images far down the page shouldn't load until the visitor scrolls near them. Confirm your component does this rather than assuming.
• Cap what renders at once. For collections with hundreds of images, use pagination, a "load more" pattern or a featured subset.

Captions, alt text and accessibility

Alt text does two jobs. It's an accessibility requirement and it earns image-search traffic. Map the CMS title (or a dedicated alt field) to alt text instead of leaving filenames.

Captions give context. For portfolios and case studies, a short caption (project, location, one line of description) helps visitors who skim.

Keyboard support in the lightbox. Arrow keys should move between images and Escape should close the viewer. Test it before launch.

Common Framer gallery mistakes

• Mixed aspect ratios in a fixed grid. Either crop consistently or switch to masonry.
• No lightbox on a photography site. Visitors expect to click through to the full image.
• Full-resolution files as thumbnails. The gallery becomes the slowest page on the site.
• No phone testing. Sliders and lightboxes depend on swipe feel; test on a real device.
• No empty state for filters. If a category has no items, say so instead of showing a blank section.

For structuring image-heavy CMS content in general, see the .

FAQ

Can you build an image gallery with Framer's CMS?

Yes. Create a collection with an image field, add a Collection List, connect it and design one card. Every item becomes a gallery tile.

Does Framer have a native lightbox?

No. A native Collection List doesn't open a full-screen viewer. Build overlay states by hand or use a gallery component with a lightbox built in.

How do I make a masonry gallery in Framer?

Native stacks and grids use fixed rows, so a true masonry layout needs a masonry gallery component connected to your CMS collection.

Does Framer have a carousel or slideshow?

Yes. The built-in Slideshow and Carousel components handle simple sliders. For CMS-driven sliders with thumbnails, use a dedicated slider component.

How do I filter a Framer gallery by category?

Use Framer's native Dynamic Filters for simple single-category filtering. CMS Masonry Lightbox also has built-in category pills with single or multi-select.

What's the best gallery setup for a photography portfolio in Framer?

Photos in a CMS collection, a masonry layout so aspect ratios aren't cropped, and a full-screen lightbox.

Build order

Start native: collection, Collection List, one card. Publish it and look at it on a phone. If the content is photography or the images vary in shape, switch the grid to a masonry component with a lightbox; if each item has several images, use a slider with thumbnails. Then compress your images and check the page speed before you call it done.