CMS & Lightbox + Captions ❺

Display CMS-Managed Captions in Webflow’s Lightboxes

Overview

This feature allows you to display a caption inside of Webflow’s lightboxes, which is automatically pulled from the CMS.

Works with CMS-stored images, thumbnails, and captions. Does not support captioning video, due some complexities matching captions to the currently displayed video.

Demonstration

CMS Lightbox + Captions - WebflowCMS Lightbox + Captions

Cloneable demo site.

Usage Notes

Prepare your CMS

• Include a photo in your collection items

• Include a plain text, single-line caption

Prepare your Collection List

• Setup your Collection List

• Add your Lightbox Element

• Data bind it, as usual, to the thumb and main images you want

  • Also set Alt Text to the plain text caption you want

wfu-lightbox-captions attribute

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

That's it!

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

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.