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.
| ai:image | render an adaptive image |
| ai:picture | 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.
| ai:getCropVariants | Returns a CropVariantCollection as array for a FileReference |
| ai:getSrcSet | Get a srcset string for a given cropVariant and widths and generate images for srcset candidates |
| ai:ratioBox | Wraps an image or picture tag in a ratio box |
| ai:placeholder.image | Returns a placeholder image |
| ai:placeholder.svg | 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/