So I’m almost finished making a home renovation site for this company. I wanted to play around with the site to see if I could make it better. I duplicated it so I wouldn’t mess anything up. The first link is the duplicated site, and the second link is the original.
Basically I was trying to make a dynamic lightbox on the gallery page. This isn’t possible at the moment on webflow, but I found a way around it by using HTML embed. Everything looks great but now there is a spacing problem on my site. Not all the houses have the same amount of pictures on them. One house has 13 pics, while another has 6 pics. On the house that has 13 pics, there isn’t a spacing issue.
One of the easiest fixes is to make your images all the same size. In the collection. They are all currently different sizes. So they naturally take up different space. The full images also are huge. You should be able to optimise them down to 100kbs Using tiny png or an image compressor.
I can’t see what the html embed thumbnail control will result in on a live site because they are embeds. But have you tried changing the size of the html embed. Give it an actual size? The same way lightboxes are given a size.
or give actual size in the embed you have height constrained at 247px but you could set the width as well. Will work fine as long as landscape. But I’d recommend making your landscape orientated images the same size beforehand. Optimize them then they will look the same
Thanks for the response. I’m definitely going to change the image size when I get chance tonight. So I ended up setting the width to 400px in the HTML embed & now I’m getting empty boxes
The reason you are getting empty boxes is it is grabbing every image you have listed in the collection even the empty ones. You can set a condition on each of the embeds.
That way they will only appear if there is an image in it. Otherwise it won’t
Thanks Man! You’re awesome! I forgot all about that feature. One more question…Is there a way you can hide the empty boxes that appear on the lightbox screen?
I structured mine differently and used a dynamic list. I think it would actually work better than what you are doing. And it would only grab the appropriate images