Image specifications in template

Hello @flixwatchsupport

Thank you for the support topic, Although it seems a valid AMP markup, I will recommend using <img> tag instead the AMP plugin will convert it to <amp-img>

To avoid any mistakes I will recommend using wp_get_attachment_image() function which will return HTML.

Hope this helps!

Thanks Milind!

Hi Milind,

As per your suggestion, I am now using –
“width=”320″height=”180″ src=”<?php echo $imgwebp; ?>”>

However, I am getting this decoding=”async” in the image and data-hero attribute is not there. How do I make the image not lazy load?
https://www.flixwatch.co/stagin/movies/creating-an-army-of-the-dead/

Hello @flixwatchsupport

Thanks for getting back, the decoding="async" attribute tell the browser to decode the image asynchronously so it won’t affect other content.

You can use the data-hero and other attributes in an <img> tag like this,

<img title="<?php echo get_the_title(); ?>" width="320" height="180" src="<?php echo $imgwebp; ?>" data-hero="" />

It’s not recommended to lazy load hero image, but you can add loading="lazy" in the image tag to lazy load it.

<img title="<?php echo get_the_title(); ?>" width="320" height="180" src="<?php echo $imgwebp; ?>" loading="lazy" />

Ok. Will check. Thanks

Agreed, using img in your templates is preferred. Eventually amp-img will be deprecated in favor of native img, so when that happens the AMP plugin will stop doing the conversions, although it will ensure the required attributes are present (loading, decoding, width, height, etc).

I recommend adding data-hero-candidate instead of data-hero, since the former allows the plugin to recognize more hero images. The data-hero basically means that you are taking over total control for the hero image identification.

Understood. Thanks Weston.