README

此扩展提供了 ResponsiveImageViewHelper 和 SrcSetViewHelper，以基于 srcset 方法提供响应式图片。它支持裁剪变体，也可以定义自己的比例。

虽然 srcset 在大多数当前浏览器中得到支持，但对于背景图片，可以使用类似的带有自定义 data-bgset 属性的方法。

兼容性和维护

此软件包目前维护以下版本

在 Fluid 中的使用

此示例显示了桌面和移动版本中页面上添加的标题图片的设置。

将 {namespace viresp=Visol\Viresponsiveimages\ViewHelpers} 添加到您的 Fluid 模板中

<f:if condition="{page.files}">
    <f:if condition="{page.files.0.properties.crop}">
        <f:then>
            <div class="img-desktop hidden-xs">
            <viresp:responsiveImage
                    cropVariant="headerImageDesktop"
                    treatIdAsReference="true"
                    src="{page.files.0.uid}"
                    class="img-cropped"
                    alt="{page.files.0.properties.alternative}"
                    additionalAttributes="{data-sizes: 'auto'}"
            />
            </div>
        </f:then>
        <f:else>
            <div class="img-desktop hidden-xs">
                <f:comment>
                    no image cropping has been seleted in the editor:
                    the image will be cropped in the given ratio relative to the center
                </f:comment>
                <viresp:responsiveImage
                    treatIdAsReference="true"
                    ratio="1170:200"
                    src="{page.files.0.uid}"
                    class="img-autocropped"
                    alt="{page.files.0.properties.alternative}"
                    additionalAttributes="{data-sizes: 'auto'}"
            />
            </div>
        </f:else>
    </f:if>
</f:if>

在 YourSitePackage/Configuration/TCA/Overrides/pages.php 中的相应图像编辑器设置如下

$GLOBALS['TCA']['pages']['types'][(string)\TYPO3\CMS\Frontend\Page\PageRepository::DOKTYPE_DEFAULT]['columnsOverrides']['media']['config']['overrideChildTca']['columns']['crop']['config']['cropVariants'] = [
    'headerImageDesktop' => [
        'title' => 'Header Image Desktop',
        'allowedAspectRatios' => [
            '1170:200' => [
                'title' => 'Letterbox Slot 1170:200',
                'value' => 1170 / 200,
            ]
        ],
        'coverAreas' => [
            [
                'x' => 0.02,
                'y' => 0.66,
                'width' => 0.96,
                'height' => 0.34,
            ]
        ]
    ],
];

JavaScripts

如果您想支持旧版浏览器（例如 IE）并/或使用 bgset 功能创建响应式背景图片，则需要使用 lazysizes 库。

此扩展捆绑的 JavaScript

该扩展使用 lazysizes.js 以及 respimg/ls.respimg.min.js、ls.parent-fit.min.js 和 ls.bgset.min.js 插件，这些插件都包含在 Resources/Private 中，并由

page.includeJSFooterlibs {
	lazysizes1respimg = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/respimg/ls.respimg.min.js
	lazysizes2parentfit = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/parent-fit/ls.parent-fit.min.js
	lazysizes3bgset = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/plugins/bgset/ls.bgset.min.js
	lazysizes4core = EXT:viresponsiveimages/Resources/Private/Javascripts/lazysizes/lazysizes.min.js
}

使用 npm 安装

包含这些库的首选方法是在以下 TypoScript 配置中禁用您的设置中的包含

page.includeJSFooterlibs {
	lazysizes1respimg >
	lazysizes2parentfit >
	lazysizes3bgset >
	lazysizes9core >
}

并在您的项目中通过 npm/yarn 安装 lazysizes

npm install --save lazysizes

或将 lazysizes 添加到 package.json 的依赖部分

"dependencies": {
   ...
   "lazysizes": "^5.1.1",
   ...
}

然后从那里选择您喜欢的构建/包含源的方法。使用 webpack 时，您可以在 main.js 中导入库，如下所示

import 'lazysizes/plugins/respimg/ls.respimg';
import 'lazysizes/plugins/parent-fit/ls.parent-fit';
import 'lazysizes/plugins/bgset/ls.bgset';
import 'lazysizes/lazysizes';

鸣谢

https://npmjs.net.cn/package/lazysizes

visol digitale Dienstleistungen GmbH, www.visol.ch