CMS Filter Gallery · Documentation · Version 1.0
Your whole collection, filtered in a click.
How to connect any CMS collection, the layouts, filters, search and sort, the lightbox, every setting in the panel, and four looks to start from.
01
Start here.
Add it to your project. Open the link in your purchase email (or the Marketplace page) and drop CMS Filter Gallery on a page. It arrives with twelve demo projects so you can see it work.
Feed it your collection. Set Source to CMS, add a Collection List of your collection on the same page and put a Filter Item inside its item. The next sections show the steps.
Pick a layout. Grid or Masonry, in Bento or Columns style.
Choose what visitors can do. Filter buttons by category or tag, search, sort and Load more. Then preview and click a project to try the lightbox.
02
How it works.
The gallery shows a whole collection: projects, rooms, products, artworks. Each Filter Item hands one Collection List item to the gallery: its image or video, title, subtitle, category, tags, link and date.
Visitors filter by category or tag, search, sort and open any project full screen.
The Collection List decides which items reach the gallery and in what order: its own filters, sort and limit apply first.
No API keys, no backend, no tracking. The component makes no network requests of its own. Only your images load.
Images load from Framer’s own srcSet, so phones get small files and large screens get sharp ones.
Aurelia ResidenceLos Angeles, California · Residential The Ambra PenthouseMiami, Florida · Interiors Lumbre courtyardExtremadura, Spain · Hospitality Villa NovaTuscany, Italy · Restoration Casa SolaraPalm Springs, California · Residential Arcadia LoftBrooklyn, New York · Interiors Terrace restaurantExtremadura, Spain · Hospitality The cloisterExtremadura, Spain · Restoration Luna HouseAustin, Texas · Residential Crestline ChaletZermatt, Switzerland · Interiors The Olive RoomExtremadura, Spain · Hospitality Stone and beamsExtremadura, Spain · Restoration
Live component with demo projects. With Source on CMS it reads the Filter Items in your Collection List.
03
Connect your collection, step by step.
Use any collection with an image. A category (an Option field or plain text), tags, a date and a page per item are all optional.
Add a Collection List anywhere on the same page, connected to it.
Put a Filter Item inside its item and connect its fields: Image to your image field, Title, Subtitle, Category, Tags, Link to the item’s own page and Date. For an Option field, keep Category and pick Display option when you connect it, so the button shows the option’s name.
Select the gallery and set Source to CMS.
Use the same Kit name on the gallery and on the Filter Item. “gallery” is the default on both. With two galleries on one page, give each its own name and its Filter Item the matching one.
Preview. Every item shows up once, in the list’s order.
On the published site, Filter Items show nothing and take no space. Set the Collection List’s gap and padding to 0 so the list itself takes no space either. In the canvas, each Filter Item shows a small dashed label like “Filter Item · Courtyard House · Residential”, so you can check it reads the right fields.
Good to know:
Leave the Collection List’s limit high enough to include every item. The gallery’s Load more works on what the list hands over.
Tags are one text field with commas between them: “Timber, Restoration”. Each tag becomes a filter button when Filter by is Tags or Both.
With Source on Manual, add items in the panel instead. Use it for a page without a CMS.
04
Layouts
Every item at once, in Columns, with the same shape set by Aspect ratio.
Large, tall and wide tiles in a repeating pattern that always closes the last row. Captions show over the photo.
Each column flows down on its own. With Aspect ratio Original every photo keeps its shape.
Different layout per breakpoint. Each breakpoint keeps its own settings. A common setup: 3 columns on Desktop, 2 on Tablet, 1 on Phone.
Videos. A Filter Item with a Video (MP4, WebM or MOV) plays it muted and on loop while it is on screen, with the image as its cover. Visitors who prefer reduced motion see the cover with a play mark.
05
Filters
Filter by: Category, Tags or Both. The buttons are built from your items, in the order they first appear, after an All button.
Counts show how many items each button holds, like “Interiors 4”.
Multi-select off: one button at a time, and pressing it again goes back to All. On: visitors combine several, and items in any of them show.
Filter in address: the address follows the filter, like #filter=interiors, so a filtered view can be shared. Opening that address applies it, and Back and Forward undo and redo it. With two galleries on one page, give each its own Link name.
On narrow screens the buttons stay on one row that scrolls sideways, so the page never gets wider than the screen.
When nothing matches, a message and a Clear filters button show.
06
Search and sort.
Looks through title, subtitle, category and tags. Case and accents don’t matter: “ebano” finds “Casa Ébano”. Every word must match.
Offers the list’s own order, Newest, Oldest and A–Z. Newest and Oldest use each item’s Date; items without one go last. Start with sets the first choice.
Limits how many items show at once and adds a Load more button. Any change to the filters, the search or the sort starts again from the first page.
07
Lightbox
Click a project and it opens full screen.
It browses the filtered items only, in the order on screen, with a counter like 02 / 04.
Zoom: pinch, double-tap or double-click a photo to zoom in, then drag to look around. A trackpad pinch works too, and the zoom button does the same from the keyboard.
Thumbnails: a strip of small photos at the bottom. It hides on very short screens, like a phone held sideways.
The title and subtitle sit under the photo, with a View project link when the item has a Link.
Escape zooms out, then closes. The arrow keys move between projects. On touch screens, swipe sideways to browse and down to close.
Focus stays inside while it’s open and goes back to the project you clicked when it closes. The page behind it doesn’t scroll.
Click: Open link skips the lightbox and goes straight to each item’s Link. Items without a Link still open the lightbox.
08
Customize the look.
Image
Original, 1:1, 4:3, 3:2, 16:9 or 4:5.
Cover fills the frame and crops the edges. Contain shows the whole photo, with Image fill around it.
, Gap, Image fill and Hover zoom.
Captions
Below: the title, then the subtitle and category, under each photo.
Overlay: the same over the bottom of the photo, on a soft dark gradient.
Hidden: no captions on the page. The lightbox still shows them.
Turn Subtitle and Category on or off, and set Title font, Title, Detail font and Detail colours.
Buttons and fields
Button font, Button fill, Button text, Active fill, Active text and Button radius style the filter buttons, Load more and Clear filters. Field border outlines the search and the sort menu. Pick your site’s colour styles so the gallery follows your palette.
Recipes
Layout Grid · Columns 3 · Aspect 4:5 · Radius 0 · Gap 24 · Captions Below · Filter by Category · Click Open link
Layout Masonry · Bento · Columns 3 · Aspect 4:3 · Radius 16 · Counts on · Search on · Sort off
Layout Masonry · Columns · Aspect Original · Columns 3 · Gap 8 · Captions Hidden · Filter by Tags · Multi-select on
Layout Grid · Columns 4 · Aspect 1:1 · Fit Contain · Image fill #F5F5F5 · Show first 12 · Sort Start with A–Z
09
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Filter Items with the same Kit name) or Manual.
CMS: the name shared with the Filter Items.
Manual: Image, Video, Title, Subtitle, Category, Tags, Link, Date and Alt text. Up to 60.
Layout
Layout — Grid or Masonry.
Columns — 1 to 6.
Masonry — Bento or Columns.
Aspect ratio, Fit, Radius, Gap, Image fill, Hover zoom.
Play videos — videos play muted while on screen.
Captions
Captions — Below, Overlay or Hidden.
Subtitle, Category — show them in the captions.
Title font, Title (colour), Detail font, Detail (colour), Overlay text.
Filters
Filters — show the filter buttons.
Filter by — Category, Tags or Both.
Multi-select — combine several buttons.
Counts — the number on each button.
Align — Start or Center.
Button font, Button fill, Button text, Active fill, Active text, Button radius.
Search and sort
A search field.
The sort menu. Start with — its first choice.
The outline of the search and the sort menu.
Results
0 shows every item; any other number adds Load more.
The address follows the filter. Link name — the word in #filter=interiors.
Click and lightbox
Click — Lightbox or Open link.
Lightbox fill, Lightbox text, Zoom, Thumbnails, Counter font.
Focus ring — the keyboard focus colour.
Text
Gallery label — what screen readers call the gallery, like Projects.
Filter label — the name of the group of buttons.
All label, Search label, Sort label, List order label, Newest label, Oldest label, A–Z label.
Load more label, Empty text, Clear label.
Result label — screen readers hear it after every change. {count} is the number of items.
Previous label, Next label, “of” word, Open label, Close label, Viewer label, Zoom in label, Zoom out label, View label.
All of them are translated by Framer Localization.
Filter Item
Kit name, Image, Video, Title, Subtitle, Category, Tags, Link, Date, Alt text.
10
Performance
No network requests of its own, no scripts from other sites, no tracking.
Every image uses Framer’s srcSet with a sizes value worked out from the real width of each tile, so the browser downloads the right file.
The first row loads right away. Every other photo is lazy loaded.
Filtering, search and sort run in the browser on what the page already has. Nothing is fetched again.
Videos load only their first frame until they come on screen and play only while visible.
On the canvas and in Framer’s static previews, it renders still: no animation, no video.
11
Accessibility
The filter buttons are real toggle buttons in a labelled group, and screen readers hear which ones are pressed.
After every change, screen readers hear how many items are left, like “4 projects”.
The search field and the sort menu have labels you can translate. The sort menu is the browser’s own, so it works with every screen reader and on phones.
Alt text comes from the Alt text field, or from the image’s own alt text in Framer or the CMS, or from the title.
The lightbox traps focus, closes with Escape and gives focus back. Zoom has its own button and label.
Visitors who prefer reduced motion get no entrance animation and no zoom transitions, and videos don’t play by themselves.
On touch screens the search field uses 16 px text, so iPhone doesn’t zoom in when you tap it.
12
Troubleshooting
Source is Manual. Set it to CMS.
No Filter Item uses the gallery’s Kit name, or the Filter Items have no image or video connected.
The Collection List’s own filter or limit leaves them out. Raise the limit.
The Option field was connected without Display option. Connect Category again and pick it.
No item has a category (or tags, with Filter by Tags). Connect Category or Tags.
The Filter Items have no Date connected.
Set its gap and padding to 0.
The Link isn’t a page of your site, a web address, an email or a phone number. Other kinds of link are ignored for safety.
13
Updates
New versions are free and listed here. To update, insert the component again from the Marketplace page or from the link in your Polar order, which always points to the latest version, and copy your settings across.
1.0 · October 2026 — First release: Grid and Masonry (Bento and Columns), Filter Items for any CMS collection, filter buttons by category or tag with counts and multi-select, search, sort, Load more, the filter in the address with Back and Forward, videos, Open link, a lightbox with zoom and thumbnails, and full documentation.
14
Support and licence.
Questions or a bug? Write to info@miguelrecio.es. A person replies within two business days (Mon–Fri, CET).
One licence covers one designer and unlimited client projects. Reselling or redistributing the component isn’t allowed.
The demo projects are samples. Replace them with your own before you publish.