Bildvariationen #

Diese Seite richtet sich an Entwickler, die festlegen, wie Bilder zugeschnitten und skaliert werden. Auf der DXP speichert ein Bildfeld das Original; Variationen (Größen) erzeugt Liip Imagine bei Bedarf, wenn ein Template sie zum ersten Mal anfordert (Anleitung des Skeletons, Abschnitt 13). Die Idee entspricht den Bildvarianten in Exponential 6.

Inhalt #

1. Variationen festlegen
2. Sie in Twig verwenden
3. Erzeugte Variationen leeren
4. Mit Originalen arbeiten
5. Ratschläge

Variationen festlegen #

Variationen sind eine siteaccessbewusste Einstellung unter ibexa.system.<scope>.image_variations. Das Beispiel der Anleitung:

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] }

Mit reference beginnt eine Variation bei einer anderen Variation statt beim Original. ImageMagick ist optional; sein Pfad ist IMAGEMAGICK_PATH (Umgebungsvariablen).

Sie in Twig verwenden #

{{ 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 %}

Geben Sie jedem Bild Breite und Höhe, damit die Seite beim Laden nicht springt, und echten Alternativtext aus einem Feld, wo das Bild eine Bedeutung trägt.

Erzeugte Variationen leeren #

Nachdem Sie die Filter einer Variation geändert haben, entfernen Sie die erzeugten Dateien, damit sie neu gebaut werden:

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

Mit Originalen arbeiten #

resize-original ändert gespeicherte Dateien: Führen Sie es zuerst an einer Kopie aus (Konsolenbefehle).

Ratschläge #

• Legen Sie einen kleinen Satz von Variationen fest, der zu den Breakpoints des Designs passt; jede kostet für jedes Bild Speicherplatz.
• Erzeugte Variationen liegen unter public/var/; der Webserver muss dort schreiben können (Dateiberechtigungen).
• Ein 404 für eine Variation nach einer Datenbankumstellung bedeutet meist, dass Zeilen fehlen (Datenbanken, nach einer Umstellung).

Verwandte Seiten #

• Twig-Funktionen für den Alltag
• Bildvarianten in Themes von Exponential 6
• Bildleistung
• Freie Dokumentation: Diese Seite darf unter der GNU FDL 1.3 frei kopiert, übersetzt und verbessert werden.