Masonry with dynamic images

Wappler General How To
#1

I’m trying to figure out how to make a masonry grid with dynamic images in a folder. I was able to add a server action file which poiints to the folder. I’ve added a row with an image which is dynamically linked to the folder with url being the expression. The first image is displayed. My trouble is trying to turn that into a masonry and also display all the images. I’ve tried adding a repeating children to the image then applying masonry to the row, but I don’t have it right. Nothing shows. Here’s where I am in the screen show, just a basic row. Can you point me to the order of the steps on how to specify the repeat region correctly and turn the whole thing into a masonry. I’ve tried to follow the tutorial but couldn’t follow it. Sorry.

Thanks,
Rick

masonryscreen
masonryscreen.jpg2120×1258 278 KB

#2

Please check the docs:

Scroll down to the part explaining the dynamic stuff.

2 Likes
#3

thanks, I finally got it to work. I can’t however create a mouse click event to open the photo in a lightbox. Is there a way to do that?

#4

Please check the docs about using lightbox:

1 Like
#5

I am able to get the masonry to work. To make the lightbox work, according to the docs, I need an anchor image which is not available as an option in the masonry. However, I was able to code it in. when I do, the photos do have a link to a lightbox and show correctly in the lightbox, but the masonry images are way too big and overlap each other. The photos are about 400-600px and looked fine in the masonry before as smaller images. Should I be using something else other than anchor images in the masonry repeat area.

Thanks, Rick

#6

You should be using exactly anchor images with the lightbox.
Please provide a link to your page where we can check the issue.

#7

http://www.marsalstudios.com/wedding-photography.php

here is the link. I may have messsed it up for you as I kept working on the file so not sure if you saw it already and got a blank. Here it is now showing the weird layout I got putting in the lighbox effect. Please advise how to fix this.

Thanks,
Rick

#8

There are two issues on your page:

  1. Your images miss the responsive class applied to them:

Screenshot_31
Screenshot_31.jpg426×775 67.8 KB

  1. By default <a> tags are inline elements. This confuses the masonry grid as it expects block elements. You can just add a class="d-block" to your <a> tag in the masonry to fix this:

Screenshot_32
Screenshot_32.jpg426×557 57.6 KB

#9

thanks, that worked perfectly!!!

Thank you also for the lightbox info. Is it possible to put a vimeo or youtube video inside a lightbox? I can do it for videos hosted on my site but I’m trying to get away from that.

Thanks,
Rick

#10

Unfortunately the current version of Lightbox does not work with external links, only for videos on your server.

#11

ok, I can do that. I’m sure you have quite a list of feature requests. I would certainly advocate for that one. I have almost completed a total rewrite of my website using wappler and am so pleased. Just one more page with multiple videos to finish which is why I was asking. I plan to use a swiper with links to lightbox videos.

Thanks for all your hard work. I certainly appreciate it and also the amazing support .

Rick

1 Like