Drop-in ready partial¶
There is a drop-in preconfigured implementation of all of this available in this extension if you use fluid_styled_content. It is enabled by default, but depending of you implementation it might not be used.
Typoscript configuration¶
lib.contentElement {
partialRootPaths {
1 = EXT:responsive_picture/Resources/Private/Partials/
}
}
This enables for fluid_styled_content to load the extensions own partial, which is Media/Rendering/Image.html
Partial¶
<picture>
<f:for each="{file.variants}" as="variant">
<source media="{variant.mediaquery}"
srcset="{f:uri.image(image: '{variant}', maxWidth: '{variant.variationmaxwidth}', maxHeight: '{variant.variationmaxheight}')}">
</f:for>
<f:media alt="{file.alternative}"
class="image-embed-item"
file="{file}"
height="{dimensions.height}"
loading="{settings.media.lazyLoading}"
style="width:auto;height:auto;max-width:100%"
title="{file.title}"
width="{dimensions.width}" />
</picture>
This will create a <picture> element with several <source> elements according to the configured media sizes, resized according to the max width and height and the original image as fallback. Cropping informations are applied as well in this step.