How to add captions to Lightbox Multi-Images and Singular Images for CMS Items

Credit goes where credit is due, and I only figured this out because of a Webflow tutorial and due to Sygnal attributes for the codes.

There are currently no configuration options for this library, so we’ll use a no-code integration approach.

Add this CSS script to the HEAD of your site or page.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/dist/css/webflow-elements.css">

Add this JS reference to the BODY of your site or page.

<script type="module" src="https://cdn.jsdelivr.net/gh/sygnaltech/webflow-util@3.39/src/nocode/webflow-elements.js"></script>

STEP 2 – Add the Captions/Alt Text

This web flow tutorial was wonderful!

Then go into the lightbox link element and then in the

wfu-lightbox-captions

into the custom attribute field.

To edit the style font of the Alt Text, paste this code into the head of the page:

<style>
.w-lightbox-caption {
    font-family: Arial;
    font-size: 18px;
}
</style>

Happy creating!