README

Bolt CMS 使用 sizes 和 srcset 的响应式图像扩展

安装

要安装，请在 Bolt 根目录中运行以下命令

composer require ivovalchev/image-extension

用法

默认配置下的简单用法

在任何 Twig 模板中使用扩展

{{ responsive_image(record|image) }}

使用自定义配置设置（可重用）

扩展配置位于 config/extensions/ivovalchev-imageextension.yaml。

自定义配置示例

for_blogpost:
     widths: [ 340, 680, 960, 1260 ]
     heights: [ 300, 600, 840, 1100 ] # Optional. If heights is not set, the height will be relative to the width.
     fit: default # Uses Bolt's `thumbnail` fit options. Pass an array, e.g. [ crop, fit, crop ] to adjust for different widths.
     class: 'blog-image'
     sizes: ["(min-width: 1260px) 1260px", "(min-width: 780px) 680px", "(min-width: 480px) 340px", "100vw"]

然后，在 Twig 中使用自定义配置

{{ responsive_image(myimage, 'for_blogpost') }}

使用配置设置作为参数

{{ responsive_image(myimage, 'default', {'widths': [400, 500, 600, 700] }) }}

或者，使用 Twig 命名参数

{{ responsive_image(myimage, options={'widths': [400, 500, 600, 700]}) }}

注意：在上面的示例中，任何未提供的配置选项将默认为配置名称 'default'。

如何在 Set 字段中使用 responsive_image

如果您收到以下错误信息

Argument 1 passed to IvoValchev\ImageExtension\Twig\ImageExtension::getResponsiveImage() must be an instance of Bolt\Entity\Field\ImageField or null, array given

这可能意味着您正在尝试传递图像值，而不是将图像本身传递给 responsive_image 函数。这种情况通常发生在集合内部。

如果您遇到这种情况，请更新您的 Twig 模板

从使用如下集合

{{ responsive_image(section.photo) }} {# given section is a field of type set #}

到如下

{{ responsive_image(section.value.photo) }} {# note the `.value` #}