Show Menu
TOPICS×

Bildkomponente (v1)

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

Nutzung

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
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" }
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
    • Drop an asset from the asset browser or tap the
      browse
      option to upload from a local file system.
    • Tippen oder klicken Sie auf
      Löschen
      , um das aktuell ausgewählte Bild zu deaktivieren.
    • Tap or click
      Edit
      to mange the renditions of the asset in the asset editor.
  • 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, das schwarze x zum Abbrechen oder den roten Papierkorb, um die Karte zu löschen.
  • Zoom zurücksetzen
    Wenn das Bild bereits gezoomt wurde, verwenden Sie diese Option, um den Zoomgrad zurückzusetzen.
  • Zoom-Regler öffnen
    Mit dieser Option können Sie einen Schieberegler anzeigen, um den Zoomgrad 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.

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.

Haupt

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 Option
      Horizontal spiegeln
      und
      Vertikal spiegeln
      verwenden kann.
    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.
    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 neueste 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 von Kernkomponenten für Entwickler .