Delayed Image Variations

Delays the creation of image variations until their individual URLs are loaded.

Image variations being generated one-by-one:

Background

Normally when you create new image variations in a template file using any of the ProcessWire image resizing methods, all the new variations that are needed on a page will be created from the original Pageimage the next time the page is loaded in a browser. If there are a lot of images on the page then this could take a while, and in some cases the page rendering might exceed your max_execution_time setting for PHP.

So you might like to have image variations be generated individually when they are requested rather than all at once. That way the page will render more quickly and the risk of a timeout is all but eliminated. But there can be problems with some implementations of this approach, such as with the (in)famous TimThumb script:

• It's not ideal to have PHP be involved in serving every image as this is needlessly inefficient compared to serving static assets.
• It's not good to allow arbitrary image sizes to be generated by varying URL parameters because you might want to restrict the maximum resolution an image is available at (e.g. for copyrighted images).
• If images are generated from URL parameters a malicious user could potentially generate thousands of images of slightly different dimensions and fill up all your disk space.

The Delayed Image Variations module avoids these problems - it creates variations when their URLs are loaded but only allows the specific dimensions you have defined in your code. It does this by saving the settings (width, height and ImageSizer options) of every new Pageimage::size() call to a queue. The module intercepts 404s and if the request is to an image variation that doesn't exist yet but is in the queue it generates the variation and returns the image data. This only happens the first time the image is requested - after that the image exists on disk and gets loaded statically without PHP.

Usage

In most cases usage is as simple as installing the module, and you don't need to change anything in your existing code.

However, there might be some cases where you don't want the creation of a particular image variation to be delayed. For example, if you created a variation in your code and then immediately afterwards you wanted to get information about the variation such as dimensions or filesize.

$resized = $page->image->width(600);
echo $resized->height;
echo $resized->filesize;

This wouldn't work because the actual creation of the resized image hasn't happened yet and so that information won't be available. So in these cases you can set a noDelay option to true in your ImageSizer options and Delayed Image Variations will skip over that particular resizing operation.

$resized = $page->image->width(600, ['noDelay' => true]);
echo $resized->height;
echo $resized->filesize;

For advanced cases there is also a hookable method that you can return false for if you don't want a delayed variation for any particular resizing operation. Example:

$wire->addHookAfter('DelayedImageVariations::allowDelayedVariation', function(HookEvent $event) {
    /** @var Pageimage $pageimage */
    $pageimage = $event->arguments(0); // The Pageimage to be resized
    $width = $event->arguments(1); // The width supplied to Pageimage::size()
    $height = $event->arguments(2); // The height supplied to Pageimage::size()
    $options = $event->arguments(3); // The options supplied to Pageimage::size()

    // Don't delay variations if the Pageimage belongs to a page with the product template
    if($pageimage->page->template == 'product') $event->return = false;
});

404 handling

For Delayed Image Variations to work your .htaccess file needs to be configured so that ProcessWire handles 404s. This is the default configuration so for most sites no change will be needed.

# -----------------------------------------------------------------------------------------------
# 2. ErrorDocument settings: Have ProcessWire handle 404s 
#
# For options and optimizations (O) see: 
# https://processwire.com/blog/posts/optimizing-404s-in-processwire/
# -----------------------------------------------------------------------------------------------

ErrorDocument 404 /index.php

ProCache

If you are using ProCache then make sure it is not configured to cache the 404 page or else PHP will not execute on 404s and queued image variations will not be generated.

Generate queued variations

Before launching a new website you might want to pre-generate all needed image variations, so no visitor will have to experience a delay while a variation is generated. To queue up the image variations needed for your site you will need to visit each page of the website one way or another. You could do this manually for a small site but for larger sites you'll probably want to use a site crawler tool such as Xenu's Link Sleuth. This may generate some image variations but it's likely that some other variations (e.g. within srcset attributes) will not be requested and so will remain queued.

To generate all currently queued variations there is a button in the module config:

This will search the /site/assets/files/ directory for queue files and render the variations.