Advice on setting global img classes

Question

I have many images on site and can't edit them individually so I want to edit them on a global scale so that they all benefit from this code https://github.com/aFarkas/lazysizes

I have viewed this video but his demonstration is on a per image basis from what I can tell https://www.youtube.com/watch?v=Uwnmn65cMec

Am I correct in assuming the src for that plugin goes in the footer.php like this:

<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></noscript>

and then it is a case of adding some code somewhere else to edit/add a class to every image and edit the src of every image so that it says data-src?

I am far from a coder, and not sure how to put that together. I saw this for inputting the image class but it's to make images responsive and doesn't tell me how to edit the src as well.

function add_responsive_class($content){

        $content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
        $document = new DOMDocument();
        libxml_use_internal_errors(true);
        $document->loadHTML(utf8_decode($content));

        $imgs = $document->getElementsByTagName('img');
        foreach ($imgs as $img) {           
           $img->setAttribute('class','img-responsive');
        }

        $html = $document->saveHTML();
        return $html;   
}

Where I found that code: How to add automatic class in image for wordpress post

Thanks

Duuuude, 3 times you asked this and you keep deleting it!! I previously told you what you need to do, Duplicate of: https://stackoverflow.com/questions/20473004/how-to-add-automatic-class-in-image-for-wordpress-post — Lawrence Cherone, Jan 19 '18 at 09:57
Possible duplicate of [How to add automatic class in image for wordpress post](https://stackoverflow.com/questions/20473004/how-to-add-automatic-class-in-image-for-wordpress-post) — Samvel Aleqsanyan, Jan 19 '18 at 09:58

score 1 · Accepted Answer · answered Jan 19 '18 at 09:58

You are on the right path, you have included the script with this:

<script src="https://unpkg.com/lazysizes@4.0.1/lazysizes.js"></noscript>

Now if you look at the github link you have provided you will see the next step.

Add the class "lazyload" to your images/iframes in conjunction with a data-src and/or data-srcset attribute. Optionally you can also add a src attribute with a low quality image...

Instead of writing a new javascript that does it dynamically you should right a small script or just use find and replace to add the class to all of your image elemetns and change the src attribute to data-src.

So would fine and replace do something like that? I used it before to change text in posts once but I didn't realize you could also change code with it — camputer, Jan 19 '18 at 10:13

Advice on setting global img classes

1 Answers1