Kirby thumb function combined with php count

The CMS Questions
1

Hi,

I am using the thumb function to provide every 100 Pixel a new image. I am currently using this code:

<img src="<?php echo thumb($image, array('width' => 800, 'height' => 537, 'quality' => 70, 'crop' => true), false) ?>" class="thumbs" alt="<?php echo $project1->title()->html() ?>"
     sizes="(min-width: 64em) 33vw, (min-width: 40em) 50vw, 100vw"
     srcset="
     		 <?php echo thumb($image, array('width' => 100, 'height' => 67, 'quality' => 70, 'crop' => true), false) ?> 100w,
     		 <?php echo thumb($image, array('width' => 200, 'height' => 134, 'quality' => 70, 'crop' => true), false) ?> 200w,
     		 <?php echo thumb($image, array('width' => 300, 'height' => 201, 'quality' => 70, 'crop' => true), false) ?> 300w,
     		 ...
     		 ">

I wanna go up until 1600 - this works well if I type everything, but for some future project I want to find an easier solution. This is with what I came up until now - but it’s not working. Please help - and yes, I am pretty new to PHP :slight_smile:

<img src="<?php echo thumb($image, array('width' => 800, 'height' => 537, 'quality' => 70, 'crop' => true), false) ?>" class="thumbs" alt="<?php echo $project1->title()->html() ?>"
      sizes="(min-width: 64em) 33vw, (min-width: 40em) 50vw, 100vw"
      srcset="
              <?                                      
                $var1 = 1;
                  while ($var1 < 16) {
                     echo thumb($image, array('width' => $var1*100, 'height' => $var1*100/1,489, 'quality' => 70, 'crop' => true), false) $var1*100w ?>,
                      $var1++;
                      }
                   ?>
      		">

Thanks for any help!

2

You can use a foreach loop with a predefined array of sizes (although I wouldn’t recommend generating an image every 100 pixels, that will take a loong time to create if you have many images and won’t really be a performance advantage anyway):

<?php
$sizes = array(100, 200, 400, 600, 800, 1000, 1200, 1400, 1600);

$sources = array();
foreach($sizes as $size) {
  $sources[] = $image->crop($size, null, 70)->url() . ' ' . $size . 'w';
}
?>

<img src="<?php echo $image->crop(800, null, 70)->url() ?>" class="thumbs" alt="<?php echo $project1->title()->html() ?>"
     sizes="(min-width: 64em) 33vw, (min-width: 40em) 50vw, 100vw"
     srcset="<?php echo implode(', ', $sources) ?>">

My code uses the new shorter thumb syntax from the Kirby 2.3 beta. If you need to use this code on a public project before the Kirby 2.3 release, you can substitute the shorter syntax with your code.

3

Just as an addition: The short thumb syntax was introduced in 2.2.3, so no need to wait till the beta comes out.

4

Yes - works great! Thank you!

5

Oh, then the docs aren’t correct.

6

Yeah, definitely, needs to be changed.