Übersicht

Die {image}-Komponente ist ein erweiterter Ersatz für die Image-Komponente vom JTL Shop aus dem Nova Template. Sie übernimmt automatisch moderne Bildformate (AVIF/WebP), Lazy Loading, progressive Platzhalterbilder (verschwommene Anzeige des kleinsten Bildes, um schneller etwas anzeigen zu können) und responsive Srcsets – ohne zusätzlichen Konfigurationsaufwand.

{image} kann überall dort verwendet werden, wo sonst ein normales <img>-Tag in Smarty-Templates steht.

Grundlegende Verwendung

{image
    src=$product->Bilder[0]->cURLNormal
    alt=$product->cName
}

Parameter

Bilder aus dem Plugin-Backend (Custom Elfinder)

Im admorris Pro Plugin wird eine angepasste Version den Elfinder Dateimanagers zu Verfügung gestellt.

Bilder, die über den Custom-Elfinder im Plugin-Backend hochgeladen wurden, erhalten automatisch mehrere Größenvarianten sowie moderne Formate (AVIF, WebP). Für diese Bilder kann das srcset-Attribut automatisch generiert werden – es muss nicht manuell angegeben werden.

Für Bilder die über FTP hochgeladen werden oder schon vor der Plugininstallation vorhanden waren können die Bildgrößen unter Layout & Design > Performance > Source Sets, WebP und AVIF Bilder generieren

Die automatische Srcset-Attribut-Generierung wird durch den Parameter opc=true gesteuert. Beim Alias {responsiveImage} ist opc standardmäßig aktiviert. Beim Standard-Alias {image} muss opc=true explizit gesetzt werden.

{* Automatisches srcset – für Elfinder-Bilder empfohlen *}
{image
    src="/media/image/storage/opc/bild.jpeg"
    alt="Detailansicht des Produkts"
    opc=true
    lazy=true
    sizes="auto"
}

{* Automatisches srcset – responsiveImage setzt opc=true automatisch *}
{responsiveImage
    src="/media/image/storage/opc/bild.jpeg"
    alt="Detailansicht des Produkts"
    lazy=true
    sizes="auto"
}

Das sizes-Attribut

Das sizes-Attribut teilt dem Browser mit, wie breit das Bild bei unterschiedlichen Viewport-Breiten dargestellt wird. Es wird benötigt, damit der Browser den passenden Eintrag aus dem srcset auswählen kann.

Mit Lazy Loading: sizes="auto"

Wenn lazy=true gesetzt ist, kann sizes="auto" verwendet werden. Die Größe wird dann automatisch anhand der tatsächlich gerenderten Breite des Bildelements berechnet – kein manueller Wert nötig.

{image
    src=$bild
    alt="Beispiel"
    lazy=true
    sizes="auto"
    opc=true
}

Ohne Lazy Loading: sizes muss angegeben werden

Wird kein Lazy Loading verwendet und ist ein srcset vorhanden (manuell oder via opc), muss ein sizes-Attribut manuell angegeben werden, damit der Browser die richtige Bildgröße wählen kann.

{image
    src=$bild
    alt="Beispiel"
    sizes="(max-width: 768px) 100vw, 50vw"
    opc=true
}

Verwendungsbeispiele

Einfaches Produktbild

{image
    src=$product->Bilder[0]->cURLNormal
    alt=$product->cName
    fluid=true
}

Lazy-loaded Bild

{image
    src=$product->Bilder[0]->cURLNormal
    alt=$product->cName
    lazy=true
    nativeLazyLoading=true
}

Progressives Laden mit Unschärfe-Platzhalter

Zeigt sofort eine unscharfe Vorschau an und blendet das fertig geladene Bild sanft ein.

{image
    src=$product->Bilder[0]->cURLNormal
    progressiveLoading=$product->Bilder[0]->cURLMini
    progressivePlaceholder=true
    lazy=true
    alt=$product->cName
}

Hero-/Above-the-fold-Bild

Deaktiviertes Lazy Loading und fetchpriority="high" signalisiert dem Browser, dieses Bild bevorzugt zu laden.

{image
    src=$heroImage
    alt="Hero Banner"
    fetchpriority="high"
    fluid-grow=true
}

Elfinder-Bild mit automatischem Srcset

Beim hochladen im admorris Pro Backend über den Custom-Elfinder werden automatisch mehrere Größen und moderne Formate generiert. Mit opc=true wird das srcset automatisch erstellt, sodass der Browser die optimale Bildgröße auswählen kann.

{image
    src=$meinElfinderBild
    alt="Teaser"
    opc=true
    lazy=true
    sizes="auto"
}

Modernes Format deaktivieren

Für Bilder, die zwingend im Originalformat bleiben müssen (z. B. bestimmte Zahlungsart-Icons), weil kein webp/avif Bild vorliegt.

{image
    src=$paymentIcon
    alt="Zahlungsart"
    webp=false
}

Responsives Bild mit manuellem Srcset

{image
    src=$image->cURLNormal
    srcset="{$image->cURLKlein} 400w, {$image->cURLNormal} 800w, {$image->cURLGross} 1200w"
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 800px"
    alt=$product->cName
    lazy=true
}

Data- und ARIA-Attribute

{image
    src=$product->Bilder[0]->cURLNormal
    alt=$product->cName
    data=['product-id' => $product->kArtikel, 'gallery' => 'main']
    aria=['label' => 'Produktbild']
}

lazy vs. nativeLazyLoading – Wann was verwenden?

Hinweise

• Moderne Formate (AVIF, WebP) werden je nach Shop Einstellung generiert.
• Der Parameter webp steuert sowohl WebP als auch AVIF. webp=false deaktiviert beide modernen Formate gleichzeitig.
• Für bestimmte Bildpfade (OPC-Elemente, Video-Thumbnails, PayPal-Icons) werden moderne Formate automatisch deaktiviert – es ist kein manueller Eingriff nötig.