README

为 webfactory GmbH 当前响应式图片需求量身定制的方便的 Symfony 组件，不适用于此范围以外的可重用性。请小心使用。

安装

composer req webfactory/responsive-image-bundle

激活组件，例如在 src/bundles.php 中

<?php
return [
    // ...
    Webfactory\ResponsiveImageBundle\WebfactoryResponsiveImageBundle::class => ['all' => true],
];

如果您打算使用图片的懒加载（这是默认设置），请在您的 /package.json 中需要 "lazysizes": "^5.3"。

Twig 宏

响应式图片

responsiveImg(image, options) 使用

image：一个具有以下键的数组
- url（必填）：图片的 URL
- alt（可选）：图片的替代文本。默认为空字符串。
- title（可选）：图片的标题文本。默认为空字符串。
options：一个具有以下键的数组
- sizes（可选）：一个字符串，用于设置 sizes 属性。默认为 auto，如果禁用懒加载且 sizes 为空，则默认为 100%。
- transformations_to_widths（可选）：一个对象，其键为 thumbor 转换名称，值为图片宽度。设置 srcset 属性，以 thumbor 图片 URL 为源，基于给定的转换。默认为从 imagex_xxxs 到 image_xl 的键，分别对应 160w 到 1600w 的值。
- class（可选）：要添加到图片的 CSS 类。默认为空字符串。
- data_attributes（可选）：一个可迭代对象，其中包含数据属性名称（即 data- 之后的部分）和值作为键值对。默认为空字符串。
- placeholder_filter：一个字符串，包含要添加到占位符图片的 thumbor 转换名称（即 image_lqip），在懒加载图片时添加。应与图片的目标尺寸相匹配。此组件提供了默认转换列表（见下文），可以在应用程序配置（例如 config.yml）中覆盖/扩展。
- lazyload（可选）：使用懒加载。默认为 true。
- lqip（可选）：使用 LQIP 方法（原始概念（2013），当前流行的 LQIP 选项）始终加载低质量占位符图片。默认为 true。

示例

{% import '@WebfactoryResponsiveImage/Macros/responsiveImg.html.twig' as rImg %}

{{ rImg.responsiveImg(
    {
        'url': s3_cachable_url(artist, 'photo'),
        'alt': 'Portrait of ' ~ artistEntity.name
    },
    {
        'sizes': '100vw',
        'transformations_to_widths': {
            'image_xxs': '320w',
            'image_md': '992w'
        },
        'data_attributes': {'credits': '© P. H. O'Tographer'},
    }
) }}

具有艺术指导的响应式图片

macro responsivePicture(formats, options) 使用

formats：对象数组，每个对象描述动机/图片的不同格式变体，以下键
- image_url（必填）：此格式中图片的 URL
- options（可选）：一个数组，包含以下键，参数化此格式变体
  - sizes（可选）：一个字符串，用于设置 sizes 属性。默认为 auto，如果禁用懒加载且 sizes 为空，则默认为 100%。
  - transformations_to_widths（可选）：一个对象，其键为 thumbor 转换名称，值为图片宽度。设置 srcset 属性，以 thumbor 图片 URL 为源，基于给定的转换。默认为从 imagex_xxxs 到 image_xl 的键，分别对应 160w 到 1600w 的值。
  - media_query（可选）：一个字符串，用于设置源元素的媒体查询
options：一个具有以下键的数组
- class：可选类以添加到 img 标签。默认为空类属性，如果没有给出值以保持代码可读性。
- alt（可选）：图片的替代文本。默认为空字符串。
- title（可选）：图片的标题文本。默认为空字符串。
- data_attributes（可选）：一个可迭代对象，其中包含数据属性名称（即 data- 之后的部分）和值作为键值对。
- placeholder_filter：一个字符串，包含要添加到占位符图片的 thumbor 转换名称（即 image_lqip），在懒加载图片时添加。应与图片的目标尺寸相匹配。此组件提供了默认转换列表（见下文），可以在应用程序配置（例如 config.yml）中覆盖/扩展。
- lazyload（可选）：使用懒加载。默认为 true。
- lqip（可选）：使用 LQIP 方法（原始概念（2013），当前流行的 LQIP 选项）始终加载低质量占位符图片。默认为 true。

示例

{% import '@WebfactoryResponsiveImage/Macros/responsiveImg.html.twig' as rImg %}

{{ rImg.responsivePicture(
    [
        {
            'image_url': cachable_s3_url(artistEntity, 'photoInPortraitFormat'),
            'options': {
                'sizes': '100vw',
                'transformations_to_widths': {
                    'image_xxs' : '320w',
                    'image_md' : '992w'
                },
                'media_query': '(min-width: 768px)'
            }
        },
        {
            'image_url': cachable_s3_url(artistEntity, 'photoInSquareFormat'),
            'options': {
                'sizes': '100vw',
                'transformations_to_widths': {
                    'image_xxs' : '320w',
                    'image_md' : '992w'
                },
                'media_query': '(min-width: 640px)'
            }
        }
    ],
    {
        'lazyload': true,
        'class': 'js-object-fit',
        'alt': 'Portrait of ' ~ artistEntity.name,
        'data_attributes': {'credits': '© P. H. O\'Tographer'},
    }
) }}

响应式背景视频

responsiveBackgroundVideo(video, options) 使用

video：一个具有以下键的数组
- url（必填）：图片的 URL
options：一个具有以下键的数组
- transformations（可选）：一个对象，以Thumbor变换名称作为键，MIME-类型作为值。默认为
```
{
  'video_hevc_720p' : 'video/mp4; codecs=hevc',
  'video_webm_720p' : 'video/webm; codecs=vp9',
  'video_mp4_720p': 'video/mp4'
}
```
- class（可选）：要添加到图片的 CSS 类。默认为空字符串。
- data_attributes（可选）：一个可迭代对象，其中包含数据属性名称（即 data- 之后的部分）和值作为键值对。默认为空字符串。

示例

{% import '@WebfactoryResponsiveImage/Macros/responsiveVideo.html.twig' as rVid %}

{{ rVid.responsiveBackgroundVideo(
    {
        'url': s3_cachable_url(entity, 'video')
    },
    {
        'class': 'background-video',
        'data_attributes': {'credits': '© P. H. O\'Tographer'},
    }
) }}

JbPhumborBundle的默认配置

此包通过Resources/config/jb_phumbor-default-config*.yaml文件配置JbPhumborBundle，设置一些默认变换和Thumbor服务器设置。您可以在应用程序配置中覆盖任何jb_phumbor设置。

webfactory / responsive-image-bundle

维护者

详细信息