Image

Ein image Objekt liefert Informationen über ein Bild. Bildobjekte sind in der Regel Attribute von anderen Objekten, wie z. B product, variant, collection, und article.

Um ein Bild zu rendern, verwenden Sie den Filter image_tag.

Das Objekt image hat die folgenden Attribute:

Inhalt

image.alt
image.aspect_ratio
image.attached_to_variant?
image.height
image.id
image.media_type
image.position
image.preview_image
image.product_id
image.src
image.variants
image.width

image.alt

Gibt den Alt-Tag des Bildes zurück, der auf der Seite Produkte in der Verwaltung festgelegt wurde.

image.aspect_ratio

Gibt das Seitenverhältnis (width / height) des Bildes zurück.

image.attached_to_variant?

Gibt true zurück, wenn das Bild mit einer Variante verknüpft wurde. Andernfalls wird false zurückgegeben. Dies kann in Fällen verwendet werden, in denen Sie eine Galerie von Bildern erstellen möchten, die nicht mit Varianten verbunden sind.

attached_to_variant?wird nur zurückgegeben, wenn das Bild mit einem Produkt verbunden ist. Sie ist nicht verfügbar, wenn der Zugriff über product. media erfolgt.

image.height

Gibt die Höhe des Bildes in Pixeln zurück.

image.id

Gibt die ID des Bildes zurück.

Für Vorschaubilder aus generic_file und Medienobjekten wird keine ID zurückgegeben.

image.media_type

Gibt den Typ des Objekts (Bild) zurück.

Die Eigenschaft media_type kann verwendet werden, um das Array product. media nach allen Medien eines gewünschten Typs zu filtern.

{% assign images = product.media | where: "media_type", "image" %}
{% for image in images %}
  {{ image.alt }}
{% endfor %}

Bild des schwarzen Kinderwagens

Bild des grauen Kinderwagens

media_type wird nur zurückgegeben, wenn das Bild mit einem Produkt verknüpft ist und der Zugriff über das Attribut product. media erfolgt oder wenn der Zugriff über einen file_reference auf ein Metafeld erfolgt.

image.position

Gibt die Position des Bildes im Medienfeld des product -Objekts zurück.

wird nur zurückgegeben, wenn das Bild mit einem Produkt verbunden ist.

image.preview_image

Gibt ein Vorschaubild für das Bild zurück.

Ein Wert für preview_image wird nur zurückgegeben, wenn der Zugriff über eine Medienablage des Produktobjekts erfolgt. Zum Beispiel: product. featured_media. preview_image

image.product_id

Gibt die ID des Produkts des Bildes zurück.

product_id wird nur zurückgegeben, wenn das Bild mit einem Produkt verbunden ist.

image.src

Gibt den relativen Pfad des Produktbildes zurück. Dies ist dasselbe wie die Ausgabe von {{ image }}.

{% for image in product.images %}
  {{ image.src  }}
  {{ image }}
{% endfor %}

products/my_image.jpg
products/my_image.jpg

Um die URL des Bildes im Content Delivery Network (CDN) von VersaCommerce zurückzugeben, verwenden Sie den entsprechenden URL-Filter.

Eine vollständige Liste der verfügbaren Bildgrößen finden Sie unter Bildgrößenparameter.

Unten sehen Sie ein Beispiel für das Laden eines Produktbildes mit dem Filter image_url.

{{ image | image_url: width: 500 }}

//cdn.versacommerce.de/s/files/1/0087/0462/products/shirt14.jpeg?v=1309278311&width=500

image.variants

Gibt ein Array von Attributen für die Variante zurück, mit der das Bild verknüpft ist.

{% for image in product.images %}
  {% for variant in image.variants %}
    {{ image.src }} - used for the variant: {{ variant.title }}
  {% endfor %}
{% endfor %}

products/rot-shirt.jpeg - used for the variant: Rot
products/green-shirt.jpg - used for the variant: Grün
products/yellow-shirt.jpg - used for the variant: Gelb

varianten werden nur zurückgegeben, wenn das Bild mit einem Produkt verbunden ist. Sie ist nicht verfügbar, wenn der Zugriff über product. media erfolgt

image.width

Gibt die Breite des Bildes in Pixeln zurück.