Srcset only largest image generated

Kirby 3 Solved ✅
1

I’m testing for multiple columns in a layout field to generate image srcsets like this:

  if ($layout->columns()->count() > 1) {

    // multiple columns
    $src     = $image->thumb(['width' => '1010']);
    $srcsetOptions = [607, 1010, 1282, 1515];
    $sizes = "(min-width: 1300px) 641px, (min-width: 780px) calc(47.2vw + 37px), calc(50vw - 24px)";
  
  } else {
    // single column
    $src     = $image->thumb(['width' => '1010']);
    $srcsetOptions = [607, 1010, 1515, 1950];
    $sizes = "(min-width: 1300px) 975px, (min-width: 780px) calc(71.8vw + 56px), calc(100vw - 32px)";
  }

When I do a var_dump: <?= var_dump($image->srcset($srcsetOptions) ) ?> I get the expected images. But the output in my image tag just generates the largest image:

 <img class="<?= $image->orientation() ?>"
      src="<?= $src->url() ?>"
      srcset="<?= $image->srcset($srcsetOptions) ?>"
      sizes="<?= $sizes ?>"
      width="<?= $src->width() ?>" height="<?= $src->height() ?>"
      alt="<?= $block->alt()->or($image->alt()) ?>" 
      style="--ar:<?= $ratio !="" ? $ratio : 'auto' ?>;--fit:<?= $ratio !="" ? 'cover' : 'auto' ?>;">

In the media folder there are images for the default size 1010px and the largest images 1950 and 1515px. I’ve emptied the media folder several times.

I must oversee something … but I can’t figure it out.

2

So there seems a difference between Firefox Developer Edition and Chrome. In Chrome inspecting the images the srcset info is there but not when I inspect in FF. When I view the source though the srcset data is in place. So I assume that Kirby only generates files on request and that’s why I don’t see the smaller files in the media folder?

3

Yes, right, Kirby only generates thumbs on the fly, i.e. when needed. Note that a smaller version of a file is not requested if a larger version is already in the browser cache.

4

Ok, thanks for the confirmation.
Nice article btw, I should browse the cookbook more often!