Support » Plugin: AMP » Images are not loading correctly

  • Resolved Daniel

    (@dssaez)


    Hi there,

    I’ve been having some troubles with the amp images from Gutenberg. I have just created a tested site from the scratch. It is a multisite and the AMP plugin is on “Standard Mode”.

    Any time I add an image on Gutenberg the images don’t get the attributes such responsive or lightbox effect. You can check it on the following link, the image should be full size due to the responsive attribute and also the lightbox effect does not work. The image get stuck when it gets its full size.

    https://test.simpledevel.com/thebluelaundry/images/

    The <figure> wrap tag has the attribute ‘data-amp-layout=”responsive”‘ but the tag “amp-img” has the value of “intrinsic”.
    This also happens on more installations when you don’t set the image to 100%, I mean, by default is 100% but you have to click on the option “100%” in order to the responsive work.

    Thank you!!

    Have a nice day.

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

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Support James Osborne

    (@jamesosborne)

    @dssaez With the plugin active and Gutenburg in use there are additional image options you can use to set the layout, which will apply to your AMP images only. You don’t need to manually add the attributes. You can also enable the image lightbox effect from the same tab.

    If you want to change the mode to transitional temporarily we can check the markup before amp is applied and see if there is anything else we notice.

    Thread Starter Daniel

    (@dssaez)

    Hi James, thank you for answering, I knew about the additional image options, this is exactly what I mean, I’m using them, I’m not adding any additional or modifying anything.

    I have change the mode to “transitional” and still the image is not having the responsive and lightbox effect.

    https://test.simpledevel.com/thebluelaundry/images/?amp

    Thank you.

    Thread Starter Daniel

    (@dssaez)

    Hi again,

    Well, definitely images don’t work using the plugin AMP, they show up but none of the attributes get effect, I have to do it manually introducing a custom html block.

    I hope you can see something, thank you.

    Have a good day.

    Plugin Support James Osborne

    (@jamesosborne)

    @dssaez Apologies for the delay. In your non amp site I can see you see some amp related attributes in the markup, such as the below:
    data-amp-layout="responsive"

    Can you remove those attributes from your non amp and then use the Gutenberg block amp settings only to define the layout?

    Thread Starter Daniel

    (@dssaez)

    Hi @jamesosborne,

    no problems with the delay.

    I have set 3 images: one with only the layout attribute, another with layout and lightbox and the third one with no attributes, I hope it helps you.

    https://test.simpledevel.com/thebluelaundry/images/?amp

    Thanks

    Plugin Support James Osborne

    (@jamesosborne)

    @dssaez Have you tried to disable the EWWW image optimizer plugin you have active? There may be a setting which is impacting the images being served. I can see the images are of the webp format, which is not by default a WordPress image format (without a plugin).

    If you have any other image related plugins active please temporarily disable those also before checking again.

    Thread Starter Daniel

    (@dssaez)

    @jamesosborne you are the best.

    I did not remember that I was working in a multisite so the plugin EWWW was as “Network Enable”, I deactivated and everything works perfect. Actually I have found the rule from EWWW which breaks the behavior of the images:

    On the settings of the EWWW plugin, on the “Webp” tab there is an option which says “JS WebP Rewriting – Use this if the Apache rewrite rules do not work, or if your images are served from a CDN.” So don’t select this option if you work with AMP because is using some javascript to serve the webp images.

    I came back to standard mode and everything ok, I can keep developing the site https://test.simpledevel.com/thebluelaundry/

    Thank youu @jamesosborne , have a nice day

    Plugin Support James Osborne

    (@jamesosborne)

    @dssaez No problem, happy to assist. Nice job with your custom developed theme.

    If you like how the plugin works and how it improves your site performance feel free to leave a review.

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Images are not loading correctly’ is closed to new replies.