Jump to content
twols

Lazy loading of images

Recommended Posts

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.

Share this post


Link to post
Share on other sites

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.

  • Like 5

Share this post


Link to post
Share on other sites

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/

  • Like 1

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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).

Share this post


Link to post
Share on other sites

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

  • Like 5

Share this post


Link to post
Share on other sites
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 ?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...