[V4] Generate thumbs on image upload

1

Hi,

I have been taking a look at the image upload options that come with V4, it is going to be really useful to scale down images when uploaded (Uploader | Kirby CMS).

I have a standard set of thumbs I generate for images on a site, using this in my config.php file:

'thumbs' => [
      'srcsets' => [
          'default' => [
              '300w'  => ['width' => 300],
              '600w'  => ['width' => 600],
              '900w'  => ['width' => 900],
              '1200w' => ['width' => 1200],
              '1800w' => ['width' => 1800],
              '2300w' => ['width' => 2300],
              '2880w' => ['width' => 2880],
          ],
          'webp' => [
            '300w'  => ['width' => 300, 'format' => 'webp'],
            '600w'  => ['width' => 600, 'format' => 'webp'],
            '900w'  => ['width' => 900, 'format' => 'webp'],
            '1200w' => ['width' => 1200, 'format' => 'webp'],
            '1800w' => ['width' => 1800, 'format' => 'webp'],
            '2300w' => ['width' => 2300, 'format' => 'webp'],
            '2880w' => ['width' => 2880, 'format' => 'webp'],
          ],
      ]
    ],

Is it possible to also run this on image upload as well?

I ask because on a recent site for an artist, when they added loads of hi-res images to a page, the first page load (when thumbs are generated) caused the site to choke. Producing these on upload would be a great option if possible.

2

I haven’t tested k4 yet.
But maybe You could use a hook to trigger the thumb generation after file upload/ replace.
Something I’d do in a k3 plugin (not tested, just to get the idea):


use Kirby\Cms\App;
use Kirby\Cms\Exception;

Kirby::plugin('k-community/auto-thumb-or-whatever', [
	'hooks' => [
		'file.create:after'	=> fn($file) => $file->autoThumb(),
		'file.replace:after' => fn($newFile, $oldFile) => $newFile->autoThumb()
	],
	
	'fileMethods' => [
		'autoThumb' => function() {
			$kirby = App::instance();

			if($this->isResizable()) {
				try {
					
					$kirby->thumb($this->root(), $this->root(), 'myPreset');
					
					// Immediately generate a file in the media folder. 
					$this->publish();
					 
				} catch (Exception $e) {
					throw new Exception($e->getMessage());
				}
			}
		}
	]
]);
3

The create option of the Uploader allows you to reduce the size of the uploaded image, i.e. the image that lands in the corresponding page/site folder. A smaller “original” then also mean less time to create thumbs. However, it doesn’t have functionality to create thumbs on upload.

For that purpose, a hook as mentioned by @Cris is the right way to go.

4

This works for thumbs and will therefore only generate a single thumb with the preset myPreset. If you’re looking for generating thumbnails for all srcsets you might want to do something like this in the mentioned hook:

foreach (['srcset1', 'srcset2'] as $preset) { // or directly get all srcsets from kirby()->option('thumbs.srcsets', [])
  foreach (kirby()->option('thumbs.srcsets.' . $preset, []) as $options) {
    Media::thumb($this->page(), $this->mediaHash(), $this->thumb($options)->filename());
  }
}
1 Like