Post thumbnail has different aspect ratios on different pages

  • Resolved cpete328

    (@cpete328)


    2 years, 6 months ago

    I’m currently working on a website for a non-profit organization that a friend of mine belongs to. I’m not a common WordPress user; I’ve built a couple of sites before but it’s been a while. In fact, this is my first time on WP5, and I’ve had to give myself a quick education on the Block Editor system (which wasn’t that hard to figure out.)

    My site is using the Hestia theme, with a number of child theme edits to customize for their needs. For baselining, I’m pretty comfortable with CSS, but not so much with PHP. I’m hoping there’s either a CSS or intrinsic WP/Hestia solution for my question.

    My challenge right now is in image aspect ratios as they appear on new posts. The client prefers using images in a 1:1 aspect ratio (since an important piece for them is auto-sharing their posts on all their various social media sites. An important one is Instagram, which works best with 1:1.)

    In most places on their site, post thumbnails carry over as expected as 1:1 ratios. The only exception is on their homepage — the Hestia theme crops the same thumbnail into 3:2. I’m trying to figure out how to adjust the homepage settings to display post thumbnails in 1:1.

    One option is to have their image designers create their images natively in 3:2, but then adding padding at the top and bottom to fill out the square. They’re willing to do that, but only reluctantly.

    I’ve been using Chrome’s Inspect Element feature to adjust width and height settings, but that seems to either keep the 3:2 and stretching the image, or adding whitespace instead.

    I’m at a loss about what else I could do.

Viewing 3 replies - 1 through 3 (of 3 total)

  • Hi @cpete328,

    Thanks for choosing Hestia!

    It’s possible to change the aspect-ratio for the post thumbnails from the homepage by adding the code below in the Additional CSS section within the Customizer, or in the style.css file of the child theme, as you mentioned you already use one.

    .home .hestia-blog-content .card-image a img.attachment-hestia-blog.size-hestia-blog.wp-post-image {
    aspect-ratio: 1 / 1 !important;
}

    Have a nice day!

    Thread Starter cpete328

    (@cpete328)

    Thanks @luciamarinescu, this helps with part of the problem. The <div> now shows in 1:1 aspect ratio. However, the image is still distorted — cropped into a 3:2 ratio (cutting off strips from the top and bottom), but then stretching the cropped image vertically to fill out the square. The cropped portions of the image are rather essential content — cutting off a person’s head from the top, and title text from the bottom. And vertically stretching what’s left.

    Unfortunately, the issue is not resolved with the child theme CSS provided. My backup solution is to disable the Blog frontpage section, and add the content into a Latest Posts block in the About section. This satisfies the client for their needs.

    • This reply was modified 2 years, 6 months ago by cpete328.
    • This reply was modified 2 years, 6 months ago by cpete328.

    Hi @cpete328!

    You could try to add the code that can be found here in the functions.php file of a child theme and then regenerate the thumbnails using this plugin.

    I hope this helps!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Post thumbnail has different aspect ratios on different pages’ is closed to new replies.