Thumbnail size in Panel

The CMS Questions
1

It’s really nice to give clients a list of cards with images of their products to manage them in the panel, but of course product images are stored in high res and are only resized when needed in templates, so loading the product list right now takes 80MB :exploding_head:

I tried:

image:
   query: page.images.findBy('template','productimage').resize(300,300)

but it doesn’t work.

The only option i see right now is to hook into page.update and create smaller images manually, but that is not a solution i would prefer.

2

The Panel does actually create thumbs to display the images in lists and cards and uses srcset, so images shouldn’t be loaded in full size?

3

But the largest versions (1408w) are loaded in Chrome when opening the page list with layout: cards and 1280px Browser size and 5 small cards in a row… :persevere:

Bildschirmfoto 2021-07-13 um 12.24.02
Bildschirmfoto 2021-07-13 um 12.24.021970×410 87.7 KB

4

Yes, the srcset/sizes combination doesn’t really care about the card size, see also this issue: Panel loads huge images in cards layout · Issue #2488 · getkirby/kirby · GitHub

5

Thank you, seems like srcset isn’t a good solution for this case since in the panel performance outweighs image quality by far and setting a fixed thumbnail size in the blueprint would be more reasonable.

Do you know where the srcset part is generated in kirby so i could hardcode smaller thumbnail sizes there?

6

The srcset values are set in the ModelWithContent class, in the panelImage() method.

You can therefore overwrite this method in your page models. So you could even set the srcset values per page type, depending on the card size you use for each. Note that you can also set the quality in the srcset options:

7

Running into this issue as well. My media folder is taken over by those 1408x images which are often as heavy and sometimes heavier than the source image.

It doesn’t help that the format doesn’t get forced to JPEG (or even WebP), and so a source PNG image will give you a 1408x PNG “card thumbnail”.