Crop/resize thumbs differently depending on field?

I’m making a brochureware site and want the CMS user to just be able to swap out existing images, or add images on a new instance of something (e.g. adding a new ‘employee’ and then uploading a photo for that).

I’d like to use srcset for responsive images, and the uploaded images need to be cropped and scaled to each of their respective sizes.

I’ve been looking at the kirby-responsive-images plugin ( It’s pretty awesome in that it generates all the srcset stuff for your image tag, but it doesn’t crop and it always outputs each image to the same sizes. I’ve looked at extending the plugin so that in the kirbytag I pass in a list of image dimensions, but it’s getting kind of messy.

What might be easier is to just upon uploading a file, generate all the thumbs for the sizes I want for that particular image. Is there a way to make for example a panel.file.upload hook that accepts some parameters based on the field the image is uploaded for?

Then, in my template, I can just write all the srcset tags in “longform”, rather than using a plugin to generate them based on the shorthand.

I guess right now I could just generate ALL image sizes that appear anywhere on my site for each image, and then when I’m making my image tags I’d just pick and choose the sizes I need for that particular one. This seems not ideal though. For example, say image A needs size 100 + 200, but image B needs size 800 + 1600. Even when I upload a photo for image B, I’ll be generating cropped 100 and 200 versions of it even though I’ll never use them.

Let me know if this all makes sense :slight_smile:

Well, all pages are uploaded to a page, not to a field. So if you have several image fields in a single page, this won’t work, because the hook would not know for which field the image is intended. On a per page basis, this would work, though.

Thanks @texnixe!

Even just hooking it to page would be helpful - then I’d just be generating a couple extra images rather than like a dozen.

The examples for creating hooks look like:
kirby()->hook('', function($page) { // your hook code });

How would I scope that hook to a single page?

Also, if you can you think of any better approaches to what I want to achieve that’d be really appreciated also. Thanks for your help.

Er, sorry, meant to paste this example which is what I understand I’ll hook into when uploading a file:

kirby()->hook('panel.file.upload', function($file) {

  if ($file->type() == 'image') {
    $image = new ImageConverter($file, array(
      'width' => 1024,
      'height' => 1024,
      'tosRGB' => true,



First of all, you’d have to use a panel.file.upload hook. You can access the page the file belongs to like this:

kirby()->hook('panel.file.upload', function($file) {
  $page = $file->page();

The you can use some if statements to find out which page it is and which parameters are required for that page.

As regards alternatives, I have to think about it.

Edit: Oh, your last post crossed with mine.

But I wonder if all that makes sense, you might as well resize/crop these image in the srcset tag, no need to resize them in advance?

Ah we got it figured out! thanks again!

After the logic to separate into pages, I’m probably going to try calling something like:

thumb($image, array('width' => 300, 'crop' => true));

from the callback.

Just saw your 2nd message.

Yeah you’re right, maybe I could just call thumb() in the srcset, if I’m writing it by hand anyway.

How does thumb() work at runtime - if the thumb at that size already exists, does it just echo the url for the existing thumb file?

Right, if the thumb exists, it is not created anymore. To make your life easier, you can use the crop() method instead of thumb(), the syntax is much easier to type.