Widget.responsiveImage ViewHelper <lim:widget.responsiveImage>
This ViewHelper render a responsive image with given configuration. It also support webp, media queries and art queries.
Examples
<picture>
<lim:widget.responsiveImage
image="{image}"
enableWebPSupport="true"
defaultOptions="{'fm': 'jpg'}"
sourceSets="{
'(max-width: 767px)':
{
srcset: {0: {w:320},1: {w:480},2: {w:560},3: {w:640}},
sizes: 'calc(100vw - 30px)',
default: 1,
options: {fm: 'png'},
cropVariant: 'tablet'
},
'(min-width: 768px)':
{
srcset: {0: {w:640},1: {w:768},2: {w:900},3: {w:1024}},
sizes: '100vw',
cropVariant: 'smartphone'
}
}"
/>
</picture>
Copied!
Here an example if you have to use the src attribute.
<picture>
<lim:widget.responsiveImage
src="{image.uid}"
enableWebPSupport="true"
treatIdAsReference="1"
class="css-class-on-image"
objectFit="cover"
objectPositionLeft="center"
objectPositionTop="top"
defaultOptions="{'fm': 'jpg', fit: 'crop'}"
sourceSets="{
'(max-width: 767px)':
{
srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
sizes: 'calc(100vw - 30px)',
default: 1,
options: {fm: 'pjpg', crop: 'left,top'}
},
'(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
{
srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
sizes: '100vw',
options: {fm: 'pjpg', crop: 'right,bottom'}
}
}"
/>
</picture>
Copied!
Attention
- Inline notation is also possible. But (!) the syntax can get messy if you have to deal with nested arrays in the inline notation markup.
- This ViewHelper makes heavy use of nested array for the
sourceattribute. Consider it as best practice to store your needed sourceSets in fluid variable viaSets f:.variable
<picture>
<f:variablen
name="responsiveImageSourceSets"
value="{
'(max-width: 767px)':
{
srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
sizes: 'calc(100vw - 30px)',
default: 1,
options: {fm: 'pjpg', crop: 'left,top'}
},
'(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
{
srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
sizes: '100vw',
options: {fm: 'pjpg', crop: 'right,bottom'}
}
}"
/>
{lim:widget.responsiveImage(src: image.uid, enableWebPSupport: 'true', treatIdAsReference: 'true', class: 'css-class-on-image' objectFit: 'cover', objectPositionLeft: 'center', objectPositionTop: 'top', defaultOptions: '{fm: 'jpg', fit: 'crop'}' sourceSets: responsiveImageSourceSets)}
</picture>
Copied!
Arguments
The following arguments are available for the widget.responsiveImage ViewHelper:
class
-
- Type
- string
Class of <img />
customWidgetId
-
- Type
- string
extend the widget identifier with a custom widget id
defaultOptions
-
- Type
- array
- Default
- array ( )
Options applied to all source sets
dimensions
-
- Type
- bool
- Default
- false
Set height and width dynamically
enableWebPSupport
-
- Type
- bool
- Default
- true
Enable webP support
fetchPriority
-
- Type
- string
A string representing the priority hint. Possible values are:. "high", "low" or "auto"
image
-
- Type
- object
a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference)
liaContext
-
- Type
- array
- Default
- array ( )
Opaque context for ModifyProcessingInstructionsEvent listeners, e.g. {aiBadge: '0'}. Never forwarded to the image server.
loading
-
- Type
- string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto"
objectFit
-
- Type
- string
- Default
- ''
Polyfill object fit mode
objectPositionLeft
-
- Type
- string
- Default
- 'center'
Polyfill object position left
objectPositionTop
-
- Type
- string
- Default
- 'center'
Polyfill object position top
respectImageWidth
-
- Type
- int
- Default
- 0
If set source-set definitions will be processed to ensure not to exceed the given image width
respectImageWidthClasses
-
- Type
- array
- Default
- array ( 0 => 'staticimage', 1 => 'u-respect-image-width', )
If respectImageWidh is set, this classes will be applied to the IMG tag
sourceSets
-
- Type
- array
Source set configuration
src
-
- Type
- string
a path to a file, a combined FAL identifier or an uid (int). If $treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. If you already got a FAL object, consider using the $image parameter instead
storeSession
-
- Type
- bool
- Default
- true
Store the widgets session (utilizing a cookie).
treatIdAsReference
-
- Type
- bool
If you use an UID in the `src` attribute you have to set this argument to `true` to get an result.