README

描述

本包为 Neos CMS 提供了一个融合对象，用于根据 SQIP 技术渲染 SVG 图像占位符。在真实图像仍在懒加载时，它们可以显示图像的模糊或抽象版本。

您可以在以下链接查看其实际效果：这里。

有关 SQIP 是如何生成基于 SVG 的图像占位符的方法的更多信息，请参阅此处

此包使用的原始 node.js 版本 sqip。
支持的 go 变体 sqip，也通过配置支持。

注意：基于 node.js 的 sqip 在版本 1 中尚未发布。因此，当您使用全局二进制文件时，可能会发生破坏性更改，您可能需要调整设置中的参数或等待此包的更新。

安装

默认情况下，需要 npm (node.js) 才能正常工作，尽管也可以不使用它手动安装二进制文件。

composer require shel/neos-sqip

请确保已全局安装图像处理库 sqip。

或者，您可以使用 npm 安装它们

全局

npm install -g sqip

本地

npm install --prefix Packages/Plugins/Shel.Neos.Sqip/Resources/Private/Library

如何使用

使用提供的融合对象 Shel.Neos.Sqip:ImageTag 来渲染带有占位符的图像，并使用懒加载图像加载器 layzr 来懒加载真实图像。此对象已提供必要的属性，以便 layzr 可以直接工作。

您还可以使用提供的 Shel.Neos.Sqip:SqipImage 融合对象来仅渲染 SVG 数据，您可以将这些数据放入 img 标签的 src 属性中，或作为内联样式中的背景图像。

Shel.Neos.Sqip:SqipCaseRenderer 融合对象提供了一个用于您的 src 属性的渲染器，该渲染器会检查用户是否在后台，然后决定渲染原始图像 URI 而不是 SQIP 图像。

例如，您可以使用此功能来修改 Carbon.Image:Tag 对象，如下所示

prototype(Carbon.Image:Tag) {
    attributes {
        src >
        src = Shel.Neos.Sqip:SqipCaseRenderer {
            asset = ${asset}
        }
        srcset >
        data-normal = Carbon.Image:ImageUri
        data-srcset = Carbon.Image:Srcset
    }
}

兼容的图像格式

本包已与 pngs、jpegs 和 svgs 进行过测试。可能其他格式也运行良好。

性能

处理 SQIP 占位符相当慢，每个图像需要几秒钟。

为了加快速度，首先会生成一个缩略图（也可以通过 CLI 命令预渲染）以减少图像尺寸。默认情况下，将使用媒体浏览器的预设，其尺寸为 250x250。因此，这也稍微快一些，因为媒体模块会重用相同的缩略图。

您可以通过配置更改预设。

配置

默认选项

Shel:
  Neos:
    Sqip:
      useGlobalBinary: false # use globally installed binaries
      globalBinaryPath: ''
      library: 'sqip'
      binaryPath: '.bin/sqip'
      arguments: "${'node ' + binaryPath + ' -n ' + numberOfPrimitives + ' -m ' + mode + ' -b ' + blur + ' ' + file}"
      parameters:
        # Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
        numberOfPrimitives: 8
        # Specify the type of primitive shapes that will be used to generate the image
        # 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon
        mode: 0
        # Set the gaussian blur
        blur: 12
      thumbnailPreset: 'Neos.Media.Browser:Thumbnail'

使用 go 变体

go 版本比 node.js 版本更快，依赖项更少，但当前不提供模糊参数。两个二进制文件具有相同的 CLI 输出，因此可以正常工作。

按照他们的说明安装 sqip 二进制文件。

在您的包中覆盖包设置，如下所示

 Shel:
   Neos:
     Sqip:
       useGlobalBinary: true
       globalBinaryPath: '/path/to/your/go/bin/' # Adapt this to your system
       arguments: "${binaryPath + ' -n ' + numberOfPrimitives + ' -mode ' + mode + ' ' + file}"
       parameters:
         # Customize the number of primitive SVG shapes (default=8) to influence bytesize or level of detail
         numberOfPrimitives: 8
         # Specify the type of primitive shapes that will be used to generate the image
         # 0=combo, 1=triangle, 2=rect, 3=ellipse, 4=circle, 5=rotatedrect, 6=beziers, 7=rotatedellipse, 8=polygon
         mode: 0

缓存

生成的 SVG 将作为字符串缓存在文件系统中。

为了加快缓存速度，您可以在您的 Caches.yaml 中切换到使用 Redis，如下所示

ShelNeosSqip_ImageCache:
  backend: Neos\Cache\Backend\RedisBackend
  backendOptions:
    database: 0

您可以将缓存设置为持久化，以在临时缓存被清空时保留缓存图像

ShelNeosSqip_ImageCache:
  persistent: true

shel / neos-sqip

维护者

详细信息

README

描述

安装

全局

本地

如何使用

兼容的图像格式

性能

配置

默认选项

使用 go 变体

缓存