Resolve <picture> tags

[petrsvihlik]

It's common that Kentico generates picture tags with several sources. The following syntax (which can be found on the Dancing Goat sample site) is not a valid AMP:

<picture>
    <source media="(max-width: 767px)" srcset="/Kentico10webapp/getattachment/4aeae1fa-1cbe-4d28-9523-fc9b754ed379/teaser.aspx?variant=large"></source>
    <source media="(min-width: 768px) and (max-width: 1111px)" srcset="/Kentico10webapp/getattachment/4aeae1fa-1cbe-4d28-9523-fc9b754ed379/teaser.aspx?variant=small"></source>
    <source media="(min-width: 1112px)" srcset="/Kentico10webapp/getattachment/4aeae1fa-1cbe-4d28-9523-fc9b754ed379/teaser.aspx?variant=medium"></source>
    <amp-img class="article-tile-image" src="/Kentico10webapp/getattachment/4aeae1fa-1cbe-4d28-9523-fc9b754ed379/teaser.aspx" alt="Article Coffee processing techniques"></amp-img>
</picture>

The validator says:

The tag 'picture' is disallowed.

The markup should resolve into one of the defined sources. Ideally, to the one with the lowest resolution.

A new replacement logic will have to be added to [TransformToAmpHtml()](

kentico-amp/Kentico.AcceleratedMobilePages/AmpFilter.cs

Line 51 in 22adb47

private string TransformToAmpHtml(string finalHtml)

.

[ssiddhantsharma]

# The code below supports 1x, 1.5x, and 2x resolution screens:
@petrsvihlik

<picture>
  <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png,
            images/kitten-stretching@1.5x.png 1.5x,  
            images/kitten-stretching@2x.png 2x">
  <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png,
            images/kitten-sitting@1.5x.png 1.5x
            images/kitten-sitting@2x.png 2x">
  <img 
    src="images/kitten-curled.png" 
    srcset="images/kitten-curled@1.5x.png 1.5x,
            images/kitten-curled@2x.png 2x"
    alt="a cute kitten">
</picture>

Moreover you can see this also - https://www.html5rocks.com/en/tutorials/responsive/picture-element/

[petrsvihlik]

Maybe, but it's not valid AMP HTML.