[Support request] Thumbnails equal size

Hi there,

Can you provide a link to the page in question? So we can inspect the page and provide custom CSS writeup if necessary.

You can send in the site details through our contact page if you wish to keep it private – https://wpshowposts.com/contact/

Let us know.

Hi there,

Thank you for sending it in.

I’ve replied to the mail you’ve.

Here’s the content of it incase the mail didn’t come through:

For the image:

The image files themselves are not the same size/dimension so it makes sense why they don’t display the same. But we can force them to display the same size but with cropping using CSS.

.wp-show-posts-image {
height: 300px;
width: 500px;
overflow: hidden;
}

.wp-show-posts-image img {
object-fit: cover;
}

Applying this will make all the images the same size, which in turn will align the top side of the titles. But then there’s an issue on varying title length.

For the text:

The titles actually have the same font size but the problem with this is the title length varies.

There are different ways to approach this. One is to trim the title so only a specific number of words would appear. But this may not be desirable as some users want the whole title to always display properly.

Another approach is to force a fixed container height for the title’s container so the title areas always occupy the same vertical space regardless of how long the title is.

But the problem with this is, there will be a huge gap for titles that have a significantly shorter number of words. It will look weird for some users.

That said, you’ll have to pick between the 2 which do you prefer. a “cropped” title or a fixed title height with weird gaps for shorter ones.

Is it possible to do something similar for the text below the image too, so that they are resized to in order to line up?

We normally line that up with auto margins but I don’t think that’s applicable to the layout of your WPSP because you’re using masonry.

Masonry posts don’t have equal column height so it won’t work.

You may have to disable masonry and apply this CSS if you wish to try to align things:

.wp-show-posts-inner {
    display: flex;
    flex-direction: column;
}
.wp-show-posts-entry-summary { margin-top: auto; }