I’m using a Webflow template for my blog. It’s set up with dynamic blog posts on the home page, and the sample blog posts that came with the template all have images the same size.
You’ll need to give your “Post Link In Images” Link Block element a height (450px seems to match what the others are displaying at), set the height and width of the “Post Image” element to 100%, and then change the Fit property to “Cover”:
Keep in mind that this height will probably need adjusting on the smaller breakpoints as well and any image that breaks the ratio will be cropped so the image “fills” the entire frame, but this will keep all the images at the same height
My apologies for the confusion, the 450px height is just a guess based on the height the images pre-adjustment. I just used that as a starting place when testing my changes and it seemed to keep the images at roughly the same height they were upon initially loading the project.
You can add/adjust this value for the “Post Link In Images” element as you’d like, but 450px seems to match the existing size pretty well
The image sizing is something I’ve always struggled to understand. I tried setting one of the new images to 450 in height and it’s even larger than the others on the home screen, even though it’s set to the smallest height.
I’m not sure where I should be altering the height on all of them to make them all the same as on the size bar (Layout, Spacing section) it’s showing them all as 0. And if they’re different heights to start with, will this not mean they’re still uneven?
Image sizing is definitely a bit complex, especially with the use of high density displays and such, but I’d consider the biggest they’ll be shown on the page—regardless of the breakpoint—and make sure they’re all at least that big.
I took a closer look at the CMS setup you have, and these all appear to be grabbing a “thumbnail” version of the post image although I’m noticing that on your most recent addition (“The time and space of mornings”) you’re using the same size image for the “main” image as well:
Given you’re not really using a larger display of the image on the blog post collection page you can probably omit the second image field on the collection itself, but if you end up wanting to use a larger version then I’d recommend optimizing one version for the smaller list view and another larger version for the post view.
I’m not sure where I should be altering the height on all of them to make them all the same as on the size bar (Layout, Spacing section) it’s showing them all as 0. And if they’re different heights to start with, will this not mean they’re still uneven?
This is only the minimum height of the image (to allow it to shrink as needed) and keep in mind that your image shows the styles for the “Post Image” and not the parent container “Post Link In Images” which is where you’re ultimately going to want to control the height:
The styles on the “Post Image” element is going to be 100% height and width (so the image completely fills the available space of it’s container element) and then make sure you adjust the Fit property so that it doesn’t distort the image itself—instead allowing it to be cropped so it fills the entirety of the container:
Once you make those two changes to those elements you should see all images are aligned to the same height
In the ‘Related Image’ section at the bottom of the blog posts, the latest blog post ‘The time and space of mornings’ is showing up out of size. But it’s not the same formatting of “Post Image” and “Post Link in Images”. Instead I have “Related Post Wrapper”, “Related Item”, etc. and I don’t know which one to alter.
Of course! As you mentioned these are structured a bit differently, although you can apply a mixture of the two steps from above by giving the “Related Images” element 100% width and a desired height (in my example I just used the same 450px) and then set the Fit to “cover”:
Just like with the other changes mentioned earlier, you’ll want to make sure that you make these adjustments on the base breakpoint and make sure each smaller breakpoint responds as expected—making changes to those breakpoints if something needs to be tweaked further
