How to implement the sourceCollection responsive image rendering in 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]
    }
}