Generate all thumbs at once

Kirby 2 Solved ✅
1

I’m using srcset/sizes to serve responsive images and all my thumbs are generating correctly.
However currently they are only created when viewing the page at certain sizes (as per my srcset/sizes setup) as intended by Kirby.

This is great but I’m working on getting a CDN setup and I’d like to deploy all thumbs manually (rather than use a pull zone CDN), but the only way to do that is if I visit all pages at all the various viewport sizes to force them to generate before deploying.

Is there a way to generate all thumbs at once?
I saw the Kirby CLI has a command to clear all thumbs, is there a way to extend it to generate all thumbs I wonder?

Any insight on this?

2

That’s difficult as the thumb generation happens in your templates, not in a central code location that can “just be run” by the CLI.

Do you use any Kirby plugin to generate the responsive images? Normally Kirby will generate all thumbs for a page, not just those that are actually displayed in the current request. Simple reason: Kirby doesn’t know which one will actually be loaded by the browser.
There are plugins however that generate the images on the fly when they are requested. These are even harder to convert to code that can be run only once, e.g. from a CLI.

Also, what is the reason why you don’t want to use a pull zone CDN? They are generally much easier for exactly that reason and aren’t as much work to set up.

3

Not shure if this solution works for you, since you’ve mentioned the CLI, but the panel has several hooks available, for example panel.file.upload, which triggers when you upload a file through the panel. I’m using the following code in my config.php to generate and rename several thumbnails for each uploaded image. I haven’t tested this on 2.3.0 though, so you may need to adapt it slightly for that version if you’re interested.

kirby()->hook('panel.file.upload', function($file) {
    $imageconvert1 = new thumb($file, array('width' => 320, 'height' => 320, 'filename' => '{safeName}-320.{extension}'));
    $imageconvert2 = new thumb($file, array('width' => 640, 'height' => 640, 'filename' => '{safeName}-640.{extension}'));
    $imageconvert3 = new thumb($file, array('width' => 800, 'height' => 800, 'filename' => '{safeName}-800.{extension}'));
    $imageconvert4 = new thumb($file, array('width' => 1024, 'height' => 1024, 'filename' => '{safeName}-1024.{extension}'));
    $imageconvert5 = new thumb($file, array('width' => 1600, 'height' => 1600, 'filename' => '{safeName}-1600.{extension}'));
    $imageconvert6 = new thumb($file, array('width' => 1920, 'height' => 1920, 'filename' => '{safeName}-1920.{extension}'));
    $imageconvert7 = new thumb($file, array('width' => 2048, 'height' => 2048, 'filename' => '{safeName}-2048.{extension}'));
});
4

Since the script by @Swissendo only works on file upload, you could just write a script that iterates through all images of all pages recursively and generates thumbnails of all the sizes you may possibly need.

5

@lukasbestle I was quick in my testing and missed that all thumbs were being generated (regardless of viewport) so it’s not nearly as much work as I expected. I decided to go with a pull zone CDN anyway so it’s no longer an issue but it’s good to know for some other upcoming side projects. Thanks!

@Swissendo @texnixe thanks!