README

Craft CMS 的 AWS 图像处理 URL

需求

此插件需要 Craft CMS 3.x | 4.x 和第一方 AWS S3 插件

安装

要安装插件，请按照以下说明操作。

打开您的终端并转到您的 Craft 项目
```
 cd /path/to/project
```

然后告诉 Composer 加载插件

 composer require ianreid/aws-image-handler-urls -w && php craft plugin/install aws-image-handler-urls

设置 AWS 服务器端图像处理

在开始使用此插件之前，请确保您有一个 AWS 账户，并且已设置服务器端图像处理。此插件旨在与 S3 文件系统配合使用，使用第一方 AWS S3 插件。

有关在 AWS 上创建服务器端图像处理设置的说明，请参阅官方 AWS 指南：服务器端图像处理实现指南。对大多数用户来说，最简单的方法是使用提供的 CloudFormation 模板。

概述

此插件添加了一个 Twig 函数，用于创建用于 AWS 服务器端图像处理的基础64编码 URL。它还提供了一个 Twig 函数，可以轻松地基于宽度数组创建 SRCSET 值。

请勿为 AWS 配置问题打开问题。

在 Twig 中的使用

您的图像必须具有有效的 AWS S3 文件系统

函数 imgUrl()

输出一个图像 URL

创建宽度编码 URL 的基本用法。


// Query your asset (this is an example)
{% set photo = craft.assets().id(88).one() %}

// This function will generate a 600px width
{{ imgUrl(photo, 600) }}

使用一些转换的用法

{% set transforms = {
      flop: true,
      tint: {
         "r" : 0,
         "g" : 0,
         "b" : 255
      }
   } 
   %}

{{ imgUrl(photo, 600, transforms) }}

使用内联转换的用法

{{ imgUrl(photo, 600, { flop : true, grayscale : true }) }}

生成的 HTML 结果将类似于以下内容

https://yourdist.cloudfront.net/eyJidWNrZXQiOiJjp7InIiOjAsImciOjAsImIiOjI1NX19fQ

基于高度的调整大小

在某些情况下，根据图像的高度调整大小可能很有帮助，但保持原始比例。为此，您可以传递包含高度和将宽度设置为 0 的调整大小转换。

{{ imgUrl(photo, 0, { resize: { height:300}} ) }}

函数 imgSrcset()

输出 SRCSET 属性的值

用于创建具有以下宽度的 srcset 值：320、480、960、1440、1920。


// Query your asset (this is an example)
{% set photo = craft.assets().id(88).one() %}

// This function will generate a SRCSET string for the provided widths
<img 
   height="{{ photo.height }}"
   width="{{ photo.width }}"
   loading="lazy"
   decoding="async"
   srcset="{{ imgSrcset(photo, [320, 480, 960, 1440, 1920]) }}"
   src="{{ imgUrl(photo, 600)}}"
   sizes="90vw"
>

srcset 属性的 HTML 结果将类似于以下内容

"https://yourdist.cloudfront.net/eyJidWNrZXInIiOjAsImciOjAsImIiOjI1NX19fQ 320w,
https://yourdist.cloudfront.net/eyJidWNrZXQiOilLCJ0aW50Ijp7InIiOjAsImciOjAsImIiOjI1NX19fQ 480w,
https://yourdist.cloudfront.net/eyJidWNrZXQiOilLCJ0aW50Ijp7InIiOjAsImciOjAsImIiOjI1NX19fQ 960w,
https://yourdist.cloudfront.net/eyJidWNrZXQiOilLCJ0aW50Ijp7InIiOjAsImciOjAsImIiOjI1NX19fQ 1440w,
https://yourdist.cloudfront.net/eyJidWNrZXQiOilLCJ0aW50Ijp7InIiOjAsImciOjAsImIiOjI1NX19fQ 1920w"

使用转换的用法

{{ imgSrcset(photo, [320, 480, 960], { flop : true, grayscale : true }) }}

Sharp JS 转换

您可以使用 AWS 服务器端图像处理支持的任何 Sharp JS 转换。

查看转换列表.

注意：您必须将转换作为 TWIG 数组传递。

请求 AWS 图像处理并发限制增加

默认情况下，AWS 仅提供 10 个并发转换的并发限制，这可能不足以满足高流量网站或应用程序的需求。如果您遇到图像不显示、调整大小延迟或一般性能瓶颈等问题，请考虑请求增加并发限制。

评估您的应用程序需求：根据您的流量和图像处理需求确定所需的并发级别。
打开新的 AWS 支持案例：转到 AWS 支持中心并单击“创建案例”。
选择“服务限制增加”：在创建案例时，请选择“服务限制增加”作为请求类型。
填写服务详情：在“案例详情”部分，从服务名称下拉菜单中查找与AWS图像处理程序（例如AWS Lambda或API网关）相关的服务。
提供理由：在您的请求中，指定所需的并发限制（例如，1000）并提供明确的理由，包括支持您请求的使用模式或指标。
提交您的案例：填写联系信息表单，查看您的案例详情，并提交请求。

AWS支持团队将审查您的请求，通常会增加合理的限额。考虑到更高并发限制相关的成本影响，并确保您的架构足够可扩展以处理增加的处理负载，这一点非常重要。

由Ian Reid Langevin提供

ianreid / aws-image-handler-urls

维护者

详细信息