amp-library icon indicating copy to clipboard operation
amp-library copied to clipboard

Convert picture tag to amp image

Open greg-42droids opened this issue 7 years ago • 0 comments

Hi, I spent a long time trying to figure out how to add an extra 'pass' to the amp library so I can convert <picture> tags to <amp-img> before they are stripped out. Unfortunately, I can't seem to find the right way to do this so I decided to open a ticket and ask for help or at least some advice.

The issue: Drupal Picture module creates similar syntax:

<picture title="" data-picture-mapping="landscape" style="line-height: 1.25em;">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source data-srcset="[image small] 1x" data-aspectratio="960/640" media="(min-width: 1201px)" srcset="[image small] 1x">
<source data-srcset="[image medium] 1x" data-aspectratio="700/467" media="(min-width: 993px)" srcset="[image medium] 1x">
<source data-srcset="[image large] 1x" data-aspectratio="520/347" media="(min-width: 601px)" srcset="[image large] 1x">
<!--[if IE 9]></video><![endif]-->
<img data-picture-mapping="landscape" style="line-height: 1.25em;" class=" processed lazyloaded" src="[image small]" alt="" title="">
</picture>

The above is converted (correctly) to

<picture title="" data-picture-mapping="landscape" style="line-height: 1.25em;">
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source data-srcset="[image small] 1x" data-aspectratio="960/640" media="(min-width: 1201px)" srcset="[image small] 1x">
<source data-srcset="[image medium] 1x" data-aspectratio="700/467" media="(min-width: 993px)" srcset="[image medium] 1x">
<source data-srcset="[image large] 1x" data-aspectratio="520/347" media="(min-width: 601px)" srcset="[image large] 1x">
<!--[if IE 9]></video><![endif]-->
<amp-img src="[image small]" alt="" height="[height]" width="[width]"></amp-img>
</picture>

However, the whole <picture> tag, along with the <source> and the <amp-img> is then stripped out by one of the last 'pass'.

Potential Solution: Ideally, the <amp-img> should be moved out of the <picture> tag, to it's nearest sibling before the unwanted tags are removed.

I would love to have this sorted, so please help or point me to the right direction. Many thanks for any help in advance.

greg-42droids avatar Aug 10 '17 15:08 greg-42droids