Introduction¶
What does it do?¶
This extension brings a set of Fluid ViewHelpers that are useful for adaptive image rendering.
Note
To use this extension, you should already have a good understanding of Fluid and adaptive images (i.e. know what picture, srcset and sizes are and how to use them).
"Higher level" viewhelpers¶
The viewhelpers ai:image and ai:picture can be used as a replacement for the f:image viewhelper.
render an adaptive image |
|
render an adaptive picture |
"Lower level" viewhelpers¶
Besides those "higher level" viewhelpers there are also viewhelpers, that allow for more experimantation and maximum flexibility. those may be used in combination with Fluids f:image and f:media viewhelpers.
Returns a CropVariantCollection as array for a FileReference |
|
Get a srcset string for a given cropVariant and widths and generate images for srcset candidates |
|
Wraps an image or picture tag in a ratio box |
|
Returns a placeholder image |
|
Returns a placeholder SVG image |
Demo Page¶
There are many pitfalls while using adaptive images and also a lot of options for implementing them. To experiment and test different possibilities there is a demo page using this extension which might give you an idea of different implementations and their problems.
Demo Page for adaptive images: https://ai-demo.comuno.net/