Does Zenphoto support lazy loading of images?

Hi,
I'm just wondering if Zenphoto support lazy loading of images.

Comments

  • acrylian Administrator

    No, but it will in the future natively ("next major release"). But you can create a theme to do so already. But you can already setup your theme to use lazy loading by using the get variants of the template functions (or even the core methods from the classes).

  • edited June 16

    that means I have to modify the print function doesn't it? I hate doing that. I basically gets overwritten every time I update. When is the next major release coming? Also, I wonder if you guys plan on updating the search algorithem anytime soon. I kind of want it where for the results, it gets you first where the title has your search term, then tags, then description.

  • acrylian Administrator
    edited June 16

    that means I have to modify the print function doesn't it?

    No, there are always "print" versions with full html setup and there are "get" versions that just get the url of an image (and there is the core object model, too). Use those with an <img> element and you can do almost anything on your theme.

    When is the next major release coming?

    When it is ready. Sorry, can't and won't say any date.

    Also, I wonder if you guys plan on updating the search algorithem anytime soon.

    No, no changes planned.

  • Whats the exact name of the function, looking at the docs, I can't see $getLatestImages

  • acrylian Administrator

    You didn't tell about latest images… Then you will have to do some work. You have to use this to get data of the latest images:
    https://docs.zenphoto.org/function-getImageStatistic.html
    (Full doc of the plugin here: https://docs.zenphoto.org/package-plugins.image.album.statistiscs.html

    Then loop through objects you get and create the custom output you want. Use https://docs.zenphoto.org/function-printImageStatistic.html as the guide. If you need modifications copy the function code to your theme's functions.php and rename it individually.

  • I've been working with printLatestImages and I thought I got it to work but I just made the following changes:

    </p> <p>case 0:<br /> $sizes = getSizeCustomImage(</p> <p>width, NULL, NULL, NULL, NULL, NULL, NULL, $image);<br /> echo '<img class="lazy" src="blank.gif" data-src="' . html_encode($image->getCustomImage($width, NULL, NULL, NULL, NULL, NULL, NULL, TRUE)) . '" width="' . $sizes[0] . '" height="' . $sizes[1] . '" alt="' . html_encode($image->getTitle()) . 'free image"'. " /></a>\n"; //echo '<img class="lazy" src="blank.gif" data-src="' . html_encode(pathurlencode($image->getCustomImage($width, NULL, NULL, NULL, NULL, NULL, NULL, TRUE))) . '" width="' . $sizes[0] . '" height="' . $sizes[1] . '" alt="' . html_encode($image->getTitle()) ."\" /></a>\n"; break; case 1: $sizes = getSizeCustomImage(NULL, $width, $height, $width, $height, NULL, NULL, $image); echo '<img class="lazy" src="blank.gif" data-src="' . html_encode(pathurlencode($image->getCustomImage(NULL, $width, $height, $width, $height, NULL, NULL, TRUE))) . '" width="' . $sizes[0] . '" height="' . $sizes[1] . '" alt="' . html_encode($image->getTitle()) .' free image"'."\" width=\"" . $width . "\" height=\"" . $height . "\" /></a>\n";<br /> break;<br /> case 2:<br /> $sizes = getSizeDefaultThumb($image);<br /> echo '&lt;img class="lazy" src="blank.gif" data-src="' . html_encode(pathurlencode($image->getThumb())) . '" width="' . $sizes[0] . '" height="' . $sizes[1] . '" alt="' . html_encode($image->getTitle()) .' free image"'."\" /></a>\n<br />";<br /> break;</p> <p>

    But the images don't how on goodfreephotos.com

    I also the correct jquery classes loaded its the same as the ones on

    goodfreephotos.com/testdoc.php and that one works, I can't figure out why it doesn't work on my main page.

  • acrylian Administrator

    Sorry, make sure you escape code examples on the forum in ``` correctly. The code example above are unreadable.

    This might give you a hint $('.lazy').lazy is not a function. (In '$('.lazy').lazy()', '$('.lazy').lazy' is undefined)

    You include jquery two times. Zenphoto's (we currently require an older one for some dependencies) and another one so probably you have the conflict here.

  • I think it is the conflict that is causing the issue

    But I need both the google and the cloudfalre for the lazy load to work, what is causing the conflict?

  • I just took the filter "theme-head" out, what does that do?

  • acrylian Administrator
    edited June 19

    Try to use another lazyload script. I preferredly use this and it works with rather "any" jQuery: https://github.com/aFarkas/lazysizes
    This will also be the one that we will include by default in the future.

    The theme_head filter call adds scripts by plugins and a lot more and you NEVER should just remove that. If you need to remove something from the filter, you should unregister a specific attachment using https://docs.zenphoto.org/function-zp_remove_filter.html

Sign In or Register to comment.