Plugin deleted all tags picture

More precisely, I need the correct output of amp-img

Hello @blackstar1991

Thank you for reporting, we have already opened the Github issue for the same, I will recommend subscribing to that GitHub issue to get updates, for time being I will create a mini plugin that might be able to address that issue, I will ping you here once the plugin is ready.

Thanks for answer. I will waiting on a result

Hello @blackstar1991

Can you please try and use this mini plugin, let me know if you face any issues.

Hi, I Add your plugin. I don’t understand why, but img in apm version looks bad. https://joxi.ru/V2V7jqoHBgWoPA In AMP version – https://joxi.ru/xAeoVPWFMzeEjm https://joxi.ru/l2Zqp0oulbZJ1m Also, when I checked my page in Google checker I find invalid HTML code. I’m not for shore that it’s a good idea to add decoding="async" and loading="lazy" for ALL pictures in AMP version. In my variant for example I have picture in first viewport screen. I rather need atribute "loading="eager" . Your solution is more likely to spoil my site page. I hope it will help you.

• This reply was modified 2 years, 9 months ago by Andry.
• This reply was modified 2 years, 9 months ago by Andry.

Hello @blackstar1991

Thank you for getting back

1) The size of image is based on how you set <source> element of <picture>, in case you set smaller images for mobile screens it will appear smaller

2) The code you added in AMP test (Google Checker) is when you are logged in as admin, which has dev mode active. logout and recheck the code.

3) yes, you can add loading and decoding attributes

4) instead of making eager you can use data-hero-candidate to mark it as hero image candidate, you can learn more it here

Hope this is helpful!

1) I don’t understand why your plugin change order of <source> in my simple variant of picture. I expected that for the desktop AMP version I would get the same image source look as usual, and for mobile version it will show me my tiny img <source>… This is confused.
2) Ok, thanks
3) I need to remove this attributes of <picture> if it would be in first viewport screen. Will this feature be implemented in the new version of the plugin? Or attributes loading="lazy" decoding="async" will be assigned to all by default?
4) If I add this data-hero-candidate will it remove loading="lazy" decoding="async" ?
5) I didn’t testing, but want to ask will your plugin work with other img type ? svg/webp/avif in `<picture> <source> ?

• This reply was modified 2 years, 9 months ago by Andry.

@blackstar1991

1) The <source> order won’t matter because the media="" attribute from <pircutre> tag is responsible for using the image for each screen size, we just capture the source and use it into generate srcset="" attribute in <amp-img> tag. So adding properly sized source tag will fix the issue with smaller images.

Here is code that convert source into srcset

2) Yes, you can use native attributes. the amp-img tag are already lazy loaded so you don’t need to add them specifically, you can learn more about it here

3) the amp-img tag don’t need those attributes. data-hero-candidate marks them to be hero image candidate means they will load on priority

4) yes, theoretically it should work with other image types.

@blackstar1991
As we didn’t receive a response I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.

Thanks for answer. Unfortunately your additional plugin didn’t work for me. and I can’t use it for my project, but I hope you will resolve this issue in new version.

• This reply was modified 2 years, 9 months ago by Andry.

@blackstar1991 The GitHub issue proposes that the issue with picture be resolved by just replacing the picture with its child img element, which would then get converted into amp-img. However, I see in your example that there is no fallback img to do this conversion. This is actually required, both as the fallback in case no source matches or in case the browser doesn’t support picture (or in our case, AMP doesn’t support picture).

Assuming that you added the required img to the picture as follows:

<picture class="top_HomeBonus__picture">
	<source media="(max-width: 460px)" srcset="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel-460×400.jpg">
	<source media="(max-width: 768px)" srcset="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel-768×400.jpg">
	<source media="(max-width: 991px)" srcset="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel-991×400.jpg">
	<source media="(max-width: 1210px)" srcset="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel-1210×400.jpg">
	<source media="(max-width: 1600px)" srcset="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel-1600×400.jpg">
	<img src="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel.jpg" width="1920" height="400" alt="Bahsegel">
</picture>

Would the acceptable AMP version then strip out the contained picture to just leave:

<img src="https://anadolupaykasa2.com/wp-content/themes/anadolupaykasa_2021/images/topHome/Bahsegel.jpg" width="1920" height="400" alt="Bahsegel">

Which would get converted to amp-img?

Hi, Weston.

Yes it wold be ok. I can change my default picture to this way (with this ).

<picture class="top_HomeBonus__picture">
                    <source media="(min-width: 1400px)" srcset="images/topHome/Bahsegel.jpg">
                    <source media="(min-width: 1210px)" srcset="images/topHome/Bahsegel-1600x400.jpg">
                    <source media="(min-width: 991px)" srcset="images/topHome/Bahsegel-1210x400.jpg">
                    <source media="(min-width: 768px)" srcset="images/topHome/Bahsegel-991x400.jpg">
                    <source media="(min-width: 450px)" srcset="images/topHome/Bahsegel-768x400.jpg">
                    <img src="images/topHome/Bahsegel-460x400.jpg" width="460" height="500" alt="Bahsegel egir">
                </picture>

But when I use this plugin I got this amp img https://joxi.ru/Rmzy38Mcv6aeXr but I need a simple mobile image like this (img without amp) https://joxi.ru/J2bzjvQiq89KB2 I don’t understand what I’m doing wrong

• This reply was modified 2 years, 9 months ago by Andry.
• This reply was modified 2 years, 9 months ago by Andry.

Hello @blackstar1991

Your lowest srcset is set for 450px while you are check on device with width 432px
<source media="(min-width: 450px)" srcset="images/topHome/Bahsegel-768x400.jpg">

It will be best to add more source tags with smaller size which can be applied on smaller devices

<source media="(min-width: 400px)" srcset="images/topHome/Bahsegel-768x400.jpg">
<source media="(min-width: 300px)" srcset="images/topHome/Bahsegel-768x300.jpg">
<source media="(min-width: 200px)" srcset="images/topHome/Bahsegel-768x200.jpg">

Unlike <picture> tag the <amp-img> tag will not go with fallback sizes for smaller devices.

I’ve just merged the pull request to replace picture tags with the child img tag. In the next few minutes, the 2.2.x production pre-release build will include that change.

@blackstar1991

Please follow the progress of this issue on the github and look out for next release, I’ll mark this as resolved. Feel free to open a new support topic if you require any further assistance.