DEPRECATION WARNING
This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.
ResponsiveImageRendering - TYPO3 Extension¶
Fluid-ViewHelper for rendering your images as responsive images.
Syntax¶
fileReference¶
Type: \TYPO3\CMS\Core\Resource\FileReference
Description: File reference of the image to display.
Mandatory: yes
responsiveSizes¶
Type: array
Description: The various sizes and the proper viewports.
Mandatory: yes
Ex. {768w: 768, 1024w: 1024, 1280w: 1280, 1920w: 1920}
srcMaxWidth¶
Type: integer
Description: Maximum size of image, who is in src attribute. If you are used clearCssClass, this size would be used for image without media query.
Default: null
Mandatory: no
aspectRatioWidth¶
Type: integer
Description: Crop image to defined aspect ratio. Ignored if set to 0. Every image would be have the fix configured aspect ratio. The crop instructions from FAL entry would be ignored.
Default: 0
Mandatory: Only if aspectRatioHeight is set.
aspectRatioHeight¶
Type: integer
Description: See aspectRatioWidth.
Default: 0
Mandatory: Only if aspectRatioWidth is set.
width¶
Type: integer
Description: Width of image in %. Ignored if set to 0.
Default: 0
Mandatory: no
alt¶
Type: string
Description: Alternate text for image. The FAL entry alternate text has priority.
Default: empty string
Mandatory: no
title¶
Type: string
Description: Title for image. The FAL entry title has priority.
Default: empty string
Mandatory: no
clearCssClass¶
Type: boolean
Description: Output a css-class reference for the image. Can be used for background. Title, alt and width would be ignored, if set.
Default: false
Mandatory: no
Examples¶
Something like this
{namespace n86 = N86\ResponsiveImageRendering\ViewHelpers}
<n86:image fileReference="{resource}"
responsiveSizes="{768w: 768, 1024w: 1024, 1280w: 1280, 1920w: 1920}"
srcMaxWidth="750" width="50" aspectRatioWidth="16"
aspectRatioHeight="9" alt="Alternative" title="Title"
/>
output like this.
<img src="fileadmin/_processed_/6/d/csm_****************_1afeb02e35.jpg"
srcset="fileadmin/_processed_/6/d/csm_****************_1f40c49b96.jpg 768w,
fileadmin/_processed_/6/d/csm_****************_dff6667f60.jpg 1024w,
fileadmin/_processed_/6/d/csm_****************_e828fac558.jpg 1280w,
fileadmin/_processed_/6/d/csm_****************_1ba51923e9.jpg 1920w"
alt="Alternative" title="Title" width="50%"
>
Just add clearCssClass and remove attributes, who are ignored if clearCssClass is set.
{namespace n86 = N86\ResponsiveImageRendering\ViewHelpers}
<n86:image fileReference="{resource}"
responsiveSizes="{768w: 768, 1024w: 1024, 1280w: 1280, 1920w: 1920}"
srcMaxWidth="750" aspectRatioWidth="16" aspectRatioHeight="9"
clearCssClass="1"
/>
This settings created css-class like this.
fileadmin-****************-ddcfd1ba6ed9f23bdd5b1bf6d43b7f74
And in page header would placed the definition of the css-class.