Idea for Srcset

Kirby 2 Solved ✅
1

I’m looking for a method to render diffrent image sizes for srcsets="". I think kirby’s resize() or the thumb() could be a solution. But this only is useful, if those image sizes would not be rendered on the http-request.
Does anybody know anything about this?

2

Resize() and the thumb() methods are perfect for srcset. The thumbs are generated on first page load, after that the existing thumbs are used.

3

For kirbytext i used this plugin: https://github.com/jancbeck/kirby-responsive-images

Outside of kirbytext i used this code:

    <figure>
      <a href="<?= $flyer->url() ?>" data-caption="<?php echo($month.', '.$year) ?>"
          data-at-450="<?php echo thumb($flyer, array('width' => 450))->url(); ?>"
          data-at-800="<?php echo thumb($flyer, array('width' => 800))->url(); ?>"
          data-at-1366="<?php echo thumb($flyer, array('width' => 1350))->url(); ?>"
          data-at-1920="<?php echo thumb($flyer, array('width' => 1920))->url(); ?>">
              <img src ="<?php echo thumb($flyer, array('width' => 200))->url(); ?>">
      </a>
      <figcaption><?php echo($month.', '.$year) ?></figcaption>
    </figure>

It’s also possible to do the same, but shorter, with the plugin:

<?= kirbytext("(image:flyer/".$image->filename().")") ?>

4

And it would really use less resource this way, than loading the big ones?
I built a slider with 10 images in 1500px width. Ripping them down is needing some time, doesn’t it?

5

Yes, thumbnail generation takes a while (not very long with 10 images that are not very big), but only on first page load, not after that.

There’s also another plugin for images in templates: https://github.com/azharc/kirby-srcset

6

Oh, now I got it: “You meant on the first page load EVER!” The resized images ar physically stored in my project. That’s awesome.