# 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.