Images appear circular in admin panel, stretched on live site

[Martin]

When I add images using the image block, they appear perfectly circular when previewed in wp-admin — however, when I view the images on the live site they are not circular. Why might this be?

[Leo]

Hi there,

Are you using any sort of caching plugins or server cache?

If so can you disable it for us to take a look?

When something works in the back end but not on the live site, it’s generally a caching issue.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

No cache or plugins installed.

[Leo]

Any chance you can disable all plugins except GP Premium and GenerateBlocks for us to take a look?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

All plugins except GP Premium and GenerateBlocks have now been deactivated.

[Leo]

Ahh ok I see the issue.

Can you try adding this CSS?

.wp-block-image.is-style-rounded img {
    height: 200px;
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

That CSS snippet does seem to resolve the issue — but shouldn’t the images appear circular without having to customize the CSS?

[Leo]

It should – looks like a small issue with the theme’s CSS.

We will take a closer look. Thanks 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Leo]

If I could make a recommendation…

You should notice that the images are out of ratio as you are using the resizer to make the images square at 200px by 200px.

The better solution would be to make sure the original image is already square/1 to 1 ratio, then the Rounded option would work without the CSS I’ve provided and images would not be out of ratio.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Martin]

I was aware of that, but the issue is having the client remember to always upload (and create) a perfectly square image! This is easier said than done!

Since the images appear perfectly circular in the admin panel, I am really confused as to why they don’t appear correctly on the live site?

[Leo]

Because the theme is adding this CSS to make sure the images stay in ratio when cropped:
height: auto;

Generally that’s what we want.

That CSS doesn’t reflect in the customizer.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts