# Thumb array rule doesn't work

**URL:** <https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056>\
**Category:** Questions\
**Tags:** v3\
**Created:** [August 4, 2021, 9:27am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056 "2021-08-04T09:27:54Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 4, 2021, 9:27am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/1 "2021-08-04T09:27:54Z")

</div>

I want to provide the most optimized image version as possible by default without ignoring older browsers. That’s why I created the following code:

```auto
    <?php if($image = $article->image()): ?>
      <?php echo $image->thumb([
        ['width' => 300, 'height' => 200, 'quality' => 80, 'format' => 'avif'], 
        ['width' => 300, 'height' => 200, 'quality' => 80, 'format' => 'webp'], 
        ['width' => 300, 'height' => 200, 'quality' => 80, 'format' => 'jpg']
        ])->html(); ?>
    <?php endif ?>

```

With this code I just get the original image in full size instead of a thumb.  
If I use this code instead I get a small .webp image, which is also the desired output but then no alternative image format is prepared:

```auto
    <?php if($image = $article->image()): ?>
      <?php echo $image->thumb(['width' => 300, 'height' => 200, 'quality' => 80, 'format' => 'webp'])->html(); ?>
    <?php endif ?>

```

Did I understand something wrong or is the code not correct?  
I am testing the Kirby version 3.6.0 Alpha 3 and I have the following code in my config.php:

```auto
    'thumbs' => [
      'presets' => [
        'default' => [
          ['width' => 1024, 'quality' => 80, 'format' => 'avif'],
          ['width' => 1024, 'quality' => 80, 'format' => 'webp'],
          ['width' => 1024, 'quality' => 80, 'format' => 'jpg']
        ]
      ],
      'srcsets' => [
        'default' => [
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'avif'],
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'webp'],
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'jpg'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'avif'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'webp'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'jpg'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'avif'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'webp'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'jpg'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'avif'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'webp'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'jpg']
        ]
     ]
    ],

```

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 4, 2021, 9:50am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/2 "2021-08-04T09:50:36Z")

</div>

You cannot pass multiple arrays to the thumb method and like that it wouldn’t make sense anyway.

If you want to provide multiple formats for the browser to choose, you need a picture tag with multiple sources

> **[\- HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/de/docs/Web/HTML/Element/picture)**
>
> Das HTML-Element  ist ein Container, der zur Angabe mehrerer (en-US)s (Bildquellen) für ein  dient. Der Browser wird die Quelle verwenden, die aufgrund des gegenwärtigen Seitenlayouts (die Begrenzungen der Box, in der das Bild...

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 4, 2021, 10:35am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/3 "2021-08-04T10:35:29Z")

</div>

Thanks for the quick reply.  
Does that mean that I cannot use the thumb feature of Kirby if I want to provide the best image format automatically but instead using the image function combined with srcset options?

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 4, 2021, 10:38am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/4 "2021-08-04T10:38:55Z")

</div>

> [@Peleke](#):
>
> Does that mean that I cannot use the thumb feature of Kirby if I want to provide the best image format automatically

Yes, you can, but not with a simple image tag and an array of arrays as arguments for the `thumb()` method.

You can either use the picture tag, of determine the right image format via accept headers on the server and then server the right image in an image tag.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 4, 2021, 12:36pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/5 "2021-08-04T12:36:25Z")

</div>

Okay, understood. I thought the thumb helper would do the required steps by its own.  
With this code I also get a bloated png instead of a small webp image:

```auto
    <?php if($image = $article->image()): ?>
      <img src="<?= $image->url() ?>" srcset="<?= $image->srcset(['width' => 300, 'height' => 200, 'quality' => 80, 'format' => 'webp']) ?>" />
    <?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 4, 2021, 1:02pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/6 "2021-08-04T13:02:16Z")

</div>

Why would you expect a webp image here? And I think it doesn’t make sense to have a src image as png and a srcset image as webp.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 6, 2021, 9:18am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/7 "2021-08-06T09:18:59Z")

</div>

Based on the [description of the 3.6.0 Alpha](https://getkirby.com/releases/3.6/features/image-formats) I understood that it is possible to define a set of srcset options in an order that automatically selects the most optimized version based on the browser capabilities:

 ![image](https://europe1.discourse-cdn.com/flex017/uploads/getkirby/original/2X/4/475c2617ce5bdef6886fd112a09b5975191c1b4e.png)  
That is why I have defined the following default settings in the config.php:

```auto
    'thumbs' => [
      'quality' => 90,
      'autoOrient' => true,
      'presets' => [
        'default' => ['width' => 2048, 'quality' => 90],
        'blog' => ['width' => 1000, 'quality' => 85],
      ],
      'srcsets' => [
        'default' => [
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'avif'],
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'webp'],
          '800w' => ['width' => 800, 'quality' => 80, 'format' => 'jpg'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'avif'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'webp'],
          '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'jpg'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'avif'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'webp'],
          '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'jpg'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'avif'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'webp'],
          '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'jpg']
        ]
     ]
    ],

```

Now when I add an image in a template like this:

```auto
<img src="<?= $image->url() ?>" srcset="<?= $image->srcset() ?>" />

```

I would expect that the src is pointing to the original file and the srcset will offer the specified srcset formats from which the browser then can automatically select the best one.  
Doesn’t this also support the automatic generation of other file formats such as avif or webp?

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 6, 2021, 9:40am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/8 "2021-08-06T09:40:04Z")

</div>

I’d say the docs are misleading here.

> [@Peleke](#):
>
> ```auto
> 'default' => [
> '800w' => ['width' => 800, 'quality' => 80, 'format' => 'avif'],
> '800w' => ['width' => 800, 'quality' => 80, 'format' => 'webp'],
> '800w' => ['width' => 800, 'quality' => 80, 'format' => 'jpg'],
> '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'avif'],
> '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'webp'],
> '1024w' => ['width' => 1024, 'quality' => 80, 'format' => 'jpg'],
> '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'avif'],
> '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'webp'],
> '1440w' => ['width' => 1440, 'quality' => 80, 'format' => 'jpg'],
> '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'avif'],
> '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'webp'],
> '2048w' => ['width' => 2048, 'quality' => 80, 'format' => 'jpg']
> ]
> 
> ```

This array doesn’t make sense, anyway, because you cannot use the same key multiple times.

And as I said above, srcset is for different resolutions at different sizes, not for serving multiple image formats.

> **[Responsive images - Learn web development | MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images)**
>
> That's a wrap for responsive images — we hope you enjoyed playing with these new techniques. As a recap, there are two distinct problems we've been discussing here:

---

<div class="post-metadata">

**Author:** ![rasteiner](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/rasteiner/32/4788_2.png) [@rasteiner](https://forum.getkirby.com/u/rasteiner)\
**Post date:** [August 6, 2021, 9:48am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/9 "2021-08-06T09:48:14Z")

</div>

> [@pixelijn](#):
>
> I’d say the docs are misleading here.

I’d say this is a testament to how confusing the specs around `srcset`, `sizes`, `source` (with and without `type`; with and without `srcset`) and `picture` are.

I mean, Bastian isn’t exactly a newbie in regards to web development

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 6, 2021, 9:50am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/10 "2021-08-06T09:50:52Z")

</div>

Your options are therefore:

- Use the picture tag with different `<source>` elements per image format
- Or: Determine the accepted image format and serve this format in your `<img>` tag

---

<div class="post-metadata">

**Author:** ![pixelijn](https://avatars.discourse-cdn.com/v4/letter/p/7ab992/32.png) [@pixelijn](https://forum.getkirby.com/u/pixelijn)\
**Post date:** [August 6, 2021, 9:51am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/11 "2021-08-06T09:51:45Z")

</div>

> [@rasteiner](#):
>
> I mean, Bastian isn’t exactly a newbie in regards to web development

Definitely not. I guess that was just a short form of showing alternatives.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 6, 2021, 10:17am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/12 "2021-08-06T10:17:51Z")

</div>

Thanks a lot for clarification, now I fully understood it (I guess).  
I wish there would be a cookbook recipe for integrating optimized images with all these options available but I will try to combine the mentioned things in a tag and give it a try.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 6, 2021, 7:19pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/13 "2021-08-06T19:19:12Z")

</div>

So I tried to build the picture tag with multiple sources but I get an error 500 in Kirby if I integrate it. What have I missed?

```auto
​<picture>
 <source srcset="<?= $image->thumb(['format' => 'avif'])->url() ?>" type="image/avif">
 <source srcset="<?= $image->thumb(['format' => 'webp'])->url() ?>" type="image/webp">
 <source srcset="<?= $image->thumb(['format' => 'jpg'])->url() ?>" type="image/jpeg">
 <img src="<?= $image->url() ?>" alt="">
</picture>

```

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 7, 2021, 9:07am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/14 "2021-08-07T09:07:05Z")

</div>

A 500 error is a server error that should be unrelated to this code. Please check if you find something in your error logs.

I assume `$image` is correctly defined.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 7, 2021, 10:28am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/15 "2021-08-07T10:28:04Z")

</div>

I have put the picture tag in a snippet that I am referencing from my blog template. In the blog template I have an if statement. Could it be the problem that the variables are not transferred? I wanted to have a snippet that I can use in multiple cases.

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 7, 2021, 11:41am UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/16 "2021-08-07T11:41:18Z")

</div>

> [@Peleke](#):
>
> Could it be the problem that the variables are not transferred? I wanted to have a snippet that I can use in multiple cases.

Probably, that still wouldn’t explain a 500 error. You should get a PHP error message for an undefined variable. Is debugging enabled?

But it helps if you always provide your code in context.

Provided that `$image` is defined, your code will work.

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 7, 2021, 6:55pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/17 "2021-08-07T18:55:32Z")

</div>

I got it working now for the cover image with the following code 🙂 :

```auto
<?php if ($image = $article->cover()->toFile()): ?>
                    ​<picture>
                        <source srcset="<?= $image->thumb(['width' => 1000, 'quality' => 80, 'format' => 'avif'])->url() ?>" type="image/avif">
                        <source srcset="<?= $image->thumb(['width' => 1000, 'quality' => 80, 'format' => 'webp'])->url() ?>" type="image/webp">
                        <source srcset="<?= $image->thumb(['width' => 1000, 'quality' => 85, 'format' => 'jpg'])->url() ?>" type="image/jpeg">
                        <img src="<?= $image->url() ?>" alt="">
                    </picture>
                <?php else: ?>
                <?php if ($image = $article->image()): ?>
                <?php echo $image->thumb('blog')->html(); ?>
                <?php endif ?><?php endif ?>

```

Two questions left:

1. How can I additionally provide multiple sizes as described [here](https://getkirby.com/docs/reference/objects/cms/file/srcset) to load only the minimum required version?
2. How can I make this work as a snippet? When I had exactly the same code in a snippet that I embedded after the first if statement I got the described error 500 (debugging turned on via ‘debug’ =\> true in the config.php but without effect).

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 7, 2021, 7:11pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/18 "2021-08-07T19:11:35Z")

</div>

> [@Peleke](#):
>
> How can I additionally provide multiple sizes as described [here](https://getkirby.com/docs/reference/objects/cms/file/srcset) to load only the minimum required version?

The `source` tags srcset attribute also allows you to pass different sizes: [\<picture\>: The Picture element - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture#the_srcset_attribute)

> [@Peleke](#):
>
> How can I make this work as a snippet?

You would have to pass the `$image` variable to the snippet, see snippet docs: [Snippets | Kirby CMS](https://getkirby.com/docs/guide/templates/snippets#passing-variables-to-snippets)

> [@Peleke](#):
>
> ```auto
> <?php else: ?>
> <?php if ($image = $article->image()): ?>
> <?php echo $image->thumb('blog')->html(); ?>
> <?php endif ?><?php endif ?>
> 
> ```

This part can be simplifield with `elseif`

```auto

<?php elseif ($image = $article->image()): ?>
  <?php echo $image->thumb('blog')->html(); ?>
<?php endif ?>

```

---

<div class="post-metadata">

**Author:** ![Peleke](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/peleke/32/4935_2.png) [@Peleke](https://forum.getkirby.com/u/Peleke)\
**Post date:** [August 7, 2021, 8:19pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/19 "2021-08-07T20:19:22Z")

</div>

Thanks a lot for the really helpful support!  
I saw that it should be possible to define multiple sizes in the srcset field of the picture tag but I thought I need to pass that information also to Kirby and the used thumb method doesn’t allow an array of multiple widths. If I do it like this it is always selecting the highest available width even if the available space for that image on my display is much smaller:

`<source srcset="<?= $image->thumb(['width' => 500, 'quality' => 80, 'format' => 'avif'])->url() ?> 500w, <?= $image->thumb(['width' => 1000, 'quality' => 80, 'format' => 'avif'])->url() ?> 1000w" type="image/avif">`

---

<div class="post-metadata">

**Author:** ![texnixe](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.getkirby.com/texnixe/32/5754_2.png) [@texnixe](https://forum.getkirby.com/u/texnixe)\
**Post date:** [August 7, 2021, 9:35pm UTC](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056/20 "2021-08-07T21:35:06Z")

</div>

Hm, maybe srcset in the source tag allows only 1x, 2x values after all. If that is the case, you would have to provide a source tag for each size and each format

Like in this snippet: [kirby3-webp/webp.php at master · HashandSalt/kirby3-webp · GitHub](https://github.com/HashandSalt/kirby3-webp/blob/master/snippets/webp.php)

[Next page](https://forum.getkirby.com/t/thumb-array-rule-doesnt-work/23056.md?page=2)