Story #75879
Updated by Frans Saris over 8 years ago
https://www.w3.org/TR/2013/WD-html-picture-element-20130226/
*Example typoscript configuration:*
<pre>
tt_content {
textmedia =< lib.fluidContent
textmedia {
templateName = Textmedia
dataProcessing {
10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
10 {
references.fieldName = assets
}
20 = TYPO3\CMS\Frontend\DataProcessing\PictureSourceProcessor
20 {
// Taking into account:
// - Mediaquery
// - Container width
// - Columns
// ContainerWidth(InText) can be overruled in the content element
// Keys to use as identifier for mediaQuery
columns.field = imagecols
sources {
default {
containerMaxWidth = {$styles.content.maxW}
containerMaxWidth {
override.field = container_width
}
containerMaxWidthInText = {$styles.content.maxWinText}
containerMaxWidthInText {
override.field = container_width
}
pixelDensity = 1,2
}
768 {
containerMaxWidth = 300
containerMaxWidthInText = 150
maxColumns = 4
overrideColumnsMap {
2 = 1
}
mediaQuery = (max-device-width: 768px)
pixelDensity = 1,2
}
}
as = pictureSources
}
}
}
}
</pre>
*Output of pictureSourceProcessor*
<pre>
pictureSources {
768 default {
width = 300 600
mediaQuery = (max-device-width: 768px)
pixelDensity {
0 = 1
1 = 2
}
}
default 768 {
width = 600 300
mediaQuery = (max-device-width: 768px)
pixelDensity {
0 = 1
1 = 2
}
}
}
</pre>
*pictureSourceViewHelper*
<pre>
pictureSourceViewHelper
- FileInterface $image
- string $mediaQuery
- int $width
- array $pixelDensity
</pre>
*Fluid partial*
<pre>
<picture>
<f:for each="{pictureSources}" as="source">
<f:pictureSource mediaQuery="{source.mediaQuery}" width="{source.width}m" pixelDensity="{source.pixelDensity}" image="{file}" />
</f:for>
<f:image image="{file}" width="{pictureSources.default.width}m" alt="" />
</picture>
</pre>
*Output*
<pre>
<picture>
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<source media="(max-device-width: 768px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
<source srcset="small-1.jpg 1x, small-2.jpg 2x">
<img src="small-1.jpg" alt="">
</picture>
</pre>