如何在TYPO3中实现sourceCollection响应式图像渲染? [英] How to implement the sourceCollection responsive image rendering in TYPO3?

问题描述

我想使用sourceCollection根据TYPO3中的不同比例(媒体)实现响应图像渲染吗?

I want to implement responsive image rendering according to the different scale (media) in TYPO3 using 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 进行渲染，但是如何在自己的扩展程序中使用它呢?

I can render it using TypoScript but how can i use this in my own extension?

谢谢.

推荐答案

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

The most straight-forward way is to use TypoScript. In the example below we use the same configuration I use for tt_content to render News items.

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

First of all you need to define a TypoScript object that uses the file that is passed to the object. Then you copy the configuration that is used for 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
    }
}

(如果您不想使用图片填充，则可能需要将示例更改为其他布局.)

(You may need to change the example to another layout if you don't want to use picturefill.)

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

Then, in Fluid, you pass the image to TypoScript. The example below maps the uri of a FileReference:

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

您还可以定义其他配置，例如

You can also define other configuration, e.g.

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

这篇关于如何在TYPO3中实现sourceCollection响应式图像渲染?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！