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.