Your CMS projects,
as folders.
Documentation · Version 1.0
How to connect a collection and its Gallery field, the two layouts, the looks, filters, every setting in the panel, and five 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 Folder Gallery on a page. It arrives with four demo shoots so you can see it work.
Feed it your collection. Set Source to CMS, add a Collection List of your projects on the same page and put a Folder Item inside its item. The next sections show the steps.
Pick a layout and a look. Grid or Row, then Paper, Ink, Accent or your own colours, and your fonts.
Preview. Hover a folder, or tap it on a phone: it opens and its photos fan out. Click and you’re on the project.
02
How it works.
Each item of your collection becomes a folder: a tab with its category, the title and a detail line on the front, and the first photos of its Gallery field tucked inside. When a visitor hovers it, the front tilts and the photos fan out. A click opens the item’s page.
On a phone, the first tap opens a folder and the second goes in. Tapping another folder or anywhere else closes it.
With the keyboard, a folder opens when it gets focus, and Enter follows its link.
The Collection List decides which items reach the gallery and in what order: its own filters, sort and limit apply first. A new item in the CMS shows up on its own.
No API keys, no backend, no tracking. The component makes no network requests of its own. Only your images load, at the size the folder needs.
Live component with demo shoots. Hover or tap a folder. With Source on CMS it reads the Folder Items in your Collection List.
03
Connect your collection, step by step.
Use a collection with a Gallery field (an image array). A category, a detail line (place, year, client) and a page per item are optional. Without a gallery, a single Cover image works too.
Add a Collection List anywhere on the same page, connected to it.
Put a Folder Item inside its item and connect its fields: Title to your title; · Tab to your category (for an Option field, pick Display option so it shows the option’s name); · Detail to a place, a year or a client; · Photos to your Gallery field, and map its image to Image; · Link to the item’s own page.
Select the gallery and set Source to CMS.
Use the same Kit name on the gallery and on the Folder Item. “folders” is the default on both. With two galleries on one page, give each its own name and its Folder Item the matching one.
Preview. Every item shows up once, in the list’s order, numbered 01, 02, 03…
On the published site, Folder 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 Folder Item shows a small dashed label like “Folder Item · Riverbank · 4 photos”, so you can check it reads the right fields.
Good to know:
The photo count on the front is the number of photos in the gallery, even if the folder shows only three.
Leave the Collection List’s limit high enough to include every item you want.
With Source on Manual, add folders in the panel instead, with up to three photos each. Use it for a page without a CMS.
04
Layouts
Folders in columns that follow the space. Folder width is the smallest width a folder can have; the columns fill the row.
Folders side by side that scroll sideways and snap into place. On a phone each folder takes most of the screen and the next one peeks in.
5:4, 4:3 or 1:1.
Is the space between folders, and Row gap the space between rows in Grid. Open folders fan their photos above the top edge, so the gallery always keeps room for that, even with a small Row gap.
Different settings per breakpoint. Each breakpoint keeps its own settings, like Row on Phone and Grid on Desktop.
05
The folder.
How many photos sit in each folder, from 1 to 3.
Small, Medium or Large, how far the photos spread when the folder opens.
The label on top, from the Tab field. Off, the category is still read out to screen readers.
01, 02, 03… in the corner of the front. It restarts with the filters.
“4 photos” after the detail line. Photo and Photos label set the words, for other languages.
Shows on folders with a link.
06
Customize the look.
Looks
Warm grey folders with ink text and a red number.
Near-black folders with light text.
Red folders with white text.
Your own Back, Front, Text and Number colours. Pick your site’s colour styles so the gallery follows your palette, in light and dark.
A colour per folder
Add a Color field to your collection and connect it to the Folder Item’s Color. That folder’s front takes the colour and its back a shade darker. The others keep the look.
Type
Title font and Text font take your fonts, sizes and spacing. Uppercase sets titles in capitals, made for condensed display fonts like Anton. Radius rounds the folders.
Filters
Filters adds a button for each tab label, with a count, and an All button. Framer’s own Collection List filters work as well and apply first.
Recipes
Layout Grid · Look Paper · Folder width 300 · Photos 3 · Fan Medium · Uppercase on
Look Ink · Shape 4:3 · Fan Large · Photo count off
Look Accent · Shape 1:1 · Photos 1 · Fan Small · Tab off · Number off
Layout Row · Look Custom · Folder width 280 · one Color per client
Look Paper · Filters on · All label “All projects”
07
Settings reference.
In the order they appear in the property panel. Settings that don’t apply are hidden.
Content
CMS (Folder Items with the same Kit name) or Manual.
CMS: the name shared with the Folder Items.
Manual: Title, Tab, Detail, Photo 1–3, Link and Color. Up to 24.
Layout
Layout — Grid or Row.
Folder width, Gap, Row gap, Shape.
Look
Look — Paper, Ink, Accent or Custom. Back, Front, Text and Number with Custom.
Radius.
Folder
Photos, Fan, Tab, Number, Photo count, Arrow.
Filters
Filters, All label, Button, Button text.
Type
Title font, Uppercase, Text font.
Labels
Photo and Photos label — the words after the count.
New tab note — read out to screen readers on links to other sites.
Filters name — what screen readers call the filter buttons.
When empty — the message when no folder reaches the gallery.
All of them are translated by Framer Localization.
Folder Item
Kit name, Title, Tab, Detail, Photos, Cover, Link, Color.
08
Performance
No network requests of its own, no scripts from other sites, no tracking.
Only the photos a folder shows load, lazily and at the size the folder needs, from Framer’s own srcSet.
The opening is pure CSS: no animation library and no work while the page scrolls.
On the canvas and in Framer’s static previews, folders render closed.
09
Accessibility
The gallery is a list; each folder is a link (or a button, without a link) with its title, detail and photo count.
The photos are decorative for screen readers, so the folder is read once and clearly.
Folders open on keyboard focus and show a focus ring.
Links to other sites say so to screen readers, with the New tab note.
Visitors who prefer reduced motion get folders that change without animation.
10
Troubleshooting
Source is Manual, or you’re on the canvas without Folder Items. Set Source to CMS and add a Folder Item to the Collection List.
No Folder Item uses the gallery’s Kit name, or the Folder Items have no title and no photos connected.
Its Gallery field is empty, or Photos was connected without mapping the image to Image.
The Option field was connected without Display option. Connect Tab again and pick it.
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.
Set its gap and padding to 0.
11
Updates
New versions are free and listed here. To update, insert the gallery again from the Marketplace page or from the link in your order, which always points to the latest version, and copy your settings across. The Folder Items you already connected keep working: newer galleries read them.
1.0 · October 2026 — First release: CMS projects as folders that open on hover, tap or focus, photos from a Gallery field, Grid and Row, Paper, Ink, Accent and custom looks, a colour per folder, filters with counts, and full documentation.
12
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 website or project, the same Single-Use licence as Framer’s Marketplace. For several sites, buy one licence per site. Reselling or redistributing the component isn’t allowed.
The demo shoots are samples. Replace them with your own before you publish.
Questions? Get in touch.
Email info@miguelrecio.es with your question and a link to your project.