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/