README

此插件为Kirby 3提供，在面板上传图片（JPG和PNG）时自动进行WebP转换。支持字段方法、KirbyTags和多语言网站。

注意：当使用字段方法和KirbyTags时，如果缺少WebP图像，将自动生成。此外，当通过面板删除原始图像时，也将删除WebP图像。

商业用途

此插件是免费的，但如果您将其用于商业项目，请考虑以下操作：

捐款或
请我喝咖啡

要求

PHP 7.3+
Kirby 3

安装

下载

下载并将文件复制到/site/plugins/kirby-webp。

Git子模块

$ git submodule add https://github.com/MRFD/kirby-webp.git site/plugins/kirby-webp

Composer

composer require MRFD/kirby-webp

用法

字段方法

$field->picture()

将字段转换为带有WebP和回退的图片标签。

<?php
if ($image = $page->image('my-image.jpg')) {
    echo $image->picture('some-class', 'Image description');
}
?>

<picture class="some-class">
  <source srcset="/your/path/my-image.webp" type="image/webp" />
  <img src="/your/path/my-image.jpg" alt="Image description" />
</picture>

$field->webp()

将字段转换为WebP图像标签。

<?php
if ($image = $page->image('my-image.jpg')) {
    echo $image->webp('some-class', 'Image description', [300, 800, 1024]);
}
?>

<img
  src="/your/path/my-image.webp"
  srcset="
    /your/path/my-image-300.webp   300w,
    /your/path/my-image-800.webp   800w,
    /your/path/my-image-1024.webp 1024w
  "
  class="some-class"
  alt="Image description"
/>
<!-- Or when the browser does not support WebP: -->
<img
  src="/your/path/my-image.jpg"
  srcset="
    /your/path/my-image-300.jpg   300w,
    /your/path/my-image-800.jpg   800w,
    /your/path/my-image-1024.jpg 1024w
  "
  class="some-class"
  alt="Image description"
/>

所有参数都是可选的。

也可以使用预定义的srcset。对于默认选项，使用：$image->webp('some-class', 'Image description', 'default')。

$field->isSupported()

验证WebP格式是否被访问者的浏览器支持。

<?php
$image = $page->image('my-image.jpg');

if ($image->isSupported()) {
    echo "Browser supports WebP! :)";
} else {
    echo "Browser doesn't support WebP.";
}
?>

$field->backgroundImage()

返回一个可以用于内联CSS的图像url，例如背景图像。根据访问者的浏览器，url提供常规或WebP格式。

<?php if ($image = $page->image('my-image.jpg')) : ?>
    <div style="background-image: url('<?= $image->backgroundImage() ?>')"></div>
<?php endif ?>

<div style="background-image: url('/your/path/my-image.webp')"></div>
<!-- Or when the browser does not support WebP: -->
<div style="background-image: url('/your/path/my-image.jpg')"></div>

KirbyTags

图片标签

创建带有回退的图片标签。

(picture: myawesomepicture.jpg)

(picture: myawesomepicture.jpg class: floated)

(picture: myawesomepicture.jpg alt: This is an awesome picture)

<picture class="some-class">
  <source srcset="/your/path/my-image.webp" type="image/webp" />
  <img src="/your/path/my-image.jpg" alt="Image description" />
</picture>

图像标签

创建带有WebP文件的图像标签。可以是常规图像或WebP格式。

(webp: myawesomepicture.jpg)

(webp: myawesomepicture.jpg class: floated)

(webp: myawesomepicture.jpg alt: This is an awesome picture)

<img
  src="/your/path/my-image.webp"
  class="some-class"
  alt="Image description"
/>
<!-- Or when the browser does not support WebP: -->
<img src="/your/path/my-image.jpg" class="some-class" alt="Image description" />

选项

实时转换

可以在不通过面板上传图像的情况下将图像转换为WebP。将以下选项添加到/site/config/config.php

# site/config/config.php

return [
  'mrfd.webp.autoconvert' => true
];

注意：启用此选项可能会减慢网站速度。因此建议通过面板上传图像！

转换选项

用于配置高级WebP转换设置。例如

# site/config/config.php

return [
  'mrfd.webp.convert.options' => [
        'metadata' => 'all',
        'jpeg' => [
            'converters' => ['cwebp'],
        ],
        'png' => [
            'encoding' => 'auto',
            'near-lossless' => 60,
            'quality' => 85,
        ],
    ],
];

有关所有可能选项的详细信息，请参阅此和此。

免责声明

此插件提供“现状”且无任何保证。请自行承担使用风险，并在生产环境中使用之前自行测试。如果您发现任何问题，请创建新问题。

许可协议

Kirby WebP是开源软件，采用MIT许可证。

致谢

WebP 转换由 @rosell-dk 提供
Kirby 2 WebP @S1SYPHOS

mrfd / kirby-webp

维护者

详细信息