CMS & Lightbox + Groups ❺

Display your nested Collection List Lightboxes in separate groups

Webflow's lightbox element is CMS compatible, however it it does not provide the ability to CMS-bind the lightbox group.

In a CMS-driven layout like this one, we may want specific groupings of images ( here, each purple box ) to have their own distinct lightbox group.

At present, this is not natively supported in Webflow.

SA5 offers a no-code attributes-based solution to add this ability.

Important Webflow ECommerce limitation

Webflow currently does not support CMS-bound custom attributes when a CMS collection is bound to the ECommerce Products or Categories collection. This creates a configuration problem for an attributes-based library, since those custom attributes are essential for the grouping.

Currently this SA5 feature should be considered incompatible with any collection list that is bound to Webflow ECommerce Products or Categories.

If you need that capability in your project, you can contact Sygnal about building a custom, non-attributes version of this library for your project.

Use Cases

Common examples of where designers need this;

• Product catalogs where you have multiple product shots

• Real estate sites

• Event sites

Demonstration

Here is a demonstration of CMS-driven lightbox grouping, with a cloneable.

Use the cloneable as a reference for your own implementation. It will show you the exact placement and setup of the attributes for a typical product catalog configuration.

CMS Lightbox + Groups

Demonstration

CMS Lightbox + Groups - WebflowCMS Lightbox + Groups

Cloneable

Usage Notes

This library is very flexible in its configuration options.

The documentation here will focus on the most common use case - a product gallery where each product has a main photo and series of additional photos, which we want lightboxed together in a single group.

This setup is demonstrated in the cloneable above, and here's a video walkthrough on the implementation details.

Use the video as your primary reference for this type of build, however below are some additional notes for designers who want to vary the setup.

Enable the Link with other lightboxes feature

Enable the Link with other lightboxes feature on each of your lightboxes.

Leave the Group name blank.

Add the wfu-lightbox-group attribute

Add the wfu-lightbox-group custom attribute with the group name you want to any parent element of the lightbox, and all lightboxes within that parent element ( descendants ) will be assigned that same lightbox group.

For example,

wfu-lightbox-group = mygroup

would assign that static string "mygroup" as the group name for every lightbox that is within your tagged element.

You can assign any unique value you choose for your group, but the purpose of this library is to make those groups dynamic, based on your CMS data.

To do that, we'll use Webflow's CMS-bound custom-attribute feature and set it to the parent item's slug. This ensures that each group has a unique name.

wfu-lightbox-group = {{ slug }}

SA5 supports this "attribute affects descendants" approach because of the way Webflow's nested collection lists work in relation to custom attributes. See the descussion of this in the video above.

Choosing where to place the attribute matters, for two reasons;

1. SA5 will apply the group you specify in the attribute to any lightboxes within that element

2. Webflow's CMS-bound custom attributes have specific rules in what you can bind to, which means that elements within the nested collection list cannot be bound to fields of the parent collection list.

In our nested list configuration, this means that the best place to place the attribute [2] is on the parent collection list item [1].

If you have other lightboxes on your page outside of the collection lists, make certain their group names (if any) do not conflict with your CMS item slugs. An easy way to do this is to prefix them with a hyphen or underscore.

Avoid placing the attribute on two elements that have a parent-child relationship to one another, as this will create an undefined situation as to which group will be applied.

Getting Started ( NOCODE )

STEP 1 - Add the Library

First, add the library as detailed in Quick Start.

STEP 2 - Apply the custom attributes to the elements you want to affect

See above for details.

Credits

Full credit to Travis Orams for detailing the original solution approach. SA5 uses a similar group-setting approach, but has redesigned it so that there is no need to replace the lightbox element manually.