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

codeLess · January 21, 2020, 10:51am

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

doodlefish007 · February 3, 2020, 1:11am

I’m also interested in this

Smallboxes · March 24, 2020, 11:32pm

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.

myonke · March 25, 2020, 12:37am

Is this what you’re trying to accomplish?

https://www.loom.com/share/eb9249a168be4c8dbfa8ab8725390286

codeLess · March 25, 2020, 11:29am

Hey @Smallboxes @myonke,

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

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

codeLess · March 25, 2020, 11:30am

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

Smallboxes · March 25, 2020, 11:57am

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.

Septunus · May 11, 2020, 8:04am

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

Smallboxes · May 11, 2020, 9:58am

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.

Septunus · May 11, 2020, 1:20pm

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.