1

This is a great post about how to integrate AMP into your Craft CMS website.

What happens though if you have a standard 'img' tag in your existing content block?

I thought it would be neat to be able to set up a custom Craft/Twig AMP filter that automatically converts:

<img src="/img/logo.svg" alt="Logo" width="150" height="100" />

To:

<amp-img src="/img/logo.svg" alt="Logo" width="150" height="100"></amp-img>

By using:

{% block content %} {{ entry.body | amp }} {% endblock %}

Is there something existing that I could modify to achieve this?

Thanks in advance for any pointers!

2

You could use the replace filter, it accepts regex:

https://craftcms.com/docs/templating/filters#replace

| improve this answer | |
  • Thanks for your reply. I actually tried this but my regex was too weak. Any suggestions for my example? – zuccs Jul 24 '16 at 2:17
1

Just building on the answer from @khalwat, if you use the replace filter, your solution might look something like this:

{{ entry.body | amp | replace(/(<img )(.*?)(\\/>)/g, '<amp-img $2></amp-img>') }}

There may be cleaner regex solutions out there, but I think that one will cut the mustard.

| 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.