withcandour/statamic-imgix

该包最新版本（0.1.5）没有提供许可证信息。

Statamic Imgix

维护者

详情

github.com/WithCandour/statamic-imgix

源代码

问题

安装: 4,403

依赖项: 0

建议者: 0

安全: 0

星标: 0

关注者: 2

分支: 2

开放问题: 3

0.1.5 2022-06-06 15:36 UTC

Requires

Unknown License bb6af36616f5debc4e45b73d273c06e640a07808

  • Candour

This package is auto-updated.

Last update: 2024-09-06 20:47:37 UTC

README

Statamic 3.0+

使用 Statamic Imgix 插件从您的 Antlers 模板生成 imgix URL。

安装

通过 composer 安装

composer require withcandour/statamic-imgix

然后发布服务提供商的可发布文件

php artisan vendor:publish --provider="WithCandour\StatamicImgix\ServiceProvider"

配置

发布配置后，您将有一个 config/imgix.php 文件。您需要在这里提供您的 imgix 域名。

用法

该插件将为您的 Antlers 模板提供一组 imgix 标签。

标签

此插件将为生成 imgix URL 和使用它们的元素提供一组 imgix 标签。这些标签的最低要求是提供它一个 path 参数，这是资产源的路径或 URL，建议您使用成对资产标签中返回的 {{ path }} 变量。

标签将接受任何 Imgix 操作参数。生成标签（如 {{ imgix:image_tag }} 标签）也将接受所有标准 HTML 属性（例如 'alt'），这些属性将添加到生成的元素/标签中。

Imgix

基础 {{ imgix }} 标签将在 URL 中附加任何 imgix 操作参数以生成简单的 imgix URL。

图像 srcset

与基础标签类似，{{ imgix:image_srcset }} 标签将生成一个包含 srcset（适用于在 `` 元素中使用）的字符串。默认情况下，srcset 将包含 @1x 和 @2x 的图像大小（用于处理视网膜屏幕）。您可以通过在配置文件中设置 `srcset_resolutions` 来覆盖此行为；这将需要一个表示分辨率的数字数组。

例如

return [
    'srcset_resolutions' => [1, 4, 5],
];

图像标签

{{ imgix:image_tag }} 标签将生成一个具有 'src' 属性设置为图像的 `` 元素。也可以将任何 HTML 属性作为参数传递。

响应式图像标签

{{ imgix:responsive_image_tag }} 标签将结合 srcset 和 image_tag 标签的功能，生成一个具有 srcset 属性的 `` 元素。

响应式 picture 标签

此标签与其他标签略有不同，将使用特殊 `sizes` 参数来生成具有多个 `` 块的 `` 元素。这将使您能够针对特定断点以正确显示尺寸的图像。

例如

{{
    imgix:responsive_picture_tag
    :path="path"
    :alt="alt"
    fit="crop"
    crop="faces"
    sizes="768: [1500x960]|560: [920x550]|200: [600x400]"
}}

此标签将生成一个包含源的 picture 标签，以便

  • 在 200-559px 时显示 600x400 的图像
  • 在 560-767px 时显示 920x550 的图像
  • 在 768px+ 时显示 1500x960 的图像

焦点裁剪

此插件支持通过使用 CMS 中的焦点选择器生成的 {{ focus }} 变量来进行焦点裁剪。要在模板中使用焦点裁剪，请在标签中结合 fit="crop"、crop="focalpoint" 和 focus="{focus}"（或 :focus="focus"）。

例如

{{ my_image_field }}
    {{
        imgix:responsive_image_tag
        w="1920"
        h="1080"
        :path="path"
        :alt="alt
        fit="crop"
        crop="focalpoint"
        :focus="focus"
    }}
{{ /my_image_field }}