Image

Image

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

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

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

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

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:


Parameter
Ausrichtung
`top`
Oben
`right`
Rechts
`left`
Links
`bottom`
Unten
`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

{{ 'mein-bild.png' | media_image_url }}

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

<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.

Ist der Shopify-Kompatibilitäts-Modus aktiviert, so unterstützt der Filter außerdem die Optionen scale, format und crop. scale skaliert ein Bild auf die zwei- oder dreifache Größe, format formatiert das Bild ins jpg- oder pjpg-Format (progressive jpg) und crop verhält sich wie gravity. Der scale-Filter funktioniert nur, wenn damit einher eine Veränderung der Bildgröße stattfindet.

Syntax:
productimage | product_img_url: size

{{  product.featured_image | product_img_url }}

{{  product.featured_image | product_img_url: '250x250', scale: 2 }}

{{  product.featured_image | product_img_url: '250x250', format: 'jpg' }}
{{  product.featured_image | product_img_url: '250x250', format: 'pjpg' }}

{{  product.featured_image | product_img_url: '250x250', crop: 'bottom' }}

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

product_img_url Folgende Bildgrössen werden automatisch erzeugt:

Größe
Maximalwert Höhe / Breite
thumb
50 * 50px
standard
1024 * 1024px
originial
Originalmaße


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


GrößeMaximalwert Höhe / Breite
pico 16 * 16px
icon 32 * 32px
small100 * 100px
medium 250 * 250px
large480 * 480px
xlarge 960 * 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:
  1. resize
  2. canvas
  3. background
  4. gravity
  5. convert_to
  6. 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

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

Erlaubte Farbwerte sind

  1. hexadecimal (z.B FFFFFF für weiß)
  2. none
  3. yellow, blue, red ...
{{ product.featured_image | product_img_url | resize:'200x200' | background: 'FFFFFF' }}


scale

Dieser Filter kann ein Bild um das zwei- oder dreifache vergrößern (skalieren). Die erlaubten Parameter sind also 2 oder 3.

Der Filter funktioniert nur, wenn gleichzeitig eine Bildgröße vorgegeben wird, die vergrößert werden soll. Etwa durch den img_url- oder resize-Filter.

{{ product.featured_image | product_img_url | resize: '200x200' | scale: 2 }}
{{ product.featured_image | product_img_url | resize: '200x200' | scale: 3 }}


    • Related Articles

    • Image-Objects

      Image-Objects {% for image in product.images %} {{ image.url | refit: '200x300' | img_tag }} {% endfor %} image.content_type Gibt den Typ des Bildes zurück. Für ein jpg ist es zum Beispiel image/jpeg. image.description Gibt die Bildbeschreibung ...
    • Product Image Resource

      Product Image Resource Bulk Create Or Update Delete Product Images Bulk Create or Update PUT /api/products/1/.json PUT /api/products/1.json will create or update the product images from the parameters passed. Example: $ curl -s \ -H 'Accept: ...
    • Page

      Eine komplette Informations-Seite kann z.B. im page.liquid-Template so ausgegeben werden: <h1>{{ page.title }}</h1> {{ page.content }} page.content_meta_description {{ page.content_meta_description }} page.content_meta_keywords {{ ...
    • URL

      asset_url Asset-URL erzeugen Syntax: {{ dateiname |asset_url }} {{ 'shop.css' | asset_url }} /accounts/demo_versacommerce_de/designs/standard/assets/shop.css Asset-URL inkl. Stylesheet-Tag erzeugen {{ 'shop.css' | asset_url | stylesheet_tag }} <link ...
    • Article

      Das article_objekt weist die folgenden Attribute auf: article.author Gibt den vollständigen Namen des Autors des Artikels zurück. Name: {{ article.author }} Name: Max Muster article.blog Titel des Blogs: {{ article.blog.title }} Titel des Blogs: Mein ...