0

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!

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.

| improve this answer | |
  • Thanks Aaron. Love love CE image, thank you! I'm a bit confused with the requirements for CE String. The page says it's for EE3, although requirements are EE 2.x I'm assuming String would work for EE 2.x? docs.causingeffect.com/expressionengine/ce-string/… So if I use String, would the template look like this? {exp:ce_img:bulk max_width="780" bucket="site" hide_relative_path="yes" attributes="itemprop='image'"} {exp:ce_str:ing replace='<img|<amp-img'} {content} {/exp:ce_str:ing} {/exp:ce_img:bulk} – ninjaroll Sep 22 '16 at 19:09
0

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}
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.