Thumb generation in Kirby 3 w toStructure()

The CMS Questions
1

Hey guys,

I’ve got a structure field set up for image upload blocks and am trying to run the thumb function to generate responsive sizes but am running against a brick wall. I can’t seem to get the thumbs to generate properly and am getting errors in the config panel. Not sure if this has to do with new Kirby 3 setup? My code is as below

<?php $count = 1;
      $f = new NumberFormatter("en", NumberFormatter::SPELLOUT); ?>
<?php foreach ( $page->blocks()->toStructure() as $block ): ?>
  <div class="image-block">

    <?php if ( $img = $block->picture()->toFile() ) : ?>
      <div class="image-wrapper">
        <img class="lazyload"
             data-src="<?= $img->url() ?>"
             data-srcset="<?= $img->resize(600)->url() ?> 600w,
                          <?= $img->resize(900)->url() ?> 900w,
                          <?= $img->resize(1200)->url() ?> 1200w"
             data-sizes="auto"
             alt="<?= $img->filename() ?>" >
      </div>
    <?php endif ?>

      <div class="caption <?php if ( $block->caption()->isEmpty() ) : echo 'right' ; endif ?>">
        <?php if ( $block->caption()->isNotEmpty() ) : ?>
          <figcaption><?= $block->caption() ?></figcaption>
        <?php endif ?>
        <div class="count"><?= $f->format($count) ?> <span class="lowercase">of</span> <?= $f->format( $page->blocks()->toStructure()->count() ) ?></div>
      </div>
      <?php $count++ ?>
      </div>
    <?php endforeach ?>

The blueprint operates as such:

      blocks:
        label: Image blocks
        type: structure
        fields:
          picture:
            label: Select image
            type: files
            multiple: false
          caption:
            label: Caption
            type: text

Any ideas what’s preventing this? I also tried replacing thumb() with the resize() function and although I didn’t get the config page, it still didn’t seem to be generating them properly.

Thanks everyone!

2

What is the error you get?

The code looks alright to me and should work.

What is your develop environment??

3

Maybe it helps you, that

<?= $img->thumb(); ?>
<?= $img->resize(); ?>

doesn’t crate the thumb immediately, it only creates a job. The Thumb is created when the browser requests the url of the thumb. (Took me hours to find this out…)

4

Hey @texnixe,

Thanks for your response. And thanks for weighing in @bornToBoRoot. After some more fiddling and using the resize function rather than the thumb one, it doesn’t seem to be throwing the errors anymore. It’s possible that I had set up thumb presets in the config file but hadn’t properly configured them to Kirby 3 formatting (still in K2 headspace).

Thanks for your help team.

5

I’d still be interested to know what the error message was. $image->thumb() should work as well, instead of $image->resize().

6

Hey @texnixe, I’m confused for that reason. On another project I’ve had similar difficulty with the thumb function.

        <?php $images = $page->aboutGallery()->toFiles();
        foreach($images as $image): ?>
        <div class="img-wrapper">
          <img class="lazyload" src="<?= $image->url() ?>" alt="<?= $image->filename() ?>">
          <img
          	data-sizes="auto"
            data-src="<?= $image->thumb('average')->html() ?>"
          	data-srcset="<?= $image->thumb('small')->html() ?> 600w,
          	             <?= $image->thumb('average')->html() ?> 800w,
          	             <?= $image->thumb('medium')->html() ?> 1000w,
          	             <?= $image->thumb('large')->html() ?> 1200w"
            alt="<?= $image->filename() ?>"
            class="lazyload" />
        </div>
      <?php endforeach ?>
    </div>

With config setup as such

<?php
return [
  'debug'  => true,

  'thumbs' => [
  'driver' => 'im',
  'quality' => '100',
  'presets' => [
    'small' => ['width' => 600],
    'average' => ['width' => 800],
    'medium' => ['width' => 1000],
    'large' => ['width' => 1200]
    ]
  ]
];

This for example is not working for me and providing an error:

Argument 1 passed to Kirby\Cms\File::thumb() must be of the type array or null, string given, called in /Users/isabel/Documents/dev/lagotto/prototypes/1.0/site/templates/home.php on line 90
7

Are you using the latest Kirby 3.0.3 with support for the presets?

<?= $image->thumb(‘small’)->html() ?>

Should be url() here, not html()?