Adding data-src and changing src to all Joomla images inside editor

Question

Let's imagine I insert one image inside any article or any custom HTML module on Joomla.

In this case I will have something like this:

<img src="images/logo.png" />

What I want to do is add to every image the "data-source" and change the "src" value.

In this case I want to have these changes inside all images within any Joomla article or custom HTML module. I want this result.

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="images/Joomla_logo.png" /> 

I was thinking a Joomla Core override but no idea how to do that.

I can do this for Joomla Full image articles and some modules but not for images inside the body of the article or custom HTML module.

Any help?

Answer 1

You will need to develop a Joomla plugin to do that for you when the article is being displayed (it's bad idea to edit these tags in the article itself). You should leverage the [onContentPrepare][1] event to modify the image src and data-src tags.