Image specifications in template

Resolved

(@flixwatchsupport)

Hi,

Currently I am using this code for showing images on template. Am I supposed to use amp-img in the template?

<amp-img data-hero alt="<?php echo get_the_title(); echo " "; the_field('copyrightyear'); ?>"
  width="320"
  height="180"
  layout="fixed"
  src="<?php echo $imgwebp; ?>">
  <amp-img alt="<?php echo get_the_title(); echo " "; the_field('copyrightyear'); ?>"
    fallback
    width="320"
    height="180"
    layout="fixed"
    src="<?php echo $img; ?>"></amp-img>
</amp-img>

Viewing 7 replies - 1 through 7 (of 7 total)

Plugin Support Milind More
(@milindmore22)

4 years, 11 months ago

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!

Thread Starter FlixWatch Support
(@flixwatchsupport)

4 years, 11 months ago

Thanks Milind!

Thread Starter FlixWatch Support
(@flixwatchsupport)

4 years, 11 months ago

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/

Plugin Support Milind More
(@milindmore22)

4 years, 11 months ago

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" />

Thread Starter FlixWatch Support
(@flixwatchsupport)

4 years, 11 months ago

Ok. Will check. Thanks

Plugin Author Weston Ruter
(@westonruter)

4 years, 11 months ago

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.

Thread Starter FlixWatch Support
(@flixwatchsupport)

4 years, 11 months ago

Understood. Thanks Weston.

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Image specifications in template’ is closed to new replies.

Tags