Forums

Lazy load for image block

Permalink
I have lazy load working fine within single pages and with associated images.

But I just can't figure out how to apply lazy load to the default image block, so that when an image is loaded via the block it automatically gets lazy loaded.

I'm assuming it's simply a matter of changing "src" to "data-src" and adding "class="lazy"" to the relevant place within the block's view file...but I can't see an obvious location.

I've attached the view.php of the image block below.

If you have any ideas, that would be most helpful!

<?php defined('C5_EXECUTE') or die("Access Denied.");
$c = Page::getCurrentPage();
if (is_object($f)) {
    if ($maxWidth > 0 || $maxHeight > 0) {
        $im = Core::make('helper/image');
        $thumb = $im->getThumbnail(
            $f,
            $maxWidth,
            $maxHeight
        ); //<-- set these 2 numbers to max width and height of thumbnails
        $tag = new \HtmlObject\Image();
        $tag->src($thumb->src)->width($thumb->width)->height($thumb->height);
    } else {
        $image = Core::make('html/image', array($f));
        $tag = $image->getTag();
Viewing 15 lines of 42 lines. View entire code block.
 
JohntheFish replied on at Permalink Reply
JohntheFish
The core image helper is returning an image object ($tag) that is then manipulated and output without you actually seeing the html.

Ways round it.
1 (cleanest if the object supports it) Use the object's methods and properties to replace the src attribute.

2. (possibly too generic and drastic) Create an override of the image object that does it all globally.

3. Create an override of the image object that adds interfaces to make (1) possible or cleaner.

4. Use ob_start() etc to capture the output, then a regex to change the attribute before outputting the captured output.