hashandsalt / kirby3-webp

A WebP helper for Kirby 3

WebP Plugin for Kirby 3

A snippet and Kirby tag for using WebP images in templates and within textareas. Plugin will convert uploaded files to WebP on the server. This requires having the appropriate extensions installed for IM, GD or whatever you are using. Plugin was tested with GD & cwebp

Installation

Manual

To use this plugin, place all the files in site/plugins/kirby3-webp.

Composer

composer require hashandsalt/kirby3-webp

---

Commerical Usage

This plugin is free but if you use it in a commercial project please consider to

• make a donation 🍻 or
• buy a Kirby license using this affiliate link

---

Usage

Using the Kirby Tag

On a basic level, this is enough:

(webp: yourimage.webp)

This will generate a picture tag with images for the default range of sizes: [1920, 1140, 640, 320].

Will also accept width, height, type, class, imgclass, and alt.

The type allows you to set wether the fall back image is a jpg or a png.

Full example:

(webp: yourimage.webp width: 800 height: 600 type: png class: picturetagclass img: imgtagclass alt: my awesome alt text)

Using the snippet

The tag uses a snippet, which you can use in your templates:

snippet('webp', ['sizes' => [1920, 1140, 640, 320], 'src' => 'yourimage.webp', 'type' => 'png', 'class' => 'picturetagclass', 'width' => 800, 'height' => 600])

If you want to modify the output of the snippet, you can copy it from the plugin into the usual snippet folder and it will get over ridden with your customised version. This is useful if you want to use focusCrop plugin rather then the built in resize().

Options

// Tag Options
'hashandsalt.kirby-webp.range' => [1920, 1140, 640, 320], // Default range of image sizes

// Convert Options
'hashandsalt.kirby-webp.template' => 'images', // file blueprint for converted files
'hashandsalt.kirby-webp.meta' => true,  // all|none|exif|icc|xmp

'hashandsalt.kirby-webp.png.encoding' => 'auto', // auto|lossy|lossless
'hashandsalt.kirby-webp.png.quality'  => 85, // 1 - 100

'hashandsalt.kirby-webp.jpeg.encoding' => 'auto', // auto|1 - 100
'hashandsalt.kirby-webp.jpeg.quality'  => 85, // 1 - 100

Roadmap

The following features will be implemented over time:

• Field Method.
• File Method.
• Convert source image to WebP on the server.

kirby3-webp's Issues

Include Composer vendor dependencies in the Github package

Include Composer vendor dependencies in the Github package to prevent running composer install for manual installation

None of the converters in the stack are operational

He there,

After uploading an image i get: None of the converters in the stack are operational
It seems the problem that PHP is compiled with GD lib but the WebP Support is missing.
Is there any way around this? I'm trying to get the plugin to work on a shared host.
So unfortunately i have no control over the gd extensions.

thanks!
w

Missing `alt` attribute

Did you mean $alt on this line?

kirby3-webp/snippets/webp.php

Line 31 in 772b3fd

alt="<?=$source->alt()?>"

You are building $tag->alt, but never use it anywhere, so I'm wondering ..

`Call to a member function resize() on null`

I'm getting following error when using (webp: test.webp)

Call to a member function resize() on null
\site\plugins\kirby3-webp-master\snippets\webp.php:30

Kirby 4.0.0-rc.4
PHP 8.1.23

`toVariants()` missing ?!

Hey there,
the latest release removed sure a hell of methods, leading to the snippet not working anymore - what happened there?

:)

Missing Class "Stack"

Hey there,
I get an error when using your fantastic lib, and it's fixed when I use WebPConvert\Convert\Converters\Stack; in the main index.php

Cheers!
S1SYPHOS

3.8 compatibility

Missing composer.json version

getkirby/kirby#4713

Add AVIF support

Hey there,
I'd like to propose adding AVIF (next-gen stuff, but its future is looking bright) support, since the pipeline / methods you already have would just have to be cloned. I'm planning to integrate it first in the underlying lib by @rosell-dk or to create something similar. For now, would that be something you're willing to add once I figured it out?

Cheers,
S1SYPHOS