[Resolved] Different latest post

[Courtney]

My homepage is set to my latest posts. I’d like to have the most recent post look different than the others e.g. have a larger image centered above the excerpt text.

How can I do this? Thanks!

[Tom]

Hi there,

It’s easy to force the feature image up above:

.post-image-aligned-left article:first-child .inside-article .post-image {
    float: none;
    margin: 0 0 2em;
}

However, the issue comes with the featured image size. How are you sizing them right now?

[Courtney]

Thanks!

I’m not really sizing them, I’ve just been ensuring that they’re square. What’s the best way to properly size them?

[David]

Hi there,

add Toms code and add this code:

.post-image-aligned-left article:first-child .inside-article .post-image img {
    width: 100%;
}

[Courtney]

The code worked – thanks!

Any recommendations for a way to properly size feature photos?

[David]

There are no specific rules for featured image sizes. It really depends on the design.
As you’re only displaying featured images in your archive and the square images work for your design, then this is probably the best method.

If you were adding them to your single posts then you may want to create wider landscape images around 800px wide. We could then assist with setting the archive images to the current square size.

[Courtney]

The images are also in single posts. I either have to use a square photo in the single post or upload 2 versions of the photo (landscape, square) and use the square for the feature image. Is there a way to have a landscape image be automatically squared for the archive? In the beginning, I had archive images of different shapes and it looked bad.

Also, the CSS code provided works but the photo quality is low, even though the photos in my media library are high quality. Any idea about how to improve the photo quality? I don’t mind shrinking the photo if it means the quality is higher.

Thank you!

[David]

If you upload an original featured image as landscape around 800px wide for the latest couple of posts. You can use that for the single post and the archive featured post.

I can provide some CSS to change the other archive images to square. The weigh off however is you’re site will be loading a larger image then is required for your post archive. This can be detrimental to performance. Let me know

[Courtney]

I used an 800 pixel wide version of the pic in the post and for the featured image and it still looks pretty bad.

[David]

Yes, you would have to remove the Width and the Height dimesntions from the Customizer > Layout > Blog –> Featured Images >>> Posts

With that change made i can provide some CSS to change the over the post images to their smaller square size.

[Courtney]

That worked, thanks! I’ll gladly take the CSS.

[David]

Try adding this CSS:

@media(min-width: 769px) {
    body:not(.single) .post:not(:first-of-type) .post-image img {
        max-width: 250px;
    }
}

[Courtney]

Thank you for all of your help – it looks great!

[David]

Glad to be of help

[Author]

Posts