CMS lightbox Captions Attribute

Hi I am trying to use the lightbox captions. I cloned the project And tested what I wanted to add to a live project and it seems to be working .

https://trm-cms-lightbox-with-captions.webflow.io/recipe/vitae-quo-voluptas

But when i try to apply it to this live project
preview link - Webflow - lodge-site
I get errors
Live - lodge-site

Does the collection list have to be a certain structure for this to work? Or are the field names for the captions specific?

Thanks in advance for any help.


IMPORTANT
If you want support, please make certain to include-

  1. Your project’s read-only link.
    Share a read-only link | Webflow University
  2. A link to your published project ( webflow.io is fine )
  3. Details on exactly where to look on your site for the problem you’re describing

For some reason your lightbox HTML is malformed, but it also looks out of sync with your CMS data.

Appreciate that. Webflow is having issues today so I have kind of left it to see if it resolves on its own. I couldn’t see anything on my end I was doing wrong. So appreciate the second set of eyes. The first caption is that the main image and alt possibly. The first link I provided was a working version of this setup. On a clone of your cloneable. The setup being a lightbox main image, lightbox multi-image and lightbox video all linked together in a group. Thanks again for taking a look this setup is fantastic. i don’t understand why Webflow hasn’t improved this component.

I also have that button that opens the lightbox but doesn’t have anything attached. Is that messing it up?

@memetican No that seems to not hurt anything.
https://trm-cms-lightbox-with-captions.webflow.io/recipe/vitae-quo-voluptas

added a lightbox link with no image just text and link to group. Works fine in this project. Has to be that live webflow project. Checked the webflow.io and it is doing the same thing.

A lightbox with no items… that seems like the most likely cause of your missing image and missing alt caption. What happens when you remove that?

I think I could modify the library to look for and ignore missing items, however I’m trying to figure out the best way to test it, since I’m not certain how to recreate your scenario.

Do you want to clone your site and then transfer that copy to my workspace?

Hi Michael

The strange part is it works, just not on that collection in that lodge project.

here is the cloneable of yours
https://preview.webflow.com/preview/trm-cms-lightbox-with-captions?utm_medium=preview_link&utm_source=dashboard&utm_content=trm-cms-lightbox-with-captions&preview=b71f3b4699bd7f2bb5903028905797c0&workflow=preview

I added my structure to the template page and collection recipes you already have. There is the additional images - multi-image , single image video and the single button link. And it all works.

https://trm-cms-lightbox-with-captions.webflow.io/recipe/vitae-quo-voluptas

Nest the lightboxes in other divs shouldn’t affect the outcome since it is looking for the [attribute]

I’m going to start from a clean slate on the template page on the lodge site and see if I can’t duplicate the success of the cloneable. will let you know the progress

appreciate your time.

Webflow - TRM CMS lightbox with captions - 17 February 2023 - Watch Video

Are you able to please take a look at my site to see if I’m doing anything wrong?
I was unsure about how to style the caption, but from what I can see when I inspect the live site, the captions aren’t being generated. I know there’s a note on the SA5 page about a bug from August 2024 that Webflow were working on, but I’m hoping that isn’t the case still…

Hi Claudia, I finally had a chance to re-review all of the different setup possibilities.
Unfortunately the only configuration that works properly with captions is when;

  • Lightbox media is bound to a CMS image field ( not multi-image )
  • Lightbox contains an image thumbnail, where the alt can be bound

Every variation I’ve tried with multi-image fields fails either due to the alt text bug which still exists, or due to the way lightboxes work internally.

All of the docs are updated with notes.

Hi Michael,

Thank you so much for looking into this for me! I’ve gone ahead and built my gallery with single CMS image fields, and the captions were working as of yesterday, but since filling the other tabs and their lightboxes, now they aren’t showing.

Is this an issue with multiple lightboxes on one page? Would really appreciate your help again!

This is my shareable link, it’s on the ‘Gallery-new’ page: https://preview.webflow.com/preview/threedolphins?utm_medium=preview_link&utm_source=designer&utm_content=threedolphins&preview=0add16f4c6f4f2293a1edff97027b48b&pageId=67f7e212c9bad22240127dca&locale=en&workflow=preview

Hi Claudia,

Currently you can see that your image element [1] is set to alt text from image [2].
Since you’re sourcing from the CMS, and not assets, there is no alt text.

What you’ll want to do is to create a text field in that collection to store your Alt text, and then bind [2] to that.