Dokumentation Entwickler Liquid Referenz Filter

Image

Aktualisiert am 16.03.2017

Inhalt

canvas

canvas

Der Filter canvas erweitert eine Bild-URL um einen Skalierungsparameter, der den VersaCommerce-Assetserver veranlasst, die Bildfläche des in der URL angegebenen Bildes auf das in size angegebene Maß zu erweitern bzw. zu reduzieren. Dabei wird der Bildinhalt nicht skaliert.

Syntax:
url | canvas size
Beispiel:
{{ product.featured_image | product_img_url | resize:'200x200' | canvas: '200x500' }}

canvas

Ausgehend von der Bildgrösse ‘standard’ (1024 * 1024 Pixel) wird dieses Bild zunächst auf eine Grösse von 200 * 200 Pixeln skaliert und dann auf einer Fläche von 200 * 500 Pixeln ausgegeben. Der Inhalt des Bildes wird zentriert auf der vergrösserten Fläche positioniert, d.h. in diesem Beispiel werden jeweils oben und unten im Bild 150 Pixel hinzugefügt. Die gefüllten neuen Flächen sind schwarz. Sie können aber jede andere Farbe mit Hilfe des Filters background wählen.

Um die Positionierung auf dem erweiterten / beschnittenen Hintergrund zu beeinflussen, benutzen Sie den Filter gravity.

Weitere Beeinflussungsmöglichkeiten von Produktbildern haben Sie mit den Filtern resize,canvas, background, gravity, convert_to _und refit_. Mit Hilfe aller dieser Filter sind Sie sogar in der Lage, Transparenz enthaltende PNG-Dateien für den Microsoft InternetExplorer 6 zu erstellen!

convert_to

convert_to

Der Filter convert_to erweitert eine Bild-URL um einen Konvertierungsparameter, der den VersaCommerce-Assetserver veranlasst, das Bildformat, des in der URL angegebenen Bildes, auf das in format angegebene Maß zu konvertieren. Mögliche Formate: JPG, PNG

Syntax:
url | convert_to: 'format'
Beispiel:
{{ product.featured_image | product_img_url | resize:'200x200' |convert_to:'jpg' }}

convert_to

Ausgehend von der Bildgrösse ‘standard’ (1024 * 1024 Pixel) wird dieses Bild zunächst auf eine Grösse von 200 * 200 Pixeln skaliert und dann in das Format JPG umgewandelt.

Weitere Beeinflussungsmöglichkeiten von Produktbildern haben Sie mit den Filtern r_esize,canvas, background, gravity, convert_to und refit_. Mit Hilfe aller dieser Filter sind Sie sogar in der Lage, Transparenz enthaltende PNG-Dateien für den Microsoft InternetExplorer 6 zu erstellen!

gravity

gravity

Der Filter gravity erweitert eine Bild-URL um einen Paramter, der den VersaCommerce-Assetserver veranlasst, bei der Zuweisung einer anderen Fläche durch den Filter canvas, das Bild an der in direction angegebenen Richtung zu positionieren. Soll das Bild mittig platziert werden, so lässt man den gravity-Filter weg.

Syntax:
url | gravity: direction
Beispiel:
{{ product.featured_image | product_img_url | resize:'200x200' | canvas:'200x500' | gravity:'bottom' }}

Abweichend vom Beispiel unter Filter canvas wird dieses Bild an der Unterseite der Fläche positioniert, d.h. dem Bild werden oben 300 Pixel hinzugefügt (sofern das Ausgangsbild quadratisch war).

gravity

Mögliche Parameter für direction sind:

ParameterAusrichtung
`top`
Oben
`right`Rechts
`bottom`Unten
`left`Links
`top-left`Oben Links
`top-right`Oben Rechts
`bottom-left`Unten Links
`bottom-right`Unten Rechts

Weitere Beeinflussungsmöglichkeiten von Produktbildern haben Sie mit den Filtern resize,canvas, background, gravity, convert_to _und refit._

Hinweis

Mit Hilfe aller dieser Filter sind Sie sogar in der Lage, Transparenz enthaltende PNG-Dateien für den Microsoft InternetExplorer 6 zu erstellen.

media_image_url

Bilder laden Sie hoch in Katalog » Redaktion » Bilder.

Syntax:
image | media_image_url
Beispiel:
{{ 'mein-bild.png' | media_image_url }}
Ausgabe:
 <a href="http://assets.versacommerce.de/shop_versacommerce_de/mediafiles/images/mein_bild.png?1319195255">http://assets.versacommerce.de/shop_versacommerce_...</a>

In Verbindung mit einem Image-Tag

{{ 'mein-bild.png' | media_image_url | img_tag:'Dies ist mein Bild' }}
Ausgabe:
<img src="http://assets.versacommerce.de/shop_versacommerce_de/mediafiles/images/mein_bild.png?1319195255" alt="Dies ist mein Bild">

product_img_url

Der product_img_url Filter nimmt ein Produktbild entgegen und erzeugt die URL zu diesem Produktbild, das Sie unter Katalog » Produkte zu einem Produkt hochgeladen haben.

VersaCommerce speichert Ihre Produktbilder automatisch in 3 unterschiedlichen Grössen, von denen jede eine eigene URL hat. CMYK Bilder werden automatisch in den RGB Farbraum konvertiert, eventuelle Metatags aus dem Bild zur weiteren Kompression gelöscht und ggf. auf eine Auflösung für eine Bildschirmdarstellung mit 72dpi umgerechnet.

Syntax:
productimage | product_img_url: size
Beispiel:
{{  product.featured_image | product_img_url }}
Ausgabe:
<a href="http://cdn-1.versacommerce.net/++/s3.amazonaws.com/assets.versacommerce.de/beispiel-produkte_versacommerce_de/product_images/390/original/catbag-orange.jpg?1234900455">http://cdn-1.versacommerce.net/++/s3.amazonaws.com...</a>

URL zu einem Produktbild der Grösse ‘thumb’

Syntax:
{{ product.featured_image | product_img_url:'thumb' }}
Beispiel:
<a href="http://cdn-1.versacommerce.net/++/s3.amazonaws.com/assets.versacommerce.de/beispiel-produkte_versacommerce_de/product_images/390/thumb/catbag-orange.jpg?1234900455&resize=250x250">http://cdn-1.versacommerce.net/++/s3.amazonaws.com...</a>

Folgende Bildgrössen werden automatisch erzeugt:

GrößeMaximalwerte Höhe / Breite
thumb50 * 50px
standard1024 * 1024px
originalOriginalmaße

Über die Grössen ‘thumb’, ‘standard’ und ‘original’ hinaus können folgende Grössenbeschreibungen benutzt werden:

Größe
Maximalwerte Höhe / Breite
pico16 * 16px
icon32 * 32px
small100 * 100px
medium250 * 250px
large480 * 480px
xlarge960 * 960px

Die Grössenangaben in dieser Liste stellen die jeweils maximalen Höhen- bzw. Breitendimensionen dar. VersaCommerce verändert nicht die Proportion Ihrer Produktbilder.

Lieber eine andere Größe?

Bei VersaCommerce kann die Bildgröße auch völlig frei gewählt werden. Sie können die Bildgröße anpassen, die Bildfläche ändern und vieles mehr! Hier gibt es mehr Informationen:

  • resize
  • canvas
  • background
  • gravity
  • convert_to
  • refit

progressive

Der progressive Filter nimmt eine URL entgegen und erweitert sie um die Option bei JPEG-Bildern den “Progressive Mode” zu aktivieren. Dies kann gerade bei größeren Bildern ein schnelleres Anzeigen des Bildes bewirken.

Syntax:
url | progressive
Beispiel:
{{ product.featured_image_url | resize:'300x400' | convert_to:'jpg' | progressive }}

quality

Der Filter quality setzt die Qualität bei JPEG-Bildern. Auf diese Weise können Sie ein die Qualität und damit verbundene Dateigröße beeinflussen.

Syntax:
url | quality: 0-100
Beispiel:
{{ product.featured_image_url | resize:'300x400' | convert_to:'jpg' | quality:85 }}

refit

Der Filter refit benutzt intern eine Kombination der Filter resize und canvas. Auf diese Weise können Sie ein Bild gleichzeitig skalieren und beschneiden oder erweitern.

Syntax:
url | refit size
Beispiel:
{{ product.featured_image | product_img_url | refit:'237x237' }}

Weitere Beeinflussungsmöglichkeiten von Produktbildern haben Sie mit den Filtern resize, canvas, background, gravity, convert_to und refit. Mit Hilfe aller dieser Filter sind Sie sogar in der Lage, Transparenz enthaltende PNG-Dateien für den Microsoft InternetExplorer 6 zu erstellen!

resize

Der Filter resize benutzt intern eine Kombination der Filter resize und canvas. Auf diese Weise können Sie ein Bild gleichzeitig skalieren und beschneiden oder erweitern.

Syntax:
url | resize: size
Beispiel:
{% for image in product.images %}
{% if forloop.first %}
<img src="{{ image | product_img_url | resize: '800x800' }}" alt="{{ product.title }}" />
{% else %}
<img src="{{ image|product_img_url | resize: '100x100' }}" alt="{{ product.title }}" />
{% endif %}
{% endfor %}

background

background

Mit diesem Filter kann bei einem transparenten png Bild vom Format PNG die Hintergrundfarbe ausgetauscht werden.

Erlaubte Farbwerte sind

  • hexadecimal (z.B FFFFFF für weiß)
  • none
  • yellow, blue, red ...

background

{{ product.featured_image | product_img_url | resize:'200x200' | background: 'FFFFFF' }}