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

corriepotter created an issue. See original summary.

corriepotter’s picture

Issue summary: View changes
corriepotter’s picture

Issue summary: View changes