Streaming live at 10am (PST)

Dynamic Embed Space Problem


#1

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.

On the house with 6 pics, there's a lot of empty space between the last pic and the footer. On the original site http://renovation-site.webflow.io/projects/deter-rd this wasn't an issue, but now since I added HTML embed on the duplicate, http://copy-reno.webflow.io/projects/deter-rd it is. Is there a way to fix this?


Public Share Links
[duplicate] https://preview.webflow.com/preview/copy-reno?preview=d59abaf9a34146bd76d843d7ef158370

[original] https://preview.webflow.com/preview/renovation-site?preview=ae1b159dfae367dc40277a8dcad63446


#2

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

Jeremy


#3

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






I want it like this:



#4

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


#5

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?


#6

do they appear after the condition is added?


#7

Yes. Will I have to add a condition in the HTML embed?


#8

That I'm not sure how to do. I used the embed on this site

https://preview.webflow.com/preview/shelleyjanze?preview=217cad07bc49a1fff5aa25bbbdc4b348

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

shelleyjanze.com is the finished site


#9

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.