README

Craft CMS 3.x的imgix插件

使用imgix与Craft结合

• 要求
• 安装
• 配置imgix
• 使用imgix
• 懒加载
• 路线图

要求

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

安装

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

1. 打开您的终端并转到您的Craft项目目录

   cd /path/to/project
   

2. 然后告诉Composer加载插件

   composer require superbig/craft3-imgix
   

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

配置imgix

将config.php复制到Craft的config文件夹中，并将其重命名为imgix.php。

然后根据示例将您的资产源句柄映射到imgix域名。

此插件将查找资产图像的源句柄，并确定要使用哪个imgix域名。如果传递了URL字符串，它将使用配置文件中的第一个域名。

<?php
   return [
       // imgix API key
       'apiKey'         => '',

       // Volume handles mapped to imgix domains
       'imgixDomains'   => [],

       // imgix signed URLs token
       'imgixSignedToken' => '',

       // Lazy load attribute prefix
       'lazyLoadPrefix' => '',
   ];

使用imgix

{% set transforms = [
    {
        width: 400,
        height: 300
    },
    {
        width: 940,
        height: 520
    },
    {
        width: 1400,
    },
] %}

{% set defaultOptions = {
    sharp: 10
} %}

{% set firstImage = craft.imgix.transformImage( asset, { width: 400, height: 350 }) %}
{% set secondImage = craft.imgix.transformImage( asset, transforms) %}
{% set thirdImage = craft.imgix.transformImage( asset, { width: 1920, ratio: 16/9}) %}
{% set fourthImage = craft.imgix.transformImage( asset, transforms, defaultOptions) }

{# Image tag #}
{{ firstImage.img() }}

{# Get url for the first image #}
{{ firstImage.getUrl() }}

{# Image tag w/ srcset + tag attributes #}
{{ secondImage.srcset({ width: 700, alt: 'your alt text here' }) }}

{# Image tag w/ srcset + default options for each transform #}
{{ fourthImage.srcset( {} ) }}

{# Image tag w/ lazyload #}
{{ firstImage.img({ lazyLoad: true }) }}

{# Image tag w/ srcset + lazyLoad #}
{{ secondImage.srcset({ lazyLoad: true }) }}

{# See transformed results #}
{{ dump(secondImage.transformed) }}

要使用Element API，可以直接调用服务

<?php

use craft\elements\Entry;
use craft\helpers\UrlHelper;
use superbig\imgix\Imgix;

return [
    'endpoints' => [
        'news.json' => [
            'elementType' => Entry::class,
            'criteria' => ['section' => 'news'],
            'transformer' => function(Entry $entry) {
                $asset = $entry->featuredImage->one();
                $featuredImage = Imgix::$plugin->imgixService->transformImage( $asset, [ 'width' => 400, 'height' => 350 ]);
                
                return [
                    'title' => $entry->title,
                    'url' => $entry->url,
                    'jsonUrl' => UrlHelper::url("news/{$entry->id}.json"),
                    'summary' => $entry->summary,
                    'featuredImage' => $featuredImage,
                ];
            },
        ],
    ]
];

懒加载

为了实现基于javascript的懒加载，将src和srcset替换为data-src和data-srcset，请向transformImage()添加lazyLoad属性。

如果您需要使用除data-之外的任何前缀，您可以在craft/config/imgix.php中设置配置值lazyLoadPrefix。

或者，您可以在图像标签上使用原生的加载属性loading="lazy"，如以下示例所示：{{ image.srcset({ loading: 'lazy' }) }}。

路线图

• 研究改进srcset/API
• 研究内置图像编辑器和焦点
• 改进文档

由Superbig提供