Images are not loading correctly

@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.

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.

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.

@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?

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

@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.

@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

@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.