â–Ľ
Streaming live at 10am (PST)

Missing Caption Texts in CMS Lightbox Gallery

The latest Webflow CMS Lightbox Gallery is a great function to build dynamic Lightboxes, but I cannot find a way to add a caption text to be shown whe the gallery image is open. Any help from the community will be very helpful.

bye

Pietro

Hi @Magicopit, I do not believe that feature was available with this release. I believe we will have to wait a bit longer for that feature.

Thanks brandon for your quick replay. I hope somebody will be able to help with some custom code because I really need to provide this for my customer project.

Hi @Magicopit I have used the solution in the following post and it has worked well:

You can see it active at https://www.gordongallery.co.il/artist/aviva-uri (just click any of the artworks to trigger it).

Hope that helps! :wave:t2:

2 Likes

Hi @asksj ,
did you use a solution from Full CMS Lightbox post after the update?
His post is very incomplete, the links are not working anymore.
I have to add the captions to my lightbox, so I followed his instruction and inserted “caption”: “Caption” into the code but it’s not rendering that element on the HTML preview. Do you maybe have any idea why is it happening?

EDIT
I tried again and the solution from that link works even after the update.

1 Like

Hi @hoops,

All good now then? Or do you need any other help with it?

Hey @asksj, I managed the functionality with captions, but actually, I might be doing something wrong with the styling of the embedded code on the grid with thumbnails…

Content hidden, I solved the problem

Here is the link
Can you have a look? Designer link

Basically, I need to achieve the look like in the NEW page (so square pics equal vertical and horizontall equal square width and centered in the middle).
I figured out previously how to style it with a grid, but it was working for a new version of lightbox so without embedded code element.
However, with exactly the same settings on the embedded element, it looks different from the page that uses only grid (ALBUMS page). Do you have any idea how to fix it so that pages like NEW and all that have lightbox are equally wide as ALBUMS page?

I also have a problem to make the lightbox picture smaller because now the caption will be hidden under thumbnails.
This is the code I used to style the picture and caption:

.w-lightbox-backdrop, .w-lightbox-container {
background-color: white;
}

.w-lightbox-left, .w-lightbox-right, .w-lightbox-close {
opacity: 1;
}
.w-lightbox-caption {
position: static;
right: 0;
bottom: 0;
left: 0;
padding: .5em 1em;
background: white;
color: black;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-align: center;
font-size: 0.8rem;
}
.w-lightbox-image {
max-height: 75vh;
}
.cms-image-thumbnail {
max-height: 160px;
}

I will really appreciate the help, working on it since a few days, trying to glue several tutorials together, because most of them have missing links or is outdated…

Hi @hoops, so glad you solved it! Sorry for my delay, computer was in the shop and just got it back.

Hi SJ,

Is there a way to a CTA button to show under the image in webflow’s default light-box modal?

Any code, would be appreciated.
Thanks!