Convert images to webp and resize

Kirby 3 Solved ✅
1

Hey there,

I just upgraded an old site to 3.6.3-beta3 and was attempting to implement the new webp support for a bunch of images.

Here’s how I implemented it:

<picture>
    <source media="(min-width: 1400px)" srcset="<?= $cover->thumb(['width' => 997, 'format' => 'webp'])->url() ?> 1x, <?= $cover->thumb(['width' => 1994, 'format' => 'webp'])->url() ?> 2x" type="image/webp">
    <source media="(min-width: 1400px)" srcset="<?= $cover->thumb(['width' => 997, 'format' => 'jpg'])->url() ?> 1x, <?= $cover->thumb(['width' => 1994, 'format' => 'jpg'])->url() ?> 2x">

    <source media="(min-width: 540px)" srcset="<?= $cover->thumb(['width' => 670, 'format' => 'webp'])->url() ?> 1x, <?= $cover->thumb(['width' => 1340, 'format' => 'webp'])->url() ?> 2x" type="image/webp">
    <source media="(min-width: 540px)" srcset="<?= $cover->thumb(['width' => 670, 'format' => 'jpg'])->url() ?> 1x, <?= $cover->thumb(['width' => 1340, 'format' => 'jpg'])->url() ?> 2x">

    <source srcset="<?= $cover->thumb(['width' => 480, 'format' => 'webp'])->url() ?> 1x, <?= $cover->thumb(['width' => 997, 'format' => 'webp'])->url() ?> 2x" type="image/webp">
    <source srcset="<?= $cover->thumb(['width' => 480, 'format' => 'jpg'])->url() ?> 1x, <?= $cover->thumb(['width' => 997, 'format' => 'jpg'])->url() ?> 2x">

    <img src="<?= $cover->thumb(['width' => 480, 'format' => 'jpg'])->url() ?>" width="1994" height="840" alt="<?= $page->title()->html() ?>" loading="lazy">
</picture>

Which correctly generates the desired markup. However, the images the thumb() function is supposed to generate (resize and convert to webp) are not created. I can actually open the path (looks like http://localhost:8888/media/pages/blog/test/0f314849e6-1632816042/test997x.webp), but the image that is delivered is just the originally uploaded jpg with a webp extension (so it neither resizes nor does it truly create a webp, it just changes the file extension).

I verified that I have GD and imagemagick installed and enabled.

Any ideas why this is happening?

1 Like
2

Which driver is actually used by Kirby (have you set im in config)

Which PHP version with which versions of GD/Imagemagick are you using?

1 Like
3

Well thanks, that was an easy one. I didn’t knew I had to implicit tell Kirby to use imagemagick through the config.

Works perfectly now.

1 Like