README

Kirby CMS插件，将上传到面板的图像转换为WebP和AVIF。

⚠️截至写作时，此项目处于开发的早期阶段，可能存在错误。⚠️

版本：0.2.0-alpha

要求

Kirby CMS ^3.9
Composer（目前如此）
PHP Imagick

安装

composer require smncd/kirby-image-formats

就是这样！

目前仅测试/确认Composer安装方式有效。

使用方法

面板

无需设置，只需像往常一样从Kirby面板上传图像。插件会自动生成新上传的图像的AVIF和WebP版本。

代码片段

插件提供对图片代码片段的访问权限，允许您将其整合到模板中，如下所示（PHP）

<?= snippet('picture', [
    'image' => $image,
    'alt' => 'This is the alt text!',
    'class' => 'banner',
    'attr' => [
      'loading' => 'lazy'
    ]
]) ?>

渲染的HTML输出将是

<picture>
  <source
    srcset="https://:8000/media/pages/page/1a2b3c4d5e-1738447298/file-name.avif"
    type="image/avif"
  >
  <source
    srcset="https://:8000/media/pages/page/1a2b3c4d5e-1738447298/file-name.webp"
    type="image/webp"
  >
  <img
    class="banner"
    src="https://:8000/media/pages/page/1a2b3c4d5e-1738447298/file-name.jpg"
    alt="This is the alt text!"
    loading="lazy"
  >
</picture>

此图片标签包含转换后的AVIF和WebP图像格式，原始图像作为后备。无需修改.htaccess重写，因为如果浏览器不支持AVIF或WebP，将自动回退到原始格式。

此功能也与kirby-twig插件在Twig模板中无缝兼容

{{
  snippet('picture', {
    image: page.image,
    alt: 'This is the alt text!',
    class: 'banner',
    attr: {
      loading: 'lazy'
    }
  })
}}

代码片段配置选项

名称	类型	必需	描述
image	Kirby\Cms\File	是	要查询的图像文件。
alt	字符串	否	方便访问'alt'属性。
class	字符串	否	方便访问'class'属性。
attr	数组（$key => $value）	否	作为键值对的其他HTML属性。

块

要使用默认的image和gallery块中的新picture代码片段，您需要修改它们的代码片段。

您可以编写自定义代码片段，或者将example-snippets/blocks文件夹中的php文件复制到您的项目的./site/snippets/blocks中（因为它们默认不会启用）。

如果您在项目中使用Twig模板，则可以使用Twig代码片段。

待办事项

完全支持AVIF

根据我的了解，截至2023年10月，PHP中AVIF支持普遍存在问题，因为底层库（如Imagick或GD）缺乏支持。

JPG转换为AVIF似乎没有问题，但对于PNG则不然。

目前的解决方案是仅将JPG转换为AVIF，并希望未来PNG也能得到更好的支持。

配置选项

在Kirby config.php文件中提供配置插件的可选配置，例如启用/禁用、生成图像质量等。

总体稳定性

确保插件稳定并且与所有安装方法兼容。

许可和所有权

许可协议为Do No Harm License。

除非适用法律要求或书面同意，否则根据本许可证分发的软件按“现状”分发，不提供任何形式的保证或条件，无论是明示的还是默示的。请参阅许可证了解具体的管理权限和限制。

依赖项

此插件依赖于以下外部包

rosell-dk/webp-convert - MIT

smncd / kirby-image-formats

维护者

详细信息