CMS Lightbox + Captions
Display CMS-Managed Captions in Webflow’s Lightboxes
Last updated
Was this helpful?
Display CMS-Managed Captions in Webflow’s Lightboxes
Last updated
Was this helpful?
This feature allows you to extend the Webflow native lightbox with captions, which appear as a single line of text at the bottom of each image.
Webflow Lightboxes have specific programming design that SA5 is leveraging to generate captions. As a result, the range of supported lightbox setups is very specific;
The configuration that SA5 Lightbox Captions supports requires;
The lightbox must contain a child thumbnail image, whose alt text is defined. This element can be hidden from view, but must exist.
The lightbox media must specify a single image, or be bound to a CMS Image field ( not a multi-image field )
Video media cannot be captioned..
Webflow Alt Text Bug Note
Since 2024-Aug-28, there is a bug in Webflow where CMS multi-image fields will publish an empty alt="" attribute even when they have valid alt text defined on the images. This means that even when a collection list is bound to the multi-image field, and the lightboxes are bound directly to the individual images. alt text and captions still can not work.
Webflow's team is aware of this and has reported they are working on a fix.
However as of 2025-Apr this bug still exists.
Unsupported configurations;
Captioning videos
Media bound to multi-image fields, or containing multiple images ( only the first image will caption )
Lightboxes without a thumbnail image
Lightboxes in a collection list that is bound to items in a multi-image field. It's poss
SA5 Lightbox Captions work by locating the thumbnail image's alt text, and then applying it to Webflow's internal lightbox JSON structures. Due to the way lightboxes are programmed, this works only on the first image in an image set, and seems to require the thumbnail as a reference.
Your goal is to create that alt text on the thumbnail the way you want, and publish it so that it exists correctly in your HTML, e.g. <img alt="Sunset photo">
In Webflow there are three different ways to define and manage alt-text, depending on where your images are stored in Webflow.
Images stored in the project Assets panel can have their alt text directly specified in the assets panel. This is then automatically generated when you use that image on your pages.
Images stored in a CMS image field do not have this capability, however you can create a separate text field to contain your caption, and then bind that text field to your image's Alt Text property on the canvas.
Images stored in a CMS multi-image field DO have the ability to define alt text directly with the image, and this will publish as the alt="..." property in your pages.
Webflow has a lot of different lightbox configurations which all work slightly differently in regards to how they link media.
Lightbox + Static Image. No CMS involvement. Media is set to a single static image.
Lightbox + Multiple Static Images. No CMS involvement. Media has been assigned a series of static images.
Lightbox + CMS Image Field. This configuration is common in a main collection list, but can also occur in a nested collection list that is bound to a Multi-Image Field.
Lightbox + CMS Multi-Image Field. In this configuration, the Lightbox is directly bound to the Multi-Image Field.
These configuration differences can significantly impact the rendered HTML.
Lightbox + Static Image
Yes
Lightbox + Multiple Static Images
No
Lightbox + CMS Image Field ( both direct, and nested )
Yes
The first image ( only ) will support captions.
Lightbox + CMS Multi-Image Field ( media directly bound )
No
The first image ( only ) will support captions.
Lightbox + CMS Multi-Image Field ( collection list bound to multi-image field, lightbox bound to individual image within that list )
No
See Webflow Bug notes above regarding CMS multi-image fields and alt text.
Lightbox + Video Media
No
Lightbox w/ no thumbnail image
No
Without the thumbnail image inside of the lightbox there is nowhere for you to bind the alt text.
Add the required attributes below
Publish and test your site
Required. Add the wfu-lightbox-captions custom attribute ( no value needed ) to the Lightbox Link, which is the outermost part of your lightbox element.
By default, when you create a new lightbox element it includes an image element child which acts as a thumbnail. Currently, we use this element to represent your main image, and the alt text on that thumbnail is used as the caption text.
While this image element is essentail for SA5 Lightbox Captions to function, it does not need to be visible to users. If you want a different lightbox trigger such as plain text or an SVG, you can simply style the image element as display: none.
Lightbox captions are generated as follows;
To style these, add an embed with custom CSS in your page;
See above for details.
Add the library as detailed in .
First, add the library as detailed in .
