CMS Filter Gallery
FRAMER COMPONENT · CMS GALLERIES
Projects, rooms or products from a Collection List, with filter buttons, search, sort and a full-screen lightbox. The filter stays in the address, so it can be shared.
Live component. These 18 projects are items of a Framer CMS collection, read through a Collection List. Filter, search, sort, then click a photo: the lightbox links to each project’s page.
FROM YOUR CMS
Three steps, then it follows your collection.
No layer names to get right and no code. A small Filter Item hands each item’s fields to the gallery.
01
Add a Collection List
Any collection: projects, rooms, products, artworks. Its own filters, sort and limit still apply.
02
Put a Filter Item inside
Connect the image, title, category and tags. Add a video, a date and the item’s page if you have them.
03
Style the gallery
Grid or masonry, filter buttons, search, sort and the lightbox, in your fonts and colours.
MAKE IT YOURS
Three looks from the same collection.
Each one reads the same 18 projects. Change the buttons, the captions and what a click does.
Dark, several filters at once
Captions over the photo, more than one category at a time, and Load more after six.
Filtered by tags
Every tag becomes a button: Stone, Pool, Timber. Square corners, no counts.
Straight to the page
A click opens the project’s CMS page instead of the lightbox.
WHAT’S INSIDE
Built for real CMS collections.
Responsive images with srcset and lazy loading, no network requests of its own, and every label ready for Localization.
Reads any CMS collection
Filter buttons with counts
One or several filters
Filter by category or tags
Search
Sort by date or name
Filter in the address
Grid, bento and columns
Videos next to photos
Lightbox with zoom
A link to each item’s page
Load more
Screen reader friendly