README

此插件将简单的WebP图像转换集成到Silverstripe中。

要求

• SilverStripe 4.x
• rosell-dk/webp-convert ^2.6
• php >= 7.4

安装

通过composer安装。

composer require jbennecker/silverstripe-webp

将插件注册为图像资产的扩展数据

SilverStripe\Assets\Image:
    extensions:
        - jbennecker\Webp\WebpExtension

使用方法

在模板中即时转换图像，例如 Example.ss。

创建响应式 <picture> 元素

您可以使用响应式Webp和回退源创建图片元素

$Image.WebpPicture(string $params, int ...$widths)

例如：

$Image.WebpPicture('class="example" width="100" height="50"', 370, 550, 1200).RAW

别忘了添加 .RAW 以获得未转义HTML。

这将创建以下HTML输出（对于.jpg输入）

<picture>
    <source
        type="image/webp"
        srcset="
            /webp/.../path/image.jpg-370px.webp   370w,
            /webp/.../path/image.jpg-550px.webp   550w,
            /webp/.../path/image.jpg-1200px.webp 1200w
        "
    />
    <source
        type="image/jpeg"
        srcset="
            /.../path/XYZimage__ScaleMaxWidth....jpg  370w,
            /.../path/XZXimage__ScaleMaxWidth....jpg  550w,
            /.../path/ABCimage__ScaleMaxWidth....jpg 1200w
        "
    />
    <img src="/.../path/ABXimage__ScaleMaxWidth....jpg" class="example" width="100" height="50" alt="[$Image.Title]" />
</picture>

回退 <img> 将具有您定义的 ...$widths 的平均宽度。

注意: alt 参数会自动设置，因为不能向 $params 字符串中添加变量。

获取 srcset 字符串或单个WebP链接

您可以使用 $Image.WebpSet(120, 550, 700) 方法获取具有宽度的 srcset 源，并将字符串插入 <img> 标签的 srcset 参数中。

此外，您还可以调用 $Image.Webp 来获取单个转换为Webp的文件链接。

您可以在 WebpExtension.php 文件中找到更多帮助。