You want to know the weird thing- the position and style you see the caption was already built by Webflow into the lightbox. I’m just populating that element from the alt text.
My guess is that they started building the feature and then stopped to reconsider designer requirements on styling, links, multiline text… went down some rabbit holes… got lost in requirements… and then shelved it for a later date while they work on more critical things.
thank you for this. Webflow’s original non CMC lightbox always had captions. Not sure why their CMS never had option. I added a simple if condition so that if an ‘alt’ isn’t present it doesn’t give the undefined error. As videos don’t have them. But this is awesome will share this wide.
Thanks Jeremy, the library should ignore videos successfully, I had the same issue on a project as well- but you might have found a case it doesn’t detect successfully.
If you can find a situation where you can create an undefined result in the caption please share it in the Sygnal Attributes forum here, would like to add that improvement to the list.
That makes a lot of sense- it’s probably the HTML structure I’m seeing emitted.
Hi Michael, it was from the clone actually. I was mixing a bunch of galleries together though. Used the template page so I could test combination of the main image, video, and a collection list of additional images from multi-image fields. wrapped the caption bit in if (caption) {
} worked like a charm. I was so happy I didn’t have to figure this our from scratch.
You should be able to do that with some CSS,
Use chrome inspector to figure out what you need, but I’d guess this is pretty close.
Try putting this in an embed on the page(s) that you want all lightbox captions centered. If that’s all pages, you can put it inside of your nav component.
<style>
.w-lightbox-caption {
text-align: center !important;
}
</style>
Great plugin and thanks for that!
BUT it has a bug.
If you have the same image (same filename) multiple times on the same site (yes agencies sometimes can’t get enough images on a site ), then caption does not work proper anymore for those images. You have to give the image-copies different filenames to make it work.
Hi @Alain , the same image multiple times in the same lightbox? Yeah that would be a use case I might not anticipate as an actual need. If you think that’s a valid scenario you can post in SA5’s forum with details, readonly link, published, link, etc.
Hi @Dillon_Pope if you’re asking about lightbox captions then yes, the SA5 library will pick up alt text from your multi-image field as well.
However we’ve seen a glitch lately where on some sites, Webflow isn’t publishing the alt text content from some CMS multi-image fields into the HTML, you can inspect your HTML to check.
I’ve put in a support item today to make certain the Webflow team knows.
Thanks for the reply! I am trying to add captions to the lightbox images that show when you click the button midway down the page that says “View Full Gallery” ( I have attached a screen shot) This links to a multi image field in the collection. I have the captions showing for the feature images but I cant link them to the additional images associated to the button.
That’s a very unique build, I need to think about your setup. The basic issue is that without the image thumbs the script doesn’t have anywhere to access the alt text.
Because of this, your approach probably won’t for what you want to achieve- the lightbox wrapping your button is bound directly to the image gallery field, so there is no way to insert that image.
I’d normally approach this differently-
The image gallery would contain all of the photos, including the featured ones. The featured ones would simply be the first 4, manually ordered.
I’d use only one collection list, bound to the image gallery field, and it would display all of the photos and thumbs in the featured style you’ve already built
I’d use a small piece of custom CSS to hide items 5+, so you only see the first 4 featured
The button would be lightboxed, and have the same group, but I would not specify a media property there
You’ll then have your 4 featured, your button, all of the content you need for your alt text captions, and you can delete 8 fields from your collection ( the 4 featured images + their caption fields )
Drop me a message if you want to see these changes done in a video, it’s an interesting problem and would make a good tutorial vid for the caption setup you’re creating.