Problem/Motivation
I have an existing blog site that uses responsive images / media embed in the posts and I am trying to get it to work with amp. I have had success with everything except for the inline images that are placed as inline responsive media embedded entities.
SOURCE
<drupal-media data-align="center" data-entity-type="media" data-entity-uuid="f999c3d2-9b22-4b28-93e5-29b2339fcbf8"></drupal-media>
Instead of rendering the blocks as amp images, it outputs similar to this.
AMP OUTPUT
<div class="align-center media media--type-image media--view-mode-default">
<div data-quickedit-field-id="media/18468/field_media_image/en/default" class="field field--name-field-media-image field--type-image field--label-visually_hidden">
<div class="field__label visually-hidden">Image</div>
<div class="field__item"></div>
</div>
</div>
Normal inline images work just fine that are not placed using entity embed / responsive images. I do not know where to go from here so any insight would be greatly appreciated.
STANDARD OUTPUT
<div data-quickedit-field-id="media/18467/field_media_image/en/default" class="field field--name-field-media-image field--type-image field--label-visually_hidden">
<div class="field__label visually-hidden">Image</div>
<div class="field__item">
<picture>
<source srcset="[[THESITE:3000]]/styles/post_extra_1x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=nS5ybM8l 825w, [[THESITE:3000]]/styles/post_extra_2x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=Pcx9ELW8 1650w" media="all and (min-width: 75em)" type="image/png" sizes="825px">
<source srcset="[[THESITE:3000]]/styles/post_large_1x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=A5NEx92V 658w, [[THESITE:3000]]/styles/post_large_2x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=3HLgjA3T 1316w" media="all and (min-width: 62em) and (max-width: 74.99em)" type="image/png" sizes="658px">
<source srcset="[[THESITE:3000]]/styles/post_medium_1x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=9DgMrvia 478w, [[THESITE:3000]]/styles/post_medium_2x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=E7BbI1un 956w" media="all and (min-width: 48em) and (max-width: 61.99em)" type="image/png" sizes="478px">
<source srcset="[[THESITE:3000]]/styles/post_medium_1x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=9DgMrvia 478w, [[THESITE:3000]]/styles/post_medium_2x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=E7BbI1un 956w" media="all and (min-width: 34em) and (max-width: 47.99em)" type="image/png" sizes="478px">
<img src="[[THESITE:3000]]/styles/post_extra_1x/public/2021-09/333207189-newlyweds-displaying-thumbs-with-wedding-rings-and-smiley-faces.png?itok=nS5ybM8l" alt="newlyweds displaying thumbs with wedding rings and smiley faces" typeof="foaf:Image">
</picture>
</div>
</div>
Steps to reproduce
Proposed resolution
Remaining tasks
User interface changes
API changes
Data model changes
Comments
Comment #2
corriepotter commentedComment #3
corriepotter commented