CMS & Lightbox + Captions

Display CMS-Managed Captions in Webflow’s Lightboxes

Overview

This feature allows you to display your image alt-text as a caption inside of Webflow’s lightboxes.

Works with CMS-stored images, including multi-image fields. It does not support captioning video, due some complexities matching captions to the currently displayed video.

2024-Aug-28 - Note There is presently a glitch in Webflow where CMS multi-image fields will publish an empty alt="" attribute even when they have valid alt text defined. This will prevent captions from appearing in the third lightbox scenario above.

Webflow's team is aware of this and working on a fix.

About Alt Text in Webflow

SA5 generates the captions from your image alt-text. Your goal is to create that alt text 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.

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 correct setup your lightboxes and bind alt-text to your images, refer to the clonable

Required Attributes

wfu-lightbox-captions attribute

Add the wfu-lightbox-captions custom attribute ( no value needed ) to the Lightbox Link, which is the outermost part of your lightbox element.

That's it!

The CMS field you've bound to Alt Text will be displayed as the caption in lightbox view.

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