Lazy loading of images

[twols]

Hello!

Is it posiible to get the link of the image with "$image->width(100)" without resizing the image? On pages with many images loading process can not complete due to server restrictions (exec. time). Or getting the link to placeholder if the specific image is not existent? Creating the images would than happen by executing a command line script.

[clsource]

I think you should create a thumbnail on after saving the image with a hook.

see https://processwire.com/api/hooks/captain-hook/?filter=image

<?php
// hook to this method
protected function ___fileAdded(Pagefile $pagefile);

$this->addHookAfter('InputFieldImage::fileAdded', $this, 'createThumbnail');

// create the thumbnail
public function createThumbnail(HookEvent $event){
  $file = $event->return;
  // new thumb
  $page->image->width(200);	
}

with that you create the thumbnail right away on image uploading.

I think that would work. But haven't tested that code.

[szabesz]

Hi,

You can just use a general image (as a placeholder) from your .../site/templates folder when an image is non-existent. You can check the existence like: if($page->image) {  // an image is present } https://processwire.com/api/fieldtypes/images/

If you do not resize an image, via what sort of link do you want to "link to" a nonexistent resized version of it? Sounds like a contradiction. Am I missing something?

As far as the speed of image resizing is concerned, if you have ImageMagic on the server and you are using the latest 2.8.x or 3.0.x versions ProcessWire, you might be able to solve it by enabling the IMagick module: https://processwire.com/blog/posts/processwire-3.0.10-expands-image-resize-options/

[twols]

Thank you for the answers. I would like to generate the variations asynchronously (either by command line or ajax). The gallery without cached variations would simply output placeholders and then call the server URL to generate the image file (only if the variation doesn't exist).

I think I could check for the file by assembling the filename using the base filename:

Basefile: ...../site/assets/files/1021/26394017252_34b7f61884_k.jpg

Check for: ...../site/assets/files/1021/26394017252_34b7f61884_k[$width].[$height].jpg

If the file is missing only output the placeholder, call some URL for image generation and then load the right image.

[Jozsef]

I join to this question.
On pages with large images or many images to be resized, the page load just take forever the first time (until the images got resized). I came from Drupal where the page still comes up immediately and the image loads later, as soon as it's resized.

It was a bit of a shock in ProcessWire that image resizing holds back the whole page, especially that everything else is so well thought through.

Any simple solutions to overcome this? (Resizing on upload, lazy loading etc).

[AndZyk]

Hello Jozsef,

for the generation of many large image variations, ImageMagick comes in handy. Of course you have to enable it first on your webspace, but most hosters have an manual for the activation, if they support it. Usually I visit the page I added images in to generate the variations. You could probably achieve this also by an hook. But for me it seems more natural to check the changes I made after saving a page.

For the lazy loading of images in the front end, I can highly recommend using the plugin lazysizes. It is easy to setup, supports responsive images, background images and so on. There is also the module Markup SrcSet, which uses lazysizes.

Regards, Andreas

[Cengiz Deniz]

On 7/31/2016 at 10:35 PM, twols said:

Hello!

Is it posiible to get the link of the image with "$image->width(100)" without resizing the image? On pages with many images loading process can not complete due to server restrictions (exec. time). Or getting the link to placeholder if the specific image is not existent? Creating the images would than happen by executing a command line script.

any more idea ?