How to crop feat. images on blog index?

  • Resolved dnlcrd

    (@stardeslebens)


    5 years, 8 months ago

    Hi!

    We have a lot of authors submitting blog posts to our site. Every one uses a featured image of different sizes. We want to have the featured images on blog index to all appear in the same aspect ratio e.g. 16:9 but keep the responsiveness.
    It’s a lot of work for me download all the images, crop them manually in photoshop and reupload them to the posts so I am looking for a way to just crop them on the frontend / blog index view.

    Storefront has sadly no option in the backend to set image sizes. It just uses the images “as they are”.

    I tried to work with something like
    img.attachment-full.wp-post-image {
    object-fit: cover;
    }
    but I don’t now how to keep the responsiveness alive then.

    Any help is very appreciated!

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Job a11n

    (@jobthomas)

    Automattic Happiness Engineer

    Hey @stardeslebens – you were almost there with the custom CSS. The one thing that was missing was defining an actual height. object: cover will make sure that it doesn’t get a weird stretching to fit into those dimensions.

    Under Customize > Additional CSS, you can add the following code:
    ?

    /* all images have the same height */
?
img.attachment-full.wp-post-image {
    object-fit: cover;
    height: 200px;
}

    If you want to adjust the height, just change the number there. If you want a different height for different screen-sizes, wrapping them in media queries will do the trick. This is a good tutorial as to how media queries work: https://www.w3schools.com/css/css3_mediaqueries_ex.asp
    ?
    If you’d like to learn more about CSS, I highly recommend using the free tutorials at w3schools. Here, you can find the basics of selectors (how to target the right element on the page), and properties (how to change the element on the page).

    Thread Starter dnlcrd

    (@stardeslebens)

    Thanks that worked for me!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to crop feat. images on blog index?’ is closed to new replies.