CMS Lightbox + Captions

Display CMS-Managed Captions in Webflow’s Lightboxes

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.

Important Limitations

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

About Alt Text in Webflow

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.

1. 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.

2. 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.

3. 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.

About Webflow's Lightbox Configurations

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.

Configuration	SA5 Captions Supported?	Notes
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.

Demonstration

CMS Lightbox + Captions - WebflowCMS Lightbox + Captions

Cloneable demo site.

Getting Started

1. Add the library as detailed in Quick Start.

2. Add the required attributes below

3. Publish and test your site

To correctly setup your lightboxes and bind alt-text to your images, refer to the clonable.

Usage Notes

wfu-lightbox-captions = ( no value needed )

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.

Styling Captions

Lightbox captions are generated as follows;

<figcaption class="w-lightbox-caption">The Excaliburs are ready to rumble</figcaption>

To style these, add an embed with custom CSS in your page;

You can CSS-style any aspect of the caption bar. Here we show text and background coloring only;

<style>
figcaption.w-lightbox-caption {
  color: white;
  background-color: teal; 
}
</style>

Getting Started

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.