[Resolved] Different latest post

Home Forums Support Different latest post

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1379599
    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!

    #1379775
    Tom
    Lead Developer
    Lead Developer

    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?

    #1379954
    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?

    #1380354
    David
    Staff
    Customer Support

    Hi there,

    add Toms code and add this code:

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

    The code worked – thanks!

    Any recommendations for a way to properly size feature photos?

    #1381186
    David
    Staff
    Customer Support

    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.

    #1381199
    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!

    #1381595
    David
    Staff
    Customer Support

    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

    #1385044
    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.

    #1385374
    David
    Staff
    Customer Support

    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.

    #1387288
    Courtney

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

    #1387399
    David
    Staff
    Customer Support

    Try adding this CSS:

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

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

    #1387842
    David
    Staff
    Customer Support
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.