Responsive images / image blocks from starter kit

1

I’m getting to grips with Kirby and have re-used some of the starter kit code and pages (mainly the ‘notes’ routines) to develop my own blog-type site on a local machine.

I have a fair amount of web development knowledge, and have used php plenty (but never really got into OOP, classes etc). Rather than modding content files locally and uploading with ftp I’m looking forward to the luxury of using the Panel for a change! :smile:

Anyway, my query - I’ve read the responsive images article, which is good and detailed. How would I use that code/responsive images with image blocks in the panel?

As I mentioned, I’m re-using code from the ‘Mægazine’ starter kit, so the current image block code is all from there.

Many thanks. Loving Kirby BTW !

2

You can overwrite the standard image block snippet, as described in our guide: Customizing core blocks | Kirby CMS, in particular the part about customizing block snippets: Customizing core blocks | Kirby CMS

So copy the original snippet into a new snippet as described, and adapt to add srcset and sizes attributes as required.

And welcome to the forum :wave:

3

Thanks for that.

And how would I upload the various image / alternative files through the Panel - would this be using the Files block?

4

Sorry to bounce this but I just can’t get my head around it… how would I implement this? Contents of the two image.php files (in site/snippets and site/snippets/blocks) are:

(image.php from site/snippets/)

<?php

$attrs = attr([
  'data-lightbox' => $lightbox ?? false,
  'href'          => $href     ?? $src,
]);

?>
<a <?= $attrs ?>>
  <img
    src="<?= esc($src, 'attr') ?>"
    alt="<?= esc($alt, 'attr') ?>"
    style="
      aspect-ratio: <?= $ratio ?? 'auto' ?>;
      object-fit: <?= ($contain ?? false) ? 'contain' : 'cover' ?>
    "
  >
</a>

(image.php in site/snippets/blocks/)

<?php

$src = null;

if ($block->location()->value() === 'web') {
    $alt = $block->alt();
    $src = $block->src();
} else if ($image = $block->image()->toFile()) {
    $alt = $block->alt()->or($image->alt());
    $src = $image->url();
}

?>
<?php if ($src): ?>
<figure>
  <?php snippet('image', [
    'alt'      => $alt,
    'contain'  => $block->crop()->isFalse(),
    'lightbox' => $block->link()->isEmpty(),
    'href'     => $block->link()->or($src),
    'src'      => $src,
    'ratio'    => $block->ratio()->or('auto')
  ]) ?>

  <?php if ($block->caption()->isNotEmpty()): ?>
  <figcaption class="img-caption">
    <?= $block->caption() ?>
  </figcaption>
  <?php endif ?>
</figure>
<?php endif ?>

The code that I’d like to incorporate would be this (from the Responsive images page of the Cookbook):

<?php if ($image = $page->image('flower-power.jpg')): ?>
    <img
        alt="<?= $image->alt() ?>"
        src="<?= $image->resize(300)->url() ?>"
        srcset="<?= $image->srcset([300, 600, 900, 1200, 1800]) ?>"
        sizes="(min-width: 1200px) 25vw,
                (min-width: 900px) 33vw,
                (min-width: 600px) 50vw,
                100vw"
        width="<?= $image->resize(1800)->width() //do I need this line? ?>"
        height="<?= $image->resize(1800)->height() //do I need this line? ?>"
    >
<?php endif ?>

I’ve tried adding the ‘srcset’ and ‘sizes’ lines in various places but I just get errors… :frowning:

Also, I understand that I need to have uploaded different sized images, but how would this happen from the Panel? Presumably Kirby would have to resize and save the different versions of an uploaded file?

Apologies for the long post, and many thanks for any help!

5

What exactly have you tried? After all, you “just” have to add those attributes…

No, you can use Kirby’s thumbs engine for this, as in the example you posted above.