Archived topic
Consistent sized images on homepage
1 reply · Started by Casey on July 7, 2021
On my homepage I have some latest posts showing (4 in total). All used to display a consistently sized feature image. Now they are all different.
Not sure what I have changed but would love to bring them in line
website is http://www.golfdrifter.com
Hi Casey,
Not exactly sure what you mean by "bring them in line", but as for applying the same size/aspect ratio for all the images within the WPSP list you have, you can add this CSS:
.wp-show-posts-image {
position: relative;
padding-top: 75%;
}
.wp-show-posts-image img {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: auto;
object-fit: cover !important;
}There will be a bit of cropping that will occur to keep the aspect ratio.
As for keeping them aligned:
That's quite tricky to do because the culprit is the variation of title lengths. Some title go as long as 3 lines while others only have 1 line. This means some images will be pushed further down ( titles with 2 lines or more).
My suggestion:
You can truncate the title text so it always occupies only 1 line but I'm not sure if this is desirable.
