amp-library
amp-library copied to clipboard
Convert picture tag to amp image
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.