Maintain small image dimensions when displayed

The CMS Questions
1

I have some images (photos taken long ago) that have small dimensions (250px height and width for instance).

When I use the standard image block Kirby sometimes (depending on the target device and orientation etc.) displays the image at several times its original dimension, which makes it horribly pixelated.

I realise that image resizing is a normal part of a responsive framework but is it possible to stop Kirby resizing (enlarging) images with small dimensions?

Or maybe create a non-resizing image block?

Many thanks,
Peter

2

I think really depends what is going on in your front end css. As an initial hunch im guess your css is giving the images 100% width. But without knowing more about your setup, its difficult to say.

But what you could do is is overwrite the default image block php file with the addition of an inline css that sets the max width of the image to the actual image dimensions.

You can see how to override that block here image | Kirby CMS

And you can use the width method to set the inline style:

<img src="<?= $src ?>" alt="<?= $alt->esc() ?>" style="max-width: <?= $src->width() . 'px' ?>">

This will set the image to be 100% width up to the phystical width of the image in question. In otherwords, it will be fuild width up to the width of the image itself, rather then the width of its parent container.

3

That’s great, many thanks. I’ll investigate further.

4

This worked a treat. I already had an overide file (in snippets/blocks). Here is the updated code in the two files for anyone with the same issue. The lines containing the word ‘width’ are the ones added.

/site/snippets/blocks/image.php

<?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,
    'width'	   => $image->width(),
    'ratio'    => $block->ratio()->or('auto')
  ]) ?>

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

and

/site/snippets/image.php

<?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' ?>;
      max-width: <?= $width ?>px;
      object-fit: <?= ($contain ?? false) ? 'contain' : 'cover' ?>
    "
  >
</a>

Many thanks again ! :grinning:

1 Like
5

Glad you got it sorted.