[Support request] Images appear circular in admin panel, stretched on live site

Home Forums Support Images appear circular in admin panel, stretched on live site

  • This topic has 10 replies, 2 voices, and was last updated 4 months ago by Leo.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #1449408
    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?

    #1449412
    Leo
    Staff
    Customer Support

    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.

    #1449413
    Martin

    No cache or plugins installed.

    #1449416
    Leo
    Staff
    Customer Support

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

    #1449419
    Martin

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

    #1449427
    Leo
    Staff
    Customer Support

    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/

    #1449441
    Martin

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

    #1449484
    Leo
    Staff
    Customer Support

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

    We will take a closer look. Thanks 🙂

    #1449494
    Leo
    Staff
    Customer Support

    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.

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

    #1452947
    Leo
    Staff
    Customer Support

    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.

Viewing 11 posts - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.