Bildkomponente (v1) image-component-v
Die Kernkomponente „Bildkomponente“ ist eine anpassungsfähige Bildkomponente mit Funktionen zur Bearbeitung im Kontext.
Nutzung usage
Die Bildkomponente ermöglicht das einfache Platzieren von Bildmaterial und bietet die Möglichkeit zur direkten Bearbeitung. Es bietet eine anpassungsfähige Bildauswahl mit verzögertem Laden sowie Beschneiden für den Inhaltsautor.
Die zulässigen Bildbreiten sowie das Zuschneiden und zusätzliche Einstellungen können hier vom Vorlagenautor definiert werden Designdialogfeld. Der Inhaltseditor kann Assets im Dialogfeld „Konfigurieren“ hochladen oder auswählen und das Bild im Dialogfeld „Bearbeiten“ beschneiden. Für zusätzlichen Komfort ist auch eine einfache, ersetzende Änderung des Bildes verfügbar.
Version und Kompatibilität version-and-compatibility
In diesem Dokument wird v1 der Bildkomponente beschrieben, die ursprünglich mit Version 1.0.0 der Kernkomponenten mit AEM 6.3 eingeführt wurde.
In der folgenden Tabelle ist die Kompatibilität der Bildkomponente v1 aufgeführt.
Musterkomponentenausgabe sample-component-output
Im Folgenden finden Sie ein Beispiel von We.Retail.
Screenshot screenshot
HTML html
<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
<noscript data-cmp-image="{"smartImages":[],"smartSizes":[],"lazyEnabled":true}">
<img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
</noscript>
</div>
JSON json
"image": {
"columnClassNames": "aem-GridColumn aem-GridColumn--default--12",
"smartSizes": [],
"smartImages": [],
"lazyEnabled": true,
"src": "/content/we-retail/us/en/equipment/equipment/jcr%3acontent/root/responsivegrid/image.img.jpeg",
":type": "weretail/components/content/image"
}
Dialogfeld „Konfigurieren“ configure-dialog
Zusätzlich zum standardmäßigen Dialogfeld „Bearbeiten“ und zum Dialogfeld „Design“ bietet die Bildkomponente ein Dialogfeld für die Konfiguration, bei dem das Bild selbst mit seiner Beschreibung und den grundlegenden Eigenschaften definiert wird.
-
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.
-
Bild ist dekorativ – Überprüfen Sie, ob das Bild von Hilfstechnologien ignoriert werden soll und daher keinen alternativen Text erfordert. Dies gilt nur für dekorative Bilder.
-
Alternativtext - Textalternativen zur Bedeutung oder Funktion des Bildes für sehbeeinträchtigte Leser.
-
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.
-
Beschriftung - Zusätzliche Informationen über das Bild, die unter dem Bild angezeigt werden, sind standardmäßig verfügbar.
-
Beschriftung als Pop-up anzeigen - Wenn die Option aktiviert ist, wird die Beschriftung nicht unter dem Bild angezeigt, sondern von einigen Browsern als Pop-up, wenn der Mauszeiger über das Bild bewegt wird.
Dialogfeld „Bearbeiten“ edit-dialog
Das Dialogfeld „Bearbeiten“ ermöglicht dem Inhaltsautor das Zuschneiden, Ändern der Startkarte und das Zoomen des Bildes.
-
Zuschneiden beginnen
Wenn Sie diese Option auswählen, wird eine Dropdown-Liste für vordefinierte Zuschneideproportionen geöffnet.
- Wählen Sie die Option Freihand, um Ihre eigene Zuschnittsart zu definieren.
- Wählen Sie Beschnitt entfernen, um das ursprüngliche Asset anzuzeigen.
Nachdem Sie eine Zuschnittoption ausgewählt haben, verwenden Sie die blauen Griffe, um die Beschneidung auf dem Bild anzupassen.
-
Nach rechts drehen
Verwenden Sie diese Option, um das Bild um 90° nach rechts (im Uhrzeigersinn) zu drehen.
-
Startkarte
Verwenden Sie diese Option, um eine Startkarte auf das Bild anzuwenden. Wenn der Benutzer diese Option auswählt, wird ein neues Fenster geöffnet, in dem er die Form der Karte auswählen kann:
-
Rechteckige Karte hinzufügen
-
Kreisdiagramm hinzufügen
-
Polygon-Karte hinzufügen
- Standardmäßig wird eine Dreieckskarte hinzugefügt. Doppelklicken Sie auf eine Linie der Form, um zu einer neuen Seite einen neuen blauen Griff zur Größenanpassung hinzuzufügen.
Nachdem eine Karten-Form ausgewählt wurde, wird sie mit dem Bild überlagert, sodass die Größe geändert werden kenn. Ziehen Sie die blauen Größenänderungsgriffe per Drag-and-Drop, um die Form anzupassen.
Nachdem Sie die Größe der Startkarte angepasst haben, klicken Sie darauf, um eine schwebende Symbolleiste zu öffnen, um den Pfad des Links zu definieren.
-
Pfad
-
Verwenden Sie die Option „Pfadwähler“, um einen Pfad in AEM auszuwählen.
-
Wenn der Pfad sich nicht in AEM befindet, verwenden Sie die absolute URL. Nicht absolute Pfade werden relativ zu AEM interpretiert.
-
Alternativer Text
Alternative Beschreibung des Pfadziels -
Target
- Selbe Registerkarte
- Neue Registerkarte
- Übergeordneter Frame
- Top-Frame
-
Tippen oder klicken Sie auf das blaue Häkchen zum Speichern, auf das schwarze X zum Abbrechen oder auf den roten Papierkorb, um die Karte zu löschen.
-
-
Zoom zurücksetzen
Wenn das Bild bereits gezoomt wurde, verwenden Sie diese Option, um den Zoom-Grad zurückzusetzen.
-
Zoom-Regler öffnen
Mit dieser Option können Sie einen Schieberegler anzeigen, um den Zoom-Grad des Bildes zu steuern.
Der Editor für die Bearbeitung im Kontext kann auch zum Ändern des Bildes verwendet werden. Aus Platzgründen sind nur einfache Optionen inline verfügbar. Für vollständige Bearbeitungsoptionen verwenden Sie den Vollbildmodus.
Dialogfeld „Design“ design-dialog
Das Dialogfeld „Design“ ermöglicht dem Vorlagenautor die Definition von Zuschnitt, Upload und Rotations-Upload, die vom Inhalts-Autor bei der Verwendung dieser Komponente genutzt werden.
Allgemein main
In dieser Registerkarte Haupt können Sie eine Liste der zulässigen Breiten in Pixel definieren, damit das Bild automatisch die angemessenste Breite aus der Liste laden wird.
Tippen oder klicken Sie auf „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, um die Bilder schon beim Laden der Seite zu laden.
-
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.
Funktionen features
Auf der Registerkarte Funktionen können Sie festlegen, welche Optionen den Inhaltsautoren zur Verfügung stehen, wenn sie die Komponente verwenden, einschließlich Optionen fürs Hochladen, Ausrichtung und Beschneiden.
-
Web-optimierte Grafiken aktivieren: Wenn diese Option aktiviert ist, stellt der Web-optimierte Bildbereitstellungs-Service Bilder im WebP-Format bereit und reduziert so Bildgrößen durchschnittlich um 25 %.
- 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.
-
Quelle
Wählen Sie die Option Asset-Uploads aus Dateisystem zulassen, damit Inhaltsautoren Bilder von ihrem lokalen Computer hochladen können. Wenn Sie erzwingen möchten, dass Autoren nur Assets aus AEM auswählen, wählen Sie diese Option ab.
-
Ausrichtung
- Drehen - Verwenden Sie diese Option, damit der Inhaltsautor die Option Nach Rechts drehen verwenden kann.
- Spiegeln
Verwenden Sie diese Option, damit der Inhaltsautor die Option Horizontal spiegeln und Vertikal spiegeln verwenden kann.
note caution CAUTION Die Option Spiegeln ist standardmäßig deaktiviert. Durch Aktivieren werden im Dialogfeld „Bearbeiten“ der Bildkomponente die Felder Vertikal spiegeln und Horizontal spiegeln angezeigt. Die Funktion wird jedoch derzeit nicht von AEM unterstützt, und die Änderungen, die mit diesen Optionen vorgenommen werden, bleiben nicht erhalten. -
Beschneiden
Wählen Sie die Option Beschneiden zulassen aus, damit der Inhaltsautor das Bild in der Komponente im Dialogfeld „Bearbeiten“ beschneiden kann.
- Klicken Sie auf Hinzufügen, um ein vordefiniertes Bildseitenverhältnis hinzuzufügen.
- Geben Sie einen beschreibenden Namen ein, der im Dropdown-Menü Zuschneiden angezeigt wird.
- Geben Sie das numerische Seitenverhältnis des Bildes ein.
- Verwenden Sie die Ziehpunkte, um die Reihenfolge der Seitenverhältnisse neu anzuordnen.
- Verwenden Sie das Papierkorbsymbol, um ein Seitenverhältnis zu löschen.
note caution CAUTION Beachten Sie, dass die Beschneidungsverhältnisse als Höhe/Breite definiert sind. Dies unterscheidet sich von der herkömmlichen Definition als Breite/Höhe und erfolgt aus Gründen der Legacy-Kompatibilität. Den Inhaltsautoren wird kein Unterschied bewusst werden, solange Sie einen klaren Namen für das Verhältnis angeben, da nur der Name in der Benutzeroberfläche angezeigt wird und nicht das Verhältnis selbst.
Technische Details technical-details
Die aktuelle technische Dokumentation zur Bildkomponente finden Sie auf GitHub.
Das gesamte Kernkomponentenprojekt kann von GitHub heruntergeladen werden.
Weitere Informationen zur Entwicklung von Kernkomponenten finden Sie in der Dokumentation zu Kernkomponenten für Entwickler.