Die Kernkomponente „Bildkomponente“ ist eine anpassungsfähige Bildkomponente mit Funktionen zur Bearbeitung im Kontext.
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.
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.
AEM-Version | Bildkomponente v1 |
---|---|
6.3 | Kompatibel |
6.4 | Kompatibel |
In diesem Dokument wird die Bildkomponente v1 beschrieben.
Weitere Informationen zur aktuellen Version der Bildkomponente finden Sie im Dokument Bildkomponente.
Im Folgenden finden Sie ein Beispiel von We.Retail.
<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?lang=de" alt="Surfboard"/>
</noscript>
</div>
"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"
}
Für JSON-Exporte aus den Kernkomponenten ist Version 1.1.0 der Kernkomponenten erforderlich. Weitere Informationen finden Sie in den Kompatibilitätsinformationen für Kernkomponenten v1.
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
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
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.
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.
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
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.
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
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.
Bildbearbeitungsvorgänge (Beschneiden, Spiegeln, Drehen) werden für GIF-Bilder nicht unterstützt. Alle Änderungen, die im Bearbeitungsmodus an GIFs vorgenommen wurden, bleiben nicht bestehen.
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.
In dieser Registerkarte Allgemein 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.
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.
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.
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
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.
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.
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.