README

该插件提供了一个在 Silverstripe 模板中创建 HTML <picture> 元素的助手。它默认支持 WebP 源文件。

要求

• SilverStripe 5.x
• rosell-dk/webp-convert ^2.9
• PHP >= 8.1

安装

通过 composer 安装。

composer require jbennecker/silverstripe-webp

将插件注册为 Assets\Image 类的数据扩展

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

用法

jbennecker\Webp\Picture 类提供了一个灵活的 API，用于在模板文件中操作图片。

要访问 API，可以从 WebpExtension 中调用 getPicture() 方法，如下所示

$MyImage.Picture

这将输出一个具有标准配置的 <picture>。

API 方法

该类提供多个方法，可以按任意顺序调用。您可以将方法链起来，因为它们返回 Picture 类的实例。

setWidths(int ...$widths)

该方法将在图片的每个 <source> 标签的 srcset 属性中设置宽度。

示例

$MyImage.Picture.setWidths(150, 230, 550)

默认为 350, 750, 1500。

setSizes(string $sizes)

设置 <source> 标签的 sizes 属性为媒体查询。默认为 100w。

$MyImage.Picture.setWidths(370, 750, 1920).setSizes("(min-width: 280px) 100vw, (min-width: 640px) 50vw")

setFormats(string ...$formats)

控制将存在的 <source> 标签/格式。默认为 webp 和 jpeg。

可用选项

• webp
• jpg/jpeg

例如，禁用 webp 并只获取一个具有 jpg srcset 的 <source>

$MyImage.Picture.setFormats('jpg')

setAlt(string $value)

设置 <img> 标签的 alt 参数。默认为 CMS 中的图片标题。

setCss(string $value)

设置 <img> 标签的 class 参数。

setWidth(int $width)

设置 <img> 标签的 width 属性。默认为图片的原始宽度。

setHeight(int $height)

设置 <img> 标签的 height 属性。默认为图片的原始高度。

setParam(string $param, string $value)

在 <img> 标签上设置名称为 $param 的参数。

$MyImage.Picture.setClass("w-full border shadow-lg").setParam("title", "This is a title")

setLazyLoading($lazy = true)

控制 loading 属性。将其设置为 lazy 或 eager。默认为懒加载。

Webp 方法

如果您只想快速将图片转换为 .webp 并在模板中使用它，可以使用 Webp 方法

<img src="$MyImage.Webp(900)" alt="">