gentsagency/craft-responsive-images

用于简化响应式图片和可选 imgix 集成的 Twig 辅助工具。

此软件包的官方仓库似乎已消失，因此软件包已被冻结。

维护者

详细信息

github.com/gentsagency/craft-responsive-images

源代码

问题

文档

安装: 741

依赖项: 0

建议者: 0

安全: 0

星级: 2

关注者: 2

分支: 3

公开问题: 8

类型:craft-plugin

0.2.4 2018-08-23 15:43 UTC

Requires

Requires (Dev)

MIT 68807bf93832584893c4b7b83c23567b832303db

cmsCraftcraftcmsResponsive Imagescraft-plugin

This package is not auto-updated.

Last update: 2024-06-28 21:59:43 UTC

README

Craft Responsive Images

Build Status

要求

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

安装

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

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

     cd /path/to/project

  2. 然后让 Composer 加载插件

     composer require gentsagency/craft-responsive-images

  3. 在控制面板中，转到设置 → 插件，并点击“安装”按钮以安装响应式图片。

概述

简而言之：生成不同宽度的多个图片，将它们组合在一个 srcset 属性中，设置一个 sizes 属性，然后由浏览器处理剩余的部分。

它为以下宽度生成图片：256px, 384px, 512px, 768px, 1024px, 1280px, 1536px, 1760px, 2560px。

功能

  • 基本功能与 Craft 的内置图像转换一起工作
  • 支持 imgix
  • 与 Craft AWS S3 集成
  • 支持焦点

Imgix 集成

  • 支持多个 Imgix 源（每个 S3 存储桶一个）
  • 支持安全 URL 签名
  • 支持主图像清除

配置

如果您想利用 imgix，您需要配置一个 AWS S3 资产卷，并为它创建一个 imgix 源。在插件设置中，您可以配置 Imgix 域名、API 密钥（用于清除）和签名令牌（用于安全 URL）。

用法

用于与图像字段一起使用

{% set image = responsiveImage(entry.posterImage.one, { aspectRatio: 21/9 }) %}
<img src="{{ image.src }}" srcset="{{ image.srcset }}" sizes="100vw">

您可以将宽度传递给 {{ img.src(640) }} 以更改将用作回退 src 的大小。如果您想在不向 IE11 及以下版本提供模糊图像的情况下支持它们，这可能很有用。

还有一个用于 HTML 字符串和 Redactor 字段的过滤器

{{ entry.story|responsiveImages({ aspectRatio: 21/9, sizes: '50vw'}) }}