How can I connect a CMS multi-image field with a lightbox in Webflow, specifically for creating separate "before" and "after" lightbox galleries using filters?
TL;DR
- Use two Multi-Image fields in your CMS (one for "before", one for "after") and create two Collection Lists, each bound to one field.
- Add Lightbox components inside each list and assign unique group names using the CMS item's slug to keep "before" and "after" galleries separate.
To create separate CMS-based "before" and "after" lightbox galleries from a Multi-Image field in Webflow, you need to structure your CMS Collection, design your layout correctly, and use filtering logic to split the images per category while still using lightbox functionality.
1. Understand the CMS Limitation
- Webflow’s Multi-Image field can only be used inside Collection Lists, and you cannot filter individual images based on internal image metadata.
- You cannot bind multiple Multi-Image fields to the same Lightbox group directly.
- Lightbox grouping is defined by the custom attribute
data-lightbox.
2. Set Up Your CMS Structure
- In your CMS Collection (e.g., "Projects"):
- Add two separate Multi-Image fields: one for Before Images, and one for After Images.
- This allows distinct "before" and "after" image sets per CMS item.
3. Create Two Collection Lists
- Add a Collection List inside your CMS Template page or inside a Collection List Wrapper for each lightbox gallery.
- Bind one Collection List to the Before Images multi-image field.
- Bind the other Collection List to the After Images multi-image field.
4. Add Lightbox Components in Each List
- Inside each Collection List, add a Lightbox component.
- Set the image source to the current item’s image.
- Each lightbox automatically gets grouped by Collection List.
5. Manually Set Lightbox Group Names
- Select the Lightbox component and go to Settings Panel.
- Tick “Group images” and name them uniquely:
- Example: for "Before Gallery": before-[Current CMS Item Slug]
- For "After Gallery": after-[Current CMS Item Slug]
- This ensures each gallery is grouped separately per CMS item.
6. Style and Organize as Needed
- Add labels, headers, or filters (like tabs or buttons) to visually separate before and after galleries on the page.
- Use Webflow interactions and tabs to create toggle-style galleries if desired.
Summary
Use two Multi-Image fields in your CMS—one for "before" and one for "after"—then create separate Collection Lists connected to each field. Use unique Lightbox group names to ensure correct lightbox behavior for each category.