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?

To create separate "before" and "after" lightbox galleries in Webflow using a CMS multi-image field, you’ll need to work around the limitations of native lightbox filtering. Webflow’s lightbox component doesn’t support multi-image CMS fields directly with filtering, so you’ll need to structure your CMS and use conditional visibility.

1. Structure Your CMS Collection

• Add two Multi-Image fields in your CMS Collection: one for Before Images and one for After Images.
• Example field names: "Before Photos", "After Photos".

2. Create Two Collection Lists on the Page

• Add a Collection List connected to your main CMS Collection.
• Inside that, add a Collection List Wrapper bound to the Before Photos multi-image field.
• Repeat this setup for the After Photos in a separate Collection List.

Each one will nest inside the same parent Collection Item to keep them grouped properly.

3. Add Lightbox Elements Within Each Collection

• Inside each multi-image Collection List:
• Add a Link Block or Lightbox Link.
• Insert an Image element that pulls from the current multi-image item’s image.
• If using a Link Block, convert it to a Lightbox component.

4. Group Lightboxes Appropriately

• For Webflow to treat them as separate lightbox galleries, set the Group Name uniquely:
• In the Before Collection List, name the lightbox group e.g., before-[CurrentItemSlug].
• In the After Collection List, name the lightbox group e.g., after-[CurrentItemSlug].
• Webflow doesn’t support dynamic field references in the Lightbox Group Name UI, so you’ll need to:
• Add a custom Embed inside the Collection List.
• Inside, create your own anchor tag (e.g., <a> with data-lightbox attribute), but Webflow doesn't natively allow this with true image binding from multi-image fields using embeds.

Workaround: Use a static lightbox layout or custom lightbox script (like Lightgallery.js or Fancybox) if more flexibility is required.

5. Show or Hide Based on Filters

• Add two buttons or tabs ("Before", "After") that allow users to filter.
• Use Webflow’s Interactions to toggle visibility between the Before and After sections, not actual filters.
• You can use display: none and display: block interactions to show/hide the correct gallery.

Summary

To connect a CMS multi-image field with a Lightbox for “before” and “after” galleries, create separate CMS fields for each set, nest Collection Lists for the multi-image fields inside your main Collection List, group lightboxes by dynamic IDs where possible, and use Webflow interactions to toggle visibility for filtering.