How to Add Dynamic CMS Lightbox Captions in Webflow (The Easy Way)

After you pasted the code from above in the head code add this name attribute:
wfu-lightbox-captions

To the CMS lightbox - no value is required (ie. leave blank)

‍

Solving the Webflow CMS Lightbox Caption Problem

Webflow’s native Lightbox is a great tool, but it has one glaring limitation: it doesn’t support dynamic captions from a CMS Multi-Image field. If you are a developer or designer building high-end galleries on Webflow, you've likely hit this wall. You want your captions to update dynamically when you change the Alt Text in the CMS, but Webflow's native functionality just won't do it.

Here is the exact workflow I use at Derek Siu Design to solve this using the Sygnal Attributes (SA5) library.

Why the Native Lightbox Fails

By default, Webflow only allows "static" captions in lightboxes. Even if you link your images to a CMS field, the lightbox often fails to pull the metadata (Alt Text) into the caption area of the expanded view. This creates a disjointed user experience where the context of the image is lost.

The Fix: Sygnal Attributes (SA5)

Sygnal’s library is a lightweight way to add "missing" features to Webflow. We can use the wfu-lightbox-captions attribute to force the lightbox to pull the image's Alt Text and display it as a caption.

1. Add the Script

Paste this into your page settings or an HTML Embed block to initialize the library:

HTML

<script defer src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@5.7.1/dist/nocode/webflow-elements.js"></script>


2. Apply the Attribute

Select your Lightbox Link element and go to Custom Attributes in the settings panel. Add:

• Name: wfu-lightbox-captions
• Value: (leave blank)

3. Connect the Data

Make sure your Image element inside the Lightbox is set to "Get Alt Text from [Your CMS Field]". The script will now automatically grab that text and inject it into the lightbox UI when a user clicks the image.

Pro Tip: Styling the Captions

To ensure the captions match the sleek UI/UX of your site, you can target the lightbox caption class directly with a bit of CSS. This ensures your typography (like Inter) remains consistent:

‍

<style>
 .w-lightbox-caption {
   font-family: 'Inter', sans-serif;
   font-weight: 500;
   text-align: center;
   background-color: rgba(0,0,0,0.8);
   padding: 1rem;
   border-radius: 8px;
 }
</style>


SEO Benefits

Using this method doesn't just help the user; it helps Google. By leveraging the Alt Text field for captions, you are providing descriptive metadata that search engines use to index your images, improving your site’s overall visibility for image-based searches.

‍

Building something complex in Webflow? I specialize in custom Webflow builds and UI/UX solutions that go beyond the standard template. View my work or get in touch to discuss your next project.

‍