amp-img and picture elements are being removed from blog posts in WP 5.0

  • Hi, in all of my blog posts I have several images set up using <picture> and <amp-img> elements based on the advice of this topic here: https://stackoverflow.com/questions/46902499/how-to-get-css-media-queries-for-images-to-work-on-amp-posts

    Since updating to WordPress 5.0 the other day, I have found that if I ‘update’ my blog post, these elements disappear and it goes back to a regular <img> element.

    This doesn’t work for me, as I need to show/hide certain images in different places for desktop vs mobile (or just show different versions of an image in the same place, mostly for ads with writing on them).

    AMP does not recognize <picture> tags, nor does it recognize the <div> class in my below example. Which is why I need the <amp-img> element to work, and an alternative way to input images for the regular blog post, as the <img> element will just translate into <amp-img> on the amp version, but will still not recognize the <div> class so it will just show up…

    This is an example of an image that is to show for desktop only:

    <div class="hidden-sm hidden-xs">
<picture>
<source srcset="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" media="(min-width: 980px)">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</picture>
</div>
<amp-img class="alignright" media="(min-width: 980px)" src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" width=390 height=325>
</amp-img>

    and this is what it turns into:

    <div class="hidden-sm hidden-xs">
<img src="https://www.smartfertilitychoices.com/wp-content/uploads/2018/02/inositol-and-pcos-3.jpg" class="alignright" alt="Inositol and PCOS" width="390" height="325">
</div>

    So while this still technically works for my regular blog post, it is useless for amp pages.

    I use Sprout theme for this website.

    I am hoping someone has some idea of why this is happening?

    Thanks!

    • This topic was modified 6 years, 3 months ago by kcampbell023. Reason: code didn't show properly as I forgot to put the ` around it
Viewing 2 replies - 1 through 2 (of 2 total)

  • WordPress is likely converting the existing AMP image in your post to an Image block. Image blocks will always render on the front-end of your website using an <img> tag.

    I recommend using the Custom HTML block and manually entering the HTML for your AMP image. The HTML that you type into this block will render on the front-end exactly as is.

    You could also check out the AMP plugin which allows you to add AMP content to your post using the Add block button in the top left of the Block Editor.

    Thread Starter kcampbell023

    (@kcampbell023)

    Hi Robert, for some reason I still can’t see the new Gutenburg editor for any of my posts or pages (newly created or existing). So I can’t give the blocks a go.

    This issue is happening on the classic editor still, somehow.

    My site is updated to 5.0.1, I don’t have Classic Editor plugin installed and I tried activating another theme to see if that would help but it didn’t.

    I’m going to keep looking into how to actually get this editor working on my site and will then give that ‘custom html block’ a go…

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘amp-img and picture elements are being removed from blog posts in WP 5.0’ is closed to new replies.