Replacing all scr with data-url lazyloading in wordpress

Question

Im using a video site with wordpress and My lazyload works in this way

<img class="b-lazy" src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src="images/image.jpg" data-src-small="images/image.jpg" alt="alt text" class="tmb_img"/>

I figuret it out for the wordpress thumbnails But as Im using a video grabber wich grabs the multi thumbnails

the images come from the plguin in this form;

<img id="latest-196" class="img-responsive" alt="alt text" onmouseout="thumbStop('latest-196', 'xxxxxx/wp-content/uploads/multi-thumbs/96/', '3');" onmouseover="thumbStart('latest-196', 15, ''xxxxxx/wp-content/uploads/multi-thumbs/96/');" src="'xxxxxx/wp-content/uploads/multi-thumbs/96/196_3.jpg">

Is there any way to convert the second type with the first one using any function to add lazy loading?

I hope You understand my question Thanks.

score 0 · Accepted Answer · edited May 23 '17 at 12:08

You could use output buffering, like explained here, and then use preg-replace to edit what you need.

So this could be your template for the images:

<div id="images">
    <?php
    // start output buffering
    ob_start();
    // get the images
    $images = get_images_from_video_grabber();
    foreach ($images as $im_tag) {
        echo $im_tag;
    }
    // get the buffer and end output buffering
    $output = ob_get_clean();
    // replace what you need
    $pattern = '~<img (.+)src="(.+)">~';
    $replacement = '<img \\1src="data:image/gif;base64,..." data-src="\\2">';
    $output = preg_replace($pattern, $replacement, $output);
    // echo the buffer
    echo $output;
    ?>
</div>

There are maybe more elegant solutions (using filters and actions), but without knowing which video grabber you're using I cannot check.

Replacing all scr with data-url lazyloading in wordpress

1 Answers1