Image variations #

This page is for developers who define how images are cropped and scaled. On the DXP an image field stores the original; variations (sizes) are generated on demand by Liip Imagine the first time a template asks for them (skeleton guide, section 13). The idea matches image aliases in Exponential 6.

Contents #

1. Defining variations
2. Using them in Twig
3. Clearing generated variations
4. Working with originals
5. Advice

Defining variations #

Variations are a siteaccess-aware setting under ibexa.system.<scope>.image_variations. The guide's example:

ibexa:
    system:
        site_group:
            image_variations:
                small:
                    reference: ~
                    filters:
                        - { name: geometry/scaledownonly, params: [160, 120] }
                medium:
                    reference: ~
                    filters:
                        - { name: geometry/scaledownonly, params: [480, 360] }
                large:
                    reference: ~
                    filters:
                        - { name: geometry/scaledownonly, params: [960, 720] }

reference lets a variation start from another variation instead of the original. ImageMagick is optional; its path is IMAGEMAGICK_PATH (Environment variables).

Using them in Twig #

{{ ibexa_render_field(content, 'image', { parameters: { alias: 'medium' } }) }}

{% set variation = ibexa_image_alias(content.getField('image'), content.versionInfo, 'large') %}
{% if variation %}
    <img src="{{ variation.uri }}" width="{{ variation.width }}" height="{{ variation.height }}" alt="">
{% endif %}

Give every image its width and height so the page does not shift while it loads, and real alternative text from a field where the image carries meaning.

Clearing generated variations #

After you change a variation's filters, remove the generated files so they are built again:

php bin/console liip:imagine:cache:remove                  # all variations
php bin/console liip:imagine:cache:remove --filter=small   # one variation
php bin/console cache:clear

Working with originals #

resize-original changes stored files: run it on a copy first (Console commands).

Advice #

• Define a small set of variations that match the design's breakpoints; each one costs disk space for every image.
• Generated variations live under public/var/; the web server must write there (File permissions).
• A 404 for a variation after a database conversion usually means rows are missing (Databases, After a conversion).

Related pages #

• Twig functions you use daily
• Image aliases in Exponential 6 themes
• Image performance
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.