README

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

需求

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

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

安装

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

1. 打开您的终端并进入您的Craft项目

    cd /path/to/project
   

2. 然后告诉Composer加载插件

    composer require vangenplotz/imageshop
   

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

Imageshop概览

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

有一个搜索框，允许用户在图像中进行搜索。当用户滚动列表时，结果会动态加载。

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

配置Imageshop

插件设置

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

选择一种可用的语言。

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

完成更改后保存。

请注意，更改令牌将使之前选定的所有图像不可访问。

字段设置

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

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

使用Imageshop图像字段

当您访问ImageshopImage字段时，您会得到一个ImageShop-models数组。以下是模型上可用的属性和方法

图像转换

当您使用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提供