Add option to guess and calculate width and height for an image format

[alexander-schranz]

Set width and height attribute automatically

Since Sulu 2.3 the original image width and height are save as properties.
This allows us the guess the width and height dimension of a given image format.

With setting the width and height attribute modern browsers avoid a layer shifts
and the page will not jump when images are loaded.

This feature can be activated the following way:

services:
    Sulu\Twig\Extensions\ImageExtension:
        arguments:
             $aspectRatio: true
             $imageFormatConfiguration: '%sulu_media.image.formats%'

So if we have an original image of 1920x1080 and have a image format called 100x:

{{ get_image(headerImage, '100x') }}

Will add automatically the width and height attributes to the imgage tag:

<img alt="Title" title="Description" src="/uploads/media/100x/01/image.jpg?v=1-0" width="100" height="56">

This only works when writing image formats in specific format 100x, x100, 100x100, 100x100-inset, 100x@2x, ...
for all other cases this option not be activated.

fixes #36

[niklasnatter]

accessing the %sulu_media.image.formats% parameter would allow us to not rely on the format key here. but i understand that it makes the method dependent on sulu.

another possibility would be trying to access the %sulu_media.image.formats% parameter and fallback to this implementation if it is not available.

[niklasnatter]

i dont have a lot of experience with this package and i am not sure if anything sulu related is accessed somewhere else. if yes, i think it would be nice to use %sulu_media.image.formats%. if not, we should probably not start doing it 🙂

[alexander-schranz]

Currently the web twig extension has no sulu dependencies and so are sulu independent. As sulu_media.image.formats is no service just an array configuration which we could reuse without a dependency to sulu.

I'm fine to add imageFormatsConfiguration as parameter and use it when is configured and else fallback to it. What do you think?

[niklasnatter]

i think it would be nice to do that, because the feature would not depend on the format of the keys then 🙂

[alexander-schranz]

Did update the extension!