Bildkomponente

Die Bildkomponenten-Kernkomponente ist eine adaptive Bildkomponente.

Verwendung

Die Bildkomponente bietet adaptive Bildauswahl und responsives Verhalten mit verzögertem Laden für den Seitenbesucher bzw. die Seitenbesucherin sowie einfache Bildplatzierung für den Inhaltsautor bzw. die Inhaltsautorin.

Die Bildbreiten sowie zusätzliche Einstellungen können vom Vorlagenautor im Dialogfeld „Design“ definiert werden. Der Inhaltseditor kann Elemente im Dialogfeld „Konfigurieren“ hochladen oder auswählen.

Version und Kompatibilität

Die aktuelle Version der Bildkomponente ist v3, die mit Version 2.18.0 der Kernkomponenten im Februar 2022 eingeführt wurde und in diesem Dokument beschrieben wird.

Die folgende Tabelle enthält alle unterstützten Versionen der Komponente, die AEM-Versionen, mit denen die Versionen der Komponente kompatibel sind, sowie Links zur Dokumentation für frühere Versionen.

Weitere Informationen zu Kernkomponentenversionen und -freigaben finden Sie in den Kernkomponentenversionen.

Responsive Funktionen

Die Bildkomponente verfügt über robuste responsive Funktionen, die direkt sofort bereitgestellt werden können. Auf der Seitenvorlagenebene kann das Design-Dialogfeld verwendet werden, um die Standardbreiten des Bild-Assets zu definieren. Die Bildkomponente lädt dann automatisch die korrekte Breite, die je nach Größe des Browserfensters angezeigt wird. Wenn die Größe des Fensters geändert wird, lädt die Bildkomponente die korrekte Bildgröße dynamisch. Komponentenentwickler müssen sich keine Gedanken darüber machen, wie sie benutzerdefinierte Medienabfragen definieren, da die Bildkomponente bereits optimiert ist, um Ihren Inhalt zu laden.

Darüber hinaus unterstützt die Bildkomponente verzögertes Laden, um das Laden des tatsächlichen Bild-Assets zu verzögern, bis es im Browser sichtbar ist, wodurch die Reaktionsgeschwindigkeit Ihrer Seiten zunimmt.

Dynamic Media-Unterstützung

Die Bildkomponente (ab Version 2.13.0) unterstützt Dynamic Media-Assets. Wenn diese Funktionen aktiviert sind, können Sie Dynamic Media-Bild-Assets per Drag-and-Drop oder über den Assets-Browser hinzufügen, wie Sie es mit jedem anderen Bild tun würden. Darüber hinaus werden auch Bild-Modifikatoren, Bildvorgaben und Smartes Zuschneiden unterstützt.

Ihre mit Kernkomponenten erstellten Web-Erlebnisse können jetzt funktionsreiche, Sensei-gestützte, robuste, leistungsstarke und plattformübergreifende Dynamic Media-Bildfunktionen enthalten.

SVG-Unterstützung

Skalierbare Vektorgrafiken (SVG) werden von der Bildkomponente unterstützt.

• Das Drag-and-Drop eines SVG-Assets aus DAM und das Hochladen eines SVG-Datei-Uploads aus einem lokalen Dateisystem werden beide unterstützt.
• Die ursprüngliche SVG-Datei wird gestreamt (Transformationen werden übersprungen).
• Bei einem SVG-Bild werden die „Smart-Bilder“ und die „Smart-Größen“ auf ein leeres Array im Bildmodell festgelegt.

Sicherheit

Aus Sicherheitsgründen wird die ursprüngliche SVG niemals direkt vom Bild-Editor aufgerufen. Es wird durch <img src=“path-to-component”> aufgerufen. Dadurch wird verhindert, dass der Browser Skripte ausführt, die in der SVG-Datei eingebettet sind.

Muster für Komponentenausgabe

Um die Bildkomponente zu erleben und Beispiele für ihre Konfigurationsoptionen sowie die HTML- und JSON-Ausgabe zu sehen, besuchen Sie die Komponentenbibliothek.

Technische Details

Die aktuelle technische Dokumentation zur Bildkomponente finden Sie auf GitHub.

Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.

Die Bildkomponente unterstützt Schema.org-Mikrodaten.

Dialogfeld „Konfigurieren“

Die Bildkomponente bietet ein Dialogfeld zum Konfigurieren, in dem das Bild selbst zusammen mit seiner Beschreibung und den grundlegenden Eigenschaften definiert ist.

Registerkarte „Asset“

• Vorgestelltes Bild von Seite übernehmen – Diese Option verwendet das vorgestellte Bild der verknüpften Seite oder das vorgestellte Bild der aktuellen Seite, wenn das Bild nicht verknüpft ist.

• Alternativtext für Barrierefreiheit – In diesem Feld können Sie eine Beschreibung des Bildes für sehbehinderte Benutzer definieren.

  • Alternativtext von Seite übernehmen – Diese Option verwendet die alternative Beschreibung des verknüpften Asset-Werts der dc:description-Metadaten in DAM oder der aktuellen Seite, wenn kein Asset verknüpft ist.

• Bild-Asset

  • Ziehen Sie ein Asset aus dem Asset-Browser oder tippen Sie auf die Option Durchsuchen, um es von einem lokalen Dateisystem hochzuladen.
  • Tippen oder klicken Sie auf Löschen, um das aktuell ausgewählte Bild zu deaktivieren.
  • Tippen oder klicken Sie auf Bearbeiten, um die Ausgabedarstellungen des Assets im Asset-Editor zu verwalten.

• Keinen Alternativtext angeben – Mit dieser Option wird das Bild so markiert, dass es von unterstützenden Technologien wie Bildschirmlesegeräten ignoriert wird, wenn das Bild rein dekorativ ist oder sonst keine zusätzlichen Informationen für die Seite liefert.

Registerkarte „Metadaten“

• Vorgabetyp – Hier wird der Typ der verfügbaren Bildvorgaben festgelegt, entweder Bildvorgabe oder Smartes Zuschneiden. Dies ist nur verfügbar, wenn die Dynamic Media-Funktionen aktiviert sind.
  • Bildvorgabe – Wenn der Vorgabetyp Bildvorgabe ausgewählt ist, ist die Dropdown-Liste Bildvorgabe verfügbar, sodass aus den verfügbaren Dynamic Media-Vorgaben ausgewählt werden kann. Dies ist nur verfügbar, wenn für das ausgewählte Asset Vorgaben definiert sind.
  • Smartes Zuschneiden – Wenn der Vorgabetyp Smartes Zuschneiden ausgewählt ist, ist die Dropdown-Liste Ausgabedarstellung verfügbar, sodass aus den verfügbaren Ausgabedarstellungen des ausgewählten Assets werden kann. Dies ist nur verfügbar, wenn für das ausgewählte Asset Ausgabedarstellungen definiert sind.
  • Bild-Modifikatoren – Hier können zusätzliche Befehle zur Dynamic Media-Bildbereitstellung definiert werden, die durch & getrennt sind, unabhängig davon, welcher Vorgabetyp ausgewählt ist.
• Beschriftung – Zusätzliche Informationen über das Bild, die standardmäßig unter dem Bild angezeigt werden.
  • Beschriftung aus DAM abrufen – Wenn die Option aktiviert ist, wird der Beschriftungstext des Bildes mit dem Wert der dc:title-Metadaten in DAM gefüllt.
  • Beschriftung als Pop-up anzeigen – Wenn die Option aktiviert ist, wird die Beschriftung nicht unter dem Bild angezeigt, sondern von einigen Browsern als Popup, wenn der Mauszeiger über das Bild bewegt wird.
• Verknüpfung – Verknüpfen Sie das Bild mit einer anderen Ressource.
  • Verwenden Sie das Dialogfeld „Auswahl“, um eine Verknüpfung zu einer anderen AEM-Ressource herzustellen.
  • Geben Sie die absolute URL ein, wenn Sie keine Verknüpfung zu einer AEM-Ressource erstellen. Nicht absolute URLs werden als relativ zu AEM interpretiert.
  • Link in neuer Registerkarte öffnen – Mit dieser Option wird der Link in einem neuen Browser-Fenster geöffnet.
• ID – Diese Option dient zur Kontrolle der eindeutigen Kennung der Komponente in der HTML-Datei und auf der Datenschicht.
  • Wenn Sie das Feld leer lassen, wird automatisch eine eindeutige ID generiert, die Sie über die resultierende Seite finden.
  • Sofern eine ID angegeben wird, ist vom Autor bzw. der Autorin sicherzustellen, dass diese eindeutig ist.
  • Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.

Registerkarte „Arten“

Die Bildkomponente unterstützt das AEM-Stilsystem.

Verwenden Sie das Dropdown-Menü, um die Stile auszuwählen, die Sie auf die Komponente anwenden möchten. Die im Dialogfeld „Bearbeiten“ vorgenommenen Auswahlen haben denselben Effekt wie die in der Komponenten-Symbolleiste ausgewählten.

Stile müssen für diese Komponente im Dialogfeld „Design“ konfiguriert werden, damit das Dropdown-Menü verfügbar ist.

Dialogfeld „Design“

Registerkarte „Haupt“

• DM-Funktionen aktivieren – Wenn diese Option aktiviert ist, sind die Dynamic Media-Funktionen verfügbar.
  • Diese Option wird nur angezeigt, wenn „Dynamic Media“ in der Umgebung aktiviert ist.
• Web-optimierte Grafiken aktivieren – Wenn diese Option aktiviert ist, liefert der Web-optimierte Bildbereitstellungs-Service Bilder im WebP-Format. Dadurch wird die Bildgröße durchschnittlich um 25 % verringert.
  • Diese Option ist nur in AEMaaCS verfügbar.
  • Wenn diese Option deaktiviert ist oder der Web-optimierte Bildbereitstellungs-Service nicht verfügbar ist, wird das Adaptive Image Servlet verwendet.
• Lazy Loading deaktivieren – Wenn diese Option aktiviert ist, lädt die Komponente alle Bilder vorab, ohne dass das Laden verzögert wird.
• Bild ist dekorativ – Festlegen, ob die Option für dekorative Bilder automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.
• Alternativtext von DAM abrufen - Festlegen, ob die Option zum Abrufen des Alternativtexts aus DAM automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.
• Beschriftung aus DAM abrufen – Festlegen, ob die Option zum Abrufen der Beschriftung aus DAM automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.
• Beschriftung als Pop-up anzeigen – Festlegen, ob die Option zum Anzeigen der Bildbeschriftung als Popup automatisch aktiviert ist, wenn die Bildkomponente einer Seite hinzugefügt wird.
• Breite ändern – Dieser Wert wird verwendet, um die Breite der Basisbilder zu ändern, die DAM-Assets sind.
  • Das Seitenverhältnis der Bilder wird beibehalten.
  • Wenn der Wert größer ist als die tatsächliche Breite des Bildes, hat dieser Wert keine Auswirkung.
  • Dieser Wert hat keine Auswirkungen auf SVG-Bilder.

Sie können eine Liste von Breiten in Pixeln für das Bild definieren, und die Komponente lädt, basierend auf der Browser-Größe, automatisch die am besten geeignete Breite. Dies ist ein wichtiger Teil der responsiven Funktionen der Bildkomponente.

• Breiten – Definiert eine Liste der Breiten in Pixel für das Bild und die Komponente lädt automatisch die passende Breite basierend auf der Größe des Browsers.
  • Tippen oder klicken Sie auf die Schaltfläche Hinzufügen, um eine weitere Größe hinzuzufügen.
    • Verwenden Sie die Griffpunkte, um die Reihenfolge der Größen neu anzuordnen.
    • Verwenden Sie das Symbol Löschen, um eine Breite zu entfernen.
  • Standardmäßig wird das Laden von Bildern verzögert, bis sie sichtbar werden.
    • Wählen Sie die Option Lazy Loading deaktivieren aus, um die Bilder schon beim Laden der Seite zu laden.
• JPEG-Qualität – Der Qualitätsfaktor (in Prozent von 0 bis 100) für umgewandelte (z. B. skalierte oder zugeschnittene) JPEG-Bilder.

Registerkarte „Arten“

Die Bildkomponente unterstützt das AEM-Stilsystem.

Adobe Client-Datenschicht

Die Bildkomponente unterstützt die Adobe Client-Datenschicht.

Ressourcen für Business.Adobe.com