Featured image blog listings

[nmarsh]

Hi there

I would like to make the featured images on my News page a standard 150px x 150px, same as my thumbnail setting. How can I achieve this?

Thanks!

[Zex]

Hello, nmarsh!

Try to add next code in Customize->General->Additional CSS:

.entry-image{
    max-height:150px;
    width:150px!important;
    
}

Regards

[nmarsh]

Thanks, that is a bit better. However the image is not always square as sometimes they show max width 150 and a smaller height. If you look at the news showing on our home page, the featured images are all 150 x 150 – I’d like it to appear like this if possible. Any idea how I can achieve this?

Thanks

[Zex]

Hi,

Add the following code additionally:

.entry-image img{
 height:150px!important; 
 object-fit: cover;
}

Regards

[nmarsh]

Amazing, that’s looking exactly how I want now, thanks! 🙂

I’m using a static front page for the site at the minute that pulls the 5 most recent blog posts, it uses a shortcode plugin ‘Display Posts Shortcode’, but I can’t seem to format the listings as satisfactorily. I much prefer the format you have helped me to setup on the category/news/ page – is there a way I can use this as the static front page, but still showing only the 5 most recent blog posts?

I’m also hoping to setup targeted news throughout the site, for example on the information/curriculum/art page using the News/Art post category. Do you know if there is a way of doing this without using the shortcode plugin?

Thanks for your help, I’m learning lots!

[Zex]

Hello,

Unfortunately, no, only in the way you have already done this (by using an additional plugin).

(try to check this page if you need to modify the shortcode parameters )
or simply try another plugin…

also, you can try to use a WP Bakery page builders “Post grid” element, as it’s explained in the next VIDEO GUIDE
You can filter the posts by category.
https://prnt.sc/kl8ybo

And modify the look of the template:
https://prnt.sc/kl901a

PS: Insert next code, if you want to add a dashed line between the posts:

.display-posts-listing div
{padding-bottom: 50px;
    border-bottom: 1px dashed #e3e3e3;
}

Best Regards

• This reply was modified 4 years, 7 months ago by Zex.

[nmarsh]

Never mind, it was worth asking anyhow! Thanks for your help and for the links, I will have a look later 🙂

[Author]

Posts