Bildkomponente (v1)

Die Kernkomponente „Bildkomponente“ ist eine anpassungsfähige Bildkomponente mit Funktionen zur Bearbeitung im Kontext.

Verwendung

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

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

VORSICHT

In diesem Dokument wird die Bildkomponente v1 beschrieben.

Weitere Informationen zur aktuellen Version der Bildkomponente finden Sie im Dokument Bildkomponente .

Musterkomponentenausgabe

Im Folgenden finden Sie ein Beispiel von We.Retail.

Screenshot

HTML

<div class="cmp cmp-image aem-GridColumn aem-GridColumn--default--12">
 
        <noscript data-cmp-image="{&#34;smartImages&#34;:[],&#34;smartSizes&#34;:[],&#34;lazyEnabled&#34;:true}">
            <img src="/content/we-retail/us/en/equipment/_jcr_content/root/responsivegrid/image.img.jpg" alt="Surfboard"/>
        </noscript>

</div>

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"
            }

HINWEIS

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.

Dialogfeld „Konfigurieren“

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 Darstellungen 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.
Alternativer Text - 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“

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 Zuschnitt 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.

HINWEIS

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.

Dialogfeld „Design“

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

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.

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.

Funktionen

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
- Drehen - Verwenden Sie diese Option, damit der Inhaltsautor die Option Nach Rechts drehen verwenden kann.
- Spiegeln
  Verwenden Sie diese Option, damit der Inhaltsautor die Optionen
  Horizontal spiegeln und Vertikal spiegeln verwenden kann.
VORSICHT

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.
VORSICHT

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

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.