Changing the <img> tag with CE Image?

Question

So if you may or may not know, Google rolled out Amp'd pages and displaying these websites that are 'Amp ready' higher on the search results. Without getting into the details of Amp, we need to change a few html tags (thanks Google).

The problem we're facing right now is changing <img src=""> tags to <amp-img src="">. We're using WYGWAM and CE-Image and allowing authors to upload images to the main content area. On the template side of things, we're wrapping the main content with ce_img:bulk to resize all images.

Is there a way to change the img tag with amp-img tag?

{exp:ce_img:bulk max_width="780" bucket="site" hide_relative_path="yes" attributes="itemprop='image'"}
   {content}
{/exp:ce_img:bulk}

Amp documentation: https://ampbyexample.com/components/amp-img/

Any help would be great!

Answer 1

CE image does not have the ability to change the name of the image tag. You could, however, simply wrap your final html in a plugin with a replace method. For example, this is how to do that with CE String:

{exp:ce_str:ing replace='<img|<amp-img'}
    <!-- your final html -->
{/exp:ce_str:ing}

---

Disclaimer: I am the author of both the CE Image and CE String add-ons.

Answer 2

I found the answer. For those of you who are curious, I used Low Replace to find <img and replace it with <amp-img Here is what the part of the template looks like:

{exp:ce_img:bulk max_width="780" bucket="site" hide_relative_path="yes" attributes="itemprop='image'"}       
   {exp:low_replace find="<img" replace="<amp-img"}{content}{/exp:low_replace}
{/exp:ce_img:bulk}