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)

.