How to create dynamic CMS modal from image grid layout?

Design help Animations & Interactions
1

Hello,

I’ve spent the better part of two days trying to figure out how to make each of the Div block sections in a grid open up a modal and contain dynamic information from my Gallery Images CMS collection. I’ve got the modal functionality built but I can’t seem to get the dynamic modal functionality working without using a CMS collection in place of a grid - if I do that, the flexibility of the grid system in terms of being able to optimize the layout of images in relation to their dimensions (horizontal, vertical, etc.) falls apart.

I’d like to know how I can click on one of these images:

image
image1899×842 453 KB

…and have it open up a modal (seen here) and have the CMS content reflect the image in the Div block (pull in the primary image dynamically, the title, location, description, etc. as well as have dynamic Stripe checkout links for various sizes of available prints).

image
image1881×833 87 KB

I hope I’ve been clear enough for that to make sense! Any thoughts on how this would be possible would be hugely appreciated. If I can provide any additional information that would help plesae let me know.

Here is my public share link: https://preview.webflow.com/preview/brendan-cole-photography?utm_medium=preview_link&utm_source=designer&utm_content=brendan-cole-photography&preview=51eef4b7042919de6fd9d6f643a3df79&pageId=5e95ca231ff63353c248bf3f&mode=preview

2

Your image grid should in fact be the collection list. So the collection item contains the image, and the hidden popup with the image info.

Then you craft an Interaction that going to launch the popup on click on the image. You’ll target only the class that is the sibling of the image, to limit the IX to the item.

3

Thanks for the response vincent.

Is there a way you know of to retain the same grid layout functionality in terms of the div blocks being manually dragged to the right size/aspect ratio for the photo it will contain? How would I pull in an image via a CMS collection as the background of a div block and do so individually each time?

I hope that makse sense. Thanks for the help.