Add captions to a Lightbox Video gallery with CMS

Design help CMS
1

Is there a way to display a caption on the lightbox video gallery made using CMS.
Is possible to pull information from the cms to be included in the caption? I have followed the steps in this tutorial, but I have not been successful. How to Caption a Lightbox with Video

Here is my public share link: https://preview.webflow.com/preview/conormcbride-com?utm_medium=preview_link&utm_source=designer&utm_content=conormcbride-com&preview=f52f0123e2f17ece1369bcce93caae06&mode=preview

1 Like
2

Seconded - hopefully someone knows of a workaround that they can share?

3

Hi @Tobin, unfortunately at this particular time, captions are not available on Lightbox using the CMS feature. I do know it will be coming soon, soon.

I know you can do it with a CDN and custom code. I have to see if I can get the link for you.

1 Like
4

I am also in need of this feature. The dynamic Lightbox is awesome and this is definitely needed.

2 Likes
5

You think soon like in a few weeks?

1 Like
6

@bgarrant Bryan,

I have no idea. I do know that in conversations with some staff members, that it is actively being worked on.

7

Thanks. I will keep an eye out. About to launch a site that needs that function.

8

@bgarrant, you are not the only one! lol

1 Like
9

Thanks that would be great

10

I know you can do it with a CDN and custom code. I have to see if I can get the link for you.

Hey Brandon,

If you have it to hand and it’s not too much trouble, that link would be really useful :slight_smile: No worries if not though, particularly if the feature is already being actively worked on!

For anyone wishing to vote for this in the Wishlist, I have added it HERE.

11

TBH i have no idea! Sorry!

12

I have the same issue and I almost have a solution.

I created a div/window that contained dynamic text getting the caption text from the CMS.
I set the display to none, then created an interaction that would show the caption text when I clicked on the lightbox button.

This is what it looks like when I open the video lightbox…

Screenshot 2020-03-04 at 15.18.35
Screenshot 2020-03-04 at 15.18.352560×1308 567 KB

Does anyone have an idea of how I can get the Caption text div to hide again when I close the lightbox?

@QA_Brandon @Tobin @Andy_Vaughan @bgarrant

13

Use the “X” as a second click function.

14

@QA_Brandon Thanks for the quick response!

The “X” is apart of the Webflow lightbox. I did not make it and I don’t know how to select it to attached a click interaction.

15

@dseadon,

You are correct, I apologize. You may need to use some custom code to make that work to continue this direction.

I know it to have it natively is on our bucket list, but I do not have an eta on when it could/would be released.

Best Regards,
~ Brandon

16

Hey I was able to solve this with some creative Javascript. Essentially, when you create a lightbox and tell it to use the images in the “Gallery” field of a given post, it renders a lightbox. The problem is that Webflow hasn’t implemented a way for you to add a caption to each of those images. I found a work-around:

  1. Use the ALT tag on the image in your gallery as the place where you put the caption.
  2. Inject a script tag in your page OUTSIDE of the lightbox that loops through each thumbnail and modifies the JSON in the tag that Webflow renders for each gallery image. My script is below, and it works to render the ALT attribute’s text into the caption of the full-screen image simply by adding the “caption” element to the JSON object of each tag.

SCRIPT:
/*
This script replaces each gallery thumbnail wrapper given its
classname which you MUST make unique to the page. I’ve used
.gallerythumbnail. Keep in mind that WF will render
them to lower case, so keep them lowercase in the WF editor
in order to avoid confusion.

The script loops over each thumbnail and finds its SCRIPT
tag which WF generates with some JSON you can attach a
caption value to. When a caption value exists, it will
render in the main view of the image in the lightbox.
*/
const DGCs = document.querySelectorAll(‘.gallerythumbnail’)
DGCs.forEach((thumb,i,a)=>{
const imageAltText = thumb.parentNode.querySelector(‘img’).alt
const script = thumb.parentNode.querySelector(‘script’)
const imageJSON = JSON.parse(script.innerHTML)
imageJSON.items[0].caption = imageAltText
script.innerHTML = JSON.stringify(imageJSON)
})

2 Likes
17

Hi @Carlos_Perez

Have a bit difficulty in getting this to work. Do you place the script in an embed or in the page header/body ?

18

@QA_Brandon Is this feature moving up the bucket list? :wink:

19

I am using this with images. I found this article, https://www.flowbase.co/blog/cms-lightbox.
I added the following line into the Items: object in the custom code, “caption”: “put here your caption field from your cms here”.
I did this buy copy and paste the url: line, dont forget the comma at end of url: line

20

Hello James, it seems you were able to make this work… Is there a chance i could pick your brain about the specifics? Please let me know. Thanks, Andras