Streaming live at 10am (PST)

Making lightbox grid gallery out of CMS multi-image field?

Hey there,

I can’t seem to wrap my head around making a photo collage by using the CMS collection multi-image field. Apparently there are some restrictions for placing images manually within the grid if using the multi-image field.

Any ideas whether this is possible?

Here’s the design I want:

It should be lightbox, so that clicking each image opens the gallery.

I’ve managed to do this by using single images, but I’m running out of collection fields when using 7 for the separate images on my real page.

I’ve replicated the situation on a test page:


Here’s the live test site: https://grid-image-gallery.webflow.io/photo-galleries/test
Here is my site Read-Only: LINK

2 Likes

I’m also interested in this

Hi, did you have any success with this?

I’ve been following this Tutorial, which should do exactly what you and I want but I can’t link to the multi-image field (only my singular lead image), it just doesn’t show up in my the drop down list of the CMS Collections.

Is this what you’re trying to accomplish?

Hey @Smallboxes @myonke,

In the end, I just used single images (each one is a Collection List):

Screenshot 2020-03-25 at 13.24.34

This takes 7 collection fields but my workaround was to use reference fields, so I managed to keep the fields under the limit.

Thanks, that’s it, did that as a lightbox gallery but also needed to get the layout right.

Thanks, for this. I’ve decided to go for a standard Lightbox approach and use it as a symbol. It’s more work but won’t need to be edited much once the project is done. I’ll look at this for future ones though, thanks.

Hi, can I ask you how you made an override field of the media in the lightbox? Thanks!

Hi, I’ve added a screenshot that I hope will explain what I did.

Every “Gallery Img” contains an override field. Hence GI-1 to GI-9 in my example.
I created the Gallery as you would normally with images and then turned each image to an override field.

I basically means you can carry the styling from one gallery to another but you have to put new images in each time.

Hi, thanks for your quick answer and the screenshot! In my case, the lightbox itself would have to be the symbol. And there I still haven’t figured out how to make the media (an image) an override field.