How to implement the sourceCollection responsive image rendering in TYPO3? - typo3

Question

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>
I can render it using TypoScript but how can i use this in my own extension?
Thanks in advance.

Answer 1

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