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

Question

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

<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]
    }
}