README

与Imageshop账户集成，并在Craft中使用Imageshop资源

要求

此插件需要Craft CMS 3.0.0-beta.23或更高版本。

要使用此插件，您需要一个Imageshop账户。

安装

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

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

然后让Composer加载插件

 composer require vangenplotz/imageshop

在控制面板中，转到设置→插件，并点击Imageshop的“安装”按钮。

Imageshop概述

字段已制作成模仿正常的Craft资产字段。在左侧，用户可以选择通过可用的类别过滤结果。

有一个搜索框，用户可以在其中搜索图像。结果会在用户滚动列表时动态加载。

用户可以通过拖放来重新排列图像的顺序。

配置Imageshop

插件设置

安装完成后，您需要转到插件设置并提供一个Imageshop令牌。

选择一种可用的语言。

在“界面名称”下按“刷新”按钮以获取提供的令牌的可用界面。选择要作为默认界面使用的界面名称。

完成后保存更改。

请注意，更改令牌将使之前选择的全部图像不可访问。

字段设置

您可以将字段类型添加到独立字段或矩阵块。

选择“添加图像”按钮上的文本以及用户可以选择的最大图像数量。值为0表示用户可以选择无限数量的图像。

使用Imageshop图像字段

当您访问ImageshopImage字段时，您会得到一个ImageShop-model数组。这些是模型上的属性和方法

图像转换

当您使用getUrl或transform方法时，您可以传递一个整数，该整数将用于设置图像宽度，或者一个具有属性的转换对象

宽度
高度
width和height
width和ratio
height和ratio

如果只定义了宽度或高度而没有比例，则图像将保持原始比例。宽度和高度应为整数，比例应为浮点数。

{% set transform1 = {
  width: 100,
  height: 50
} %}

{% set transform2 = {
  width: 100,
  ratio: 4/3
} %}

获取单个图像URL

我们可以使用整数或转换对象使用getUrl方法。请记住，Imageshop字段始终返回一个数组，如果您只想选择一个图像，请使用.one()。

{% set image = entry.imageshopImage.one() %}

{# Get the full original image url #}
{{ image.url }}

{# Get image with width of 600 px #}
{{ image.getUrl(600) }}

{# Get image with height of 600 px #}
{{ image.getUrl({height: 600}) }}

{# Get image with width 600px and height of 400 px #}
{{ image.getUrl({width: 600, height: 400}) }}

{# Get image with width 600px and 16:9 aspect ratio #}
{{ image.getUrl({width: 600, ratio: 16/9}) }}

显示单个图像

在这个例子中，我们为300像素和400像素宽的图像创建转换，保持原始图像宽高比。

我们通过使用src 方法并指定一个宽度来访问URL。我们还可以使用srcset方法以有效的srcset格式获取所有转换。

{% set image = entry.imageshopImage.one().transform([300, 400]) %}

<img src="{{ image.base64pixel }}" srcset="{{ image.srcset }}" width="400" height="{{ ( 400 / image.ratio )|round }}" alt="{{ image.alt }}">

显示多个图像

在这个例子中，我们为每个图像创建两个转换；300px和400px宽。图像保持原始图像宽高比。

{% set images = entry.imageshopImage.transform([300, 400]) %}

{% for image in images %}
  <img src="{{ image.base64pixel }}" srcset="{{ image.srcset }}" width="400" height="{{ ( 400 / image.ratio )|round }}" alt="{{ image.alt }}">
{% endfor %}

如果我们想强制图像上的宽高比，我们可以传递一个可选的默认参数，该参数应用于所有图像的所有转换。

在这种情况下，所有图像都将获得相同的宽屏（16:9）宽高比。

{% set images = entry.imageshopImage.transform([300, 400], {ratio: 16/9}) %}

{% for image in images %}
  <img src="{{ image.base64pixel }}" srcset="{{ image.srcset }}" width="400" height="{{ ( 400 / ( 16 / 9 ) )|round }}" alt="{{ image.alt }}">
{% endfor %}

元素API

您可以在PHP中类似地访问Imageshop字段中的图像

if( $image = $entry->imageshopImage->one() )
{
  $imageUrl = $image->getUrl(['width' => 400, 'ratio' => 16/9]);
  $imageAlt = $image->alt;
}

缓存图像

Imageshop API似乎没有缓存它创建的图像URL，因此这个插件中使用的方法可能会比较慢。因此，我们缓存了Imageshop API的响应一年，以便重复请求更快。

Imageshop 路线图

一些待办事项和潜在功能的想法

允许用户从插件上传图像到Imageshop

这个插件中使用的转换语法和逻辑受到了Fred Carlsen 的 Craft CMS的Imgix插件的启发。

由Vangen & Plotz AS提供

netlab / imageshop

维护者

详细信息