如何在 TYPO3 中实现 sourceCollection 响应式图像渲染？

Question

我想在TYPO3中使用sourceCollection根据不同的尺度（媒体）实现响应式图像渲染？

<picture>
  <source src="fileadmin/_processed_/imagefilenamename_595cc36c48.png" 
    media="(max-device-width: 600px)" />
  <source src="fileadmin/_processed_/imagefilenamename_42fb68d642.png" 
    media="(max-device-width: 600px) AND (min-resolution: 192dpi)" />
  <img src="fileadmin/_processed_/imagefilenamename_595cc36c48.png"  alt="" />
</picture>

我可以使用TypoScript 渲染它，但我如何在我自己的扩展程序中使用它？

提前致谢。

Answer 1

最直接的方法是使用 TypoScript。在下面的示例中，我们使用与 tt_content 相同的配置来呈现新闻项目。

首先，您需要定义一个 TypoScript 对象，该对象使用传递给该对象的文件。然后复制用于 tt_content 的配置。

lib.responsiveImage {
    default = IMAGE
    default {
        file.import.current = 1
        altText.data = field:altText
        titleText.data = field:titleText
        layoutKey = picturefill
        layout.picturefill < tt_content.image.20.1.layout.picturefill
        sourceCollection < tt_content.image.20.1.sourceCollection
    }
}

（如果您不想使用图片填充，可能需要将示例更改为其他布局。）

然后，在 Fluid 中，您将图像传递给 TypoScript。下面的示例映射了 FileReference 的 uri：

<f:alias map="{image: {uri: '{f:uri.image(src:\'{mediaElement.uid}\', treatIdAsReference:\'1\')}', altText: mediaElement.originalResource.alternative, titleText: mediaElement.originalResource.title}}">
    <f:cObject typoscriptObjectPath="lib.responsiveImage.default" data="{image}" currentValueKey="uri" />
</f:alias>

你也可以定义其他配置，例如

lib.responsiveImage {
    default = IMAGE
    default {
        [...]
    }
    newsDetail < .default
    newsDetail {
        [different configuration for type newsDetail]
    }
}