Support » Plugin: AMP for WP - Accelerated Mobile Pages » Featured Image Size on homepage is incorred

  • Hi,

    The featured images on the AMP homepage are getting squished ore stretched to fit a square. I have not defined a size under AMP4WP settings under Homepage Settings. ANy help would be appreciated

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

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Can you please share few screenshots or a short video regarding the issue which you are encountering at your end? So that we will have a look and let you know back.

    Thread Starter manan

    (@manan)

    Hi, the image resolutions here (marked the ones that are obvious to notice the wrong resolutions)

    https://ibb.co/smCgcFj

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We inspected your site and did not encounter any wrong resolution. Can you please elaborate more on your issue? So that we will guide you accordingly.

    Thread Starter manan

    (@manan)

    Maybe I’m doing a bad job of explaining. The amp home page of the website is auto-resizing the featured image for the thumbnail. As a result it takes a picture with the resolution of 3024 x 4023 and makes it into 100 x 75. This is not the right downsize and makes the images look “squished”.

    The image should be resized to 100 x 133 or 56 x 75.

    Does that help explain the problem? AMP for WP is forcing all featured images to be 100 x 75 for the thumbnail and that resolution is not always the right downsize.

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    Thank you for explaining the issue in detail. We really appreciate it.

    We have developed plugin following the standards laid out by official AMP and Thumbnails size is supposed to be 100×75.

    Based on your query we have changed the attributes values for testing and you can see the results following the Screenshot URLS.

    56×75: https://prnt.sc/12u8dqd
    100×133: https://prnt.sc/12u8gay

    If you want to change the thumbnail size anyhow, then you can add Custom CSS in AMP option panel>Design>Global, to achieve the desired look on your site.

    Thread Starter manan

    (@manan)

    Thanks, is there a way that the theme uses the css option of object-fit: cover? That way the plugin will stick to 100×75 for thumbnails AND it doesn’t matter what the resolution of the featured image is, the image will automatically show only portion of the image inside 100×75.

    https://css-tricks.com/almanac/properties/o/object-fit/

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    You can do it by CSS property through the custom CSS option. You can find that option in the AMP option panel > design > global where you can add custom css.

    Reference screenshot: https://prnt.sc/12yj0kq

    Thread Starter manan

    (@manan)

    Wish I knew how to write CSS 😀

    Thread Starter manan

    (@manan)

    Here’s the page that describes the problem I am having on the homepage:

    THe images are being stretched as described here

    https://amp.dev/documentation/examples/style-layout/how_to_support_images_with_unknown_dimensions/

    Thread Starter manan

    (@manan)

    https://github.com/ampproject/amp-wp/issues/1838 This is the same issue I’m having, AMPforWP was being used here as well.

    Plugin Author Ahmed Kaludi

    (@ahmedkaludi)

    We understood your scenario and also we checked on both AMP and Non-AMP versions. On both versions, the images are rendering the same.

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