Displaying Dynamic Images - Best Practices/Design

Wappler General Need Help
1

Hi Guys,

I’ve got a page where I’m dynamically displaying images attached to a quote in the database, at the moment I’ve just put an image in a table row and repeated it however it looks pretty ugly and just lists them all vertically - is there a nicer way of displaying them (for example perhaps in a grid, 3byx or something?)

(what i have now with dummy images)

05%20am
Screen Shot 2018-10-04 at 11.53.05 am.png505×752 64.8 KB

I’ve had a quick look at the masonry plugin but i can’t work out how to repeat that.

Any guidance would be greatly appreciated.

Thanks,
Ben

2

G’day Ben (nice name),

I am not sure if you are familiar with Bootstrap, if not you may like to have a look at https://www.w3schools.com/bootstrap4/ and https://www.w3schools.com/bootstrap4/bootstrap_images.asp in particular the part about Responsive Images.

If this is not what you are looking for, please upload the page and give us the link to it. That way it is easier for us to help you.

3

Hi Ben (the best name i reckon :wink: )

I probably should have expanded my post a bit sorry,

So at the moment the only reason I’m using a table is that’s the only thing I know how to do a repeated region on in wappler.
If i could just do a repeated region on the image itself I could limit the width and force the images into a little box that looks a bit nicer.

4

Worked it out,

created a div, added a repeated region and styled the div to fit nicely :slight_smile:

5

Have you looked at Masonry? Great for displaying images which auto arrange to take up the least space on screen.

1 Like
6

I was also just about to recommend the Masonry component. Didn’t you had a video about it @Hyperbytes ?

7

Not yet but its in the to do list

8

Here is the documentation about masonry, maybe it will be useful for Ben: Applying a Masonry Grid

1 Like