Masonry with dynamic images

Wappler General Need Help
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