Skip to content

Add support for the <picture> element, converting to <amp-img> #1316

@westonruter

Description

@westonruter

The AMP_Img_Sanitizer needs to be extended to add support for the <picture> element. For example, on https://fivethirtyeight.com/features/the-eternal-question-how-much-do-these-apricots-weigh/ there is:

<picture class="featured-picture">
	<source media="(min-width: 768px)" srcset="https://fivethirtyeight.com/wp-content/uploads/2016/07/riddler_4x3_default.gif?strip=info&amp;ssl=1">
	<source srcset="https://fivethirtyeight.com/wp-content/uploads/2016/07/riddler_4x3_default.gif?strip=info&amp;ssl=1">
	<img alt="riddler_4x3_default" src="https://fivethirtyeight.com/wp-content/uploads/2016/07/riddler_4x3_default.gif?strip=info&#038;ssl=1" />
</picture>

I'm not sure in this case why there are multiple source elements that have the same URL. But normally a type would be defined on the source so that the user agent can skip a source that is not supported. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

This should be converted into the appropriate amp-img. Note that amp-img allows for fallbacks to be defined as children. So that is how amp-img can be used to implement multiple sources: https://www.ampproject.org/docs/reference/components/amp-img#example:-specifying-a-fallback-image

The picture element allows for an img to be nested inside of it as a fallback, so it's not critical that the plugin recognize a picture to work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    BlockedEnhancementNew feature or improvement of an existing oneP2Low prioritySanitizersWS:CoreWork stream for Plugin core

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions