README

使用单个包含标签在Craft模板中渲染图片。传入类、后备选项、转换等，并在您的网站上获得符合Google Page Speed Insights的优化图片。

安装

将包包含到您的项目中

composer require jordanbeattie/craftcms-images

并在CMS中安装插件。

使用方法

在项目中写入<img>标签，而是将变量传递给渲染函数，该函数将为您优化图片。

转换

包含转换是提供图片的最佳方式。您可以将转换句柄传递给包含标签。插件将查找提供的句柄的转换，以及一个带有相同句柄并附加“Mobile”的移动版本。例如：myTransformHandle 和 myTransformHandleMobile。您还可以手动传入转换以避免在CMS中创建它们。下面是示例。如果您没有指定转换图片的格式，并且服务器支持WebP，则图片将以WebP格式返回，以适应最佳网络实践。

属性

通常，当使用第三方包（如MatchHeight）时，您可能需要添加自定义属性。这些可以作为数组传入。

attributes: {
    'data-mh': 'my-image'
}

返回URL

只想为图片返回URL？请使用URL函数代替渲染，只需传入图片、转换和可选的后备图片。下面是示例

示例

完整参数

{{ craft.images.render(block.image, {
    transform: 'blockTransform', 
    fallback: 'https://example.com/fallback-image.png', 
    class: 'w-full h-full hidden md:block', 
    style: 'display:none',
    attributes: {
        'data-mh': 'my-block-image'
    }
}) }}
{{ craft.images.render(block.image, {
    transform: {
        width: 100, 
        height: 100, 
        mode: 'crop'
    }, 
    fallback: 'https://example.com/fallback-image.png', 
    class: 'w-full h-full hidden md:block', 
    style: 'display:none',
    attributes: {
        'data-mh': 'my-block-image'
    }
}) }}

无转换的图片

{{ craft.images.render(block.image) }}

静态图片

{{ craft.images.render({
    fallback: 'https://example.com/fallback-image.png'
) }}

替换现有的img标签

<img alt="" class="block max-w-full p-0 m-0 rounded-lg pointer-events-none select-none" src="{{ tab.image.one().url }}" />

应该替换为

{{ craft.images.render(tab.image, {
    class: "block max-w-full p-0 m-0 rounded-lg pointer-events-none select-none"
) }}

或使用转换

{{ craft.images.render( tab.image, {
    transform: 'tabBlockImage',
    class: "block max-w-full p-0 m-0 rounded-lg pointer-events-none select-none"
} }}

返回URL

{{ craft.images.url(myImageField, {
    transform: {
        height: 100, 
        width: 100
    }
}) }}

联系

Jordan Beattie
jordan@jordanbeattie.com
www.jordanbeattie.com