README

一个 SilverStripe 模块，包含模板方法，快速利用 FocusPoint、LazySizes 和 object-fit。

需求

PHP

JS/CSS

安装

composer require evanshunt/lazy-focus-fit

安装此模块后，请确保在前端项目中安装并正确初始化了所有必需的前端需求。

import 'lazysizes';
// The bgSet plugin is required for ResponsiveBgAttributes
import 'lazysizes/plugins/bgset/ls.bgset';

配置值

如果您希望将所有图像都作为 WebP 提供，请在您的 yaml 配置中设置以下内容。

SilverStripe\Assets\Image:
  default_webp: true

使用方法

此模块为 SilverStripe Image 对象添加了 3 个主要方法，允许快速创建响应式图像标记，无论是作为 <img> 或 <picture> 标签或属性，都可以应用于任何元素作为背景图像。

其他方法允许配置图像使用 object-fit，根据特定的宽高比裁剪，或添加额外的 html 属性。

注意：在 Silverstripe 5 中，模板解析似乎发生了变化，在之前不需要将像 770 992px 这样的参数放在引号中，现在似乎需要。

ResponsiveImg()

此方法允许生成具有多个图像尺寸的 <img> 标签。在页面加载时，将加载 32 像宽的图像，并使用 LazySizes 自动大小功能按正确大小懒加载。未来版本可能允许显式定义 sizes 属性或在不使用 LazySizes 的情况下使用浏览器内置的响应式大小。

示例

$Image.ResponsiveImg(classname, 1200, 800, 600)

ResponsivePicture()

此方法生成一个 <picture> 元素，比 ResponsiveImg() 提供更明确的视觉设计。您可以在媒体查询条件下定义图像的显示。在第一个 classname 参数之后，后续参数应采用以下格式

{ImageWidth}-{WidthDescriptor}-{PixelDensityDescriptor} {MinWidth}

宽度和像素密度描述符是可选的，如以下所述： https://mdn.org.cn/en-US/docs/Web/HTML/Element/source#Attributes

MinWidth 应为媒体查询的屏幕宽度，例如 (min-width: xxx)，或者 'default'。从最大宽度开始，逐步向下到默认。

示例

$Image.ResponsivePicture(classname, '770-1x 1440-2x 992px', '496-1x 992-2x default')
$Image.ResponsivePicture(classname, '770-770w 992px', '496-496w default')
$Image.ResponsivePicture(classname, '770 992px', '496 default')

ResponsiveBgAttributes

需要 Lazysizes bgSet 插件

此方法生成 html 属性，而不是整个元素，用于应用背景图像。参数操作方式与 ResponsivePicture() 相同

请注意，此方法生成 class 和 style 属性，因此将这些添加到模板代码中会导致属性重复。

示例

<div $Image.ResponsiveBgAttributes(classname, '770-1x 1440-2x 992px', '496-1x 992-2x default')>
    ...
</div>

辅助方法

AddAttribute()

向由 ResponsivePicture() 生成的 <picture> 元素或由 ResponsiveImg() 生成的 <img> 属性添加额外的属性。必须在生成标记的方法之前调用。

示例

$Image.AddAttribute(aria-hidden, true).ResponsivePicture(classname, '770 992px', '496 default').

AddImgAttribute()

向由 ResponsivePicture() 生成的 <picture> 元素内部的 <img> 元素添加附加属性。必须在生成标记的方法之前调用。

示例

$Image.AddImgAttribute(data-foo, bar).ResponsivePicture(classname, 770 992px, 496 default)

添加宽高比。

裁剪图片到特定比例，以焦点点为中心，用于与 ResponsivePicture() 和 ResponsiveImg() 一起使用。必须在生成标记的方法之前调用。

示例

$Image.AddAspectRatio(6, 9).ResponsivePicture(classname, '770 992px', '496 default')

ObjectFit()

向 ResponsivePicture() 和 ResponsiveImg() 的样式标签添加对象填充样式，并添加必要的 data-attributes 以与 objectFitPolyfill 一起工作。对象位置值来自焦点点。

默认应用 object-fit: cover;，但也可以传递其他值（如 fill, contain, scale-down）作为参数。

示例

$Image.ObjectFit().ResponsivePicture(classname, '770 992px', '496 default')
$Image.ObjectFit(contain).ResponsivePicture(classname, '770 992px', '496 default')

使用WebP()

如果你还没有设置全局配置值以服务 WebP，你可以通过调用此方法为单个图像选择。必须在生成标记的方法之前调用。

示例

$Image.UseWebP.ResponsivePicture(classname, '770 992px', '496 default')

evanshunt / lazy-focus-fit

维护者

详细信息