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 { default { width = 600 mediaQuery = pixelDensity { 0 = 1 1 = 2 } } 768 { width = 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"> <img src="small-1.jpg" alt=""> </picture> </pre>