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.
ViewHelpers¶
General¶
Add the fluid namespace declaration to fluid templates¶
Before version 0.1.5 registering of the global viewhelper namespace ai was not working.
Even if you use a version >= 0.1.5 you might still want to add this namespace declaration to your templates and partials:
<html xmlns:ai="C1\AdaptiveImages\ViewHelpers"
xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
data-namespace-typo3-fluid="true">
...
</html>
ai:getCropVariants¶
Returns a CropVariantCollection as array of cropVariants this FileReference has.
Arguments¶
argument | required | default | Description |
---|---|---|---|
file | yes | FileReference to get the cropVariants from. | |
asString | no | false | Return the result as string (instaed array) |
Examples¶
<ai:getCropVariants file="{file}" />
will return (if the FileReference has two cropVariants):
array(2 items)
default => array(7 items)
id => 'default' (7 chars)
title => '' (0 chars)
cropArea => array(4 items)
x => 0 (double)
y => 0.09925 (double)
width => 0.999 (double)
height => 0.8991 (double)
allowedAspectRatios => array(empty)
selectedRatio => NULL
focusArea => array(4 items)
x => 0.33333333333333 (double)
y => 0.33333333333333 (double)
width => 0.33333333333333 (double)
height => 0.33333333333333 (double)
coverAreas => NULL
mobile => array(7 items)
ai:getSrcSet¶
Get a srcset string for a given cropVariant and widths and generate images for srcset candidates
Arguments¶
argument | required | Default | Description |
---|---|---|---|
file | yes | FileReference to use | |
cropVariant | no | default | select a cropping variant, in case multiple croppings have been specified or stored in FileReference |
widths | no | [320,640,1024,1440,1920] | create srcset candidates with these widths |
debug | no | 0 | Add debug output (width, height, ratio) to the generated images |
Examples¶
<ai:getCropVariants file="{file}" />
returns
/fileadmin/_processed_/7/9/image_2269306f6a.jpg 360w,/fileadmin/_processed_/7/9/image_5f0de63291.jpg 720w
or for cropVariant mobile and widths as array
<ai:getSrcset file="{file}" cropVariant="mobile" widths="[360,720]" debug="1" />
returns
/fileadmin/_processed_/7/9/image_cbb4289869.jpg 0w,/fileadmin/_processed_/7/9/image_3e7a2d9258.jpg 720w
ai:ratioBox¶
Wraps an image or picture tag in a ratio box. This also adds generated css style to the header of the page to set the correct padding-bottom to always maintain the ratio and thus prevent page reflows.
Arguments¶
argument | required | Default | Description |
---|---|---|---|
file | yes | FileReference to use | |
mediaQueries | no | [[‘default’ => ‘’]] | Array of arrays containing ratio and media for cropVariants |
Examples¶
<ai:ratioBox file="{file}" mediaQueries="{mobile: '(max-width:767px)', default: ''}">
<f:comment>Your picture/image tag (f:image, ai:image etc.)</f:comment>
</ai:ratioBox>
Assuming that the image has cropVariants default (16:9) and mobile (4:3) this will add css style to the head of the website and return:
<div class="rb rb--62dot5 rb--max-width767px-75">
<f:comment>Your picture/image tag (f:image, ai:image etc.)</f:comment>
</div>
ai:placeholder.image¶
Returns a placeholder image (base64 encoded data OR uri) width reduced quality and size, but original aspect ratio.
Arguments¶
argument | required | Default | Description |
---|---|---|---|
file | yes | FileReference to use | |
cropVariant | no | default | select a cropping variant, in case multiple croppings have been specified or stored in FileReference |
width | no | 128 | create placeholder image with this width |
height | no | create placeholder image with this height | |
absolute | no | false | Force absolute URL |
dataUri | no | true | Returns the base64 encoded dataUri of the image (for inline usage) |
Examples¶
<ai:placeholder.image file="{file}" cropVariant="mobile" width="192" />
returns the images as base64 encoded data-uri
data:image/jpeg;base64,/9j/4AAQSkZJ[...]
or return image uri instead:
<ai:placeholder.image file="{file}" cropVariant="mobile" width="192" dataUri="0" />
returns
/fileadmin/_processed_/7/9/image_702e24791e.jpg
ai:placeholder.svg¶
Returns a placeholder SVG image (base64 encoded data uri) keeping original aspect ratio by replacing the SVG’s width/and height of that of the generated image.
Arguments¶
argument | required | Default | Description |
---|---|---|---|
file | yes | FileReference to use | |
cropVariant | no | default | select a cropping variant, in case multiple croppings have been specified or stored in FileReference |
Examples¶
<ai:placeholder.svg file="{file}" cropVariant="mobile"/>
returns the SVG as base64 encoded data-uri
data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0[...]
ai:image¶
This viewHelper outputs a complete adaptive image img tag, optionally with ratio box and a placeholder image. Use this when you don’t need art direction/different cropVariants. If you need art direction see ai:picture.
Arguments¶
This viewHelper has all arguments which are available to the f:image viewHelper including fluids universal tag attributes plus the following:
argument | required | Default | Description |
---|---|---|---|
lazy | no | false | lazy load images and auto-sizes with lazysizes.js |
debug | no | false | Add debug output (width, height, ratio) to the generated images using IM/GM |
jsdebug | no | false | Add debug output (width, height, ratio) near the image using javascript |
srcsetWidths | no | [320,640,1024,1440,1920] | create srcset candidates with these widths |
cropVariant | no | default | select a cropping variant, in case multiple croppings have been specified or stored in FileReference |
sizes | no | 100vw | sizes attribute for the img tag. Takes precedence over additionalAttributes[“sizes”] if both are given. |
placeholderInline | no | true | Include placeholder inline in HTML (base64 encoded) |
ratiobox | no | false | The image is wrapped in a ratio box if true. |
Examples¶
<ai:image image="{file}"
class="img-responsive lazyload"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
srcsetWidths="320,640"
placeholderInline="1"
placeholderWidth="128"
lazy="1"
debug="1"
ratiobox="1"
jsdebug="1"
sizes="100vw"
/>
returns a complete image tag with lazysizes loading and a placeholder image. Important For lazysizes to work you have to add the class lazyload here.
ai:picture¶
This viewHelper outputs a complete adaptive image picture tag, optionally with ratio box and a placeholder image. If you need to show different cropVariants for different device widths you need to use this viewHelper.
Arguments¶
This viewHelper has all arguments which are available to the f:image viewHelper including fluids universal tag attributes plus the following:
argument | required | Default | Description |
---|---|---|---|
lazy | no | false | lazy load images and auto-sizes with lazysizes.js |
debug | no | false | Add debug output (width, height, ratio) to the generated images using IM/GM |
jsdebug | no | false | Add debug output (width, height, ratio) near the image using javascript |
srcsetWidths | no | [320,640,1024,1440,1920] | create srcset candidates with these widths |
cropVariant | no | default | select a cropping variant, in case multiple croppings have been specified or stored in FileReference |
sizes | no | 100vw | sizes attribute for the img tag. Takes precedence over additionalAttributes[“sizes”] if both are given. |
placeholderInline | no | true | Include placeholder inline in HTML (base64 encoded) |
ratiobox | no | false | The image is wrapped in a ratio box if true. |
sources | no | [[‘default’ => ‘’]] | Array of arrays containing candidates for source tags |
Examples¶
<ai:picture image="{file}"
class="img-responsive-full lazyload"
width="{dimensions.width}"
height="{dimensions.height}"
alt="{file.alternative}"
title="{file.title}"
sources="{
'mobile': {
'srcsetWidths': '320,640,768',
'media': '(max-width: 767px)'
}
}"
srcsetWidths="768,1024"
placeholderInline="1"
placeholderWidth="128"
lazy="1"
debug="1"
ratiobox="1"
jsdebug="1"
sizes="100vw"
/>
returns a complete picture tag with one source for the cropVariant mobile. With lazysizes loading and a placeholder image. Important For lazysizes to work you have to add the class lazyload here.