Teaser-Komponente

Die Kernkomponente Teaser-Komponente kann ein Bild, einen Titel, Rich-Text und optional einen Link zu weiteren Inhalten anzeigen.

Verwendung

Mit der Teaser-Komponente kann der Inhaltsautor problemlos einen Teaser für weitere Inhalte erstellen, indem er ein Bild, einen Titel oder einen Rich Text verwendet und Links zu weiteren Inhalten oder anderen Aktionen erstellt.

Der Vorlagenautor kann das Dialogfeld „Design“ verwenden, um zu definieren, ob die Optionen zum Erstellen von Aktionsaufrufen und zum Hinzufügen von Links verfügbar sind sowie verschiedene Anzeigeoptionen deaktivieren. Der Inhaltsautor kann das Dialogfeld „Konfigurieren“ verwenden, um ein Bild festzulegen, CTAs zu definieren, Titel und Beschreibungen festzulegen und Links zum jeweiligen Teaser zu konfigurieren. Es kann auf das Dialogfeld „Bearbeiten“ der Bild-Komponente zugegriffen werden, um das Bild des Teasers zu ändern.

Version und Kompatibilität

Die aktuelle Version der Teaser-Komponente ist v1, die mit Version 2.1.0 der Kernkomponenten im Juli 2018 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.

Musterkomponentenausgabe

Um die Teaser-Komponente sowie Beispiele für die Konfigurationsoptionen sowie HTML- und JSON-Ausgaben zu erhalten, besuchen Sie die Komponentenbibliothek.

Technische Details

Die aktuelle technische Dokumentation zur Teaser-Komponente finden Sie auf GitHub.

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

Dialogfeld „Konfigurieren“

Der Inhaltsautor kann das Dialogfeld „Konfigurieren“ verwenden, um die Eigenschaften des einzelnen Teasers zu definieren. Es gibt auch ein Dialogfeld „Bearbeiten“ zum Bearbeiten des Teaserbilds, wenn eines ausgewählt ist.

Bild

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

Text

• Vortitel – Der Vortitel wird vor dem Titel des Teasers angezeigt.
• Titel – Definiert einen Titel, der als Überschrift für den Teaser angezeigt wird.
  • Titel von verknüpfter Seite übernehmen – Bei Aktivierung dieser Option wird der Titel mit dem Titel der verknüpften Seite ausgefüllt.
• Beschreibung – Definiert eine Beschreibung, die als Unter-Überschrift für den Teaser angezeigt wird.
  • Beschreibung von verknüpfter Seite übernehmen – Bei Aktivierung dieser Option wird die Beschreibung mit der Beschreibung der verknüpften Seite ausgefüllt.
• 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 sicherzustellen, dass diese eindeutig ist.
  • Änderungen der ID können sich auf das CSS-, JS- und Datenschicht-Tracking auswirken.

Verknüpfung und Aktionen

• Verknüpfung – Link, der auf den Teaser angewendet wird. Verwenden Sie den Pfad-Browser, um das Link-Ziel auszuwählen.
• Aktionsaufrufe ermöglichen – Bei Aktivierung dieser Option können Aktionsaufrufe definiert werden. Der erste Link zu Aktionsaufrufen in der Liste wird als Link für andere Teaser-Elemente verwendet.

Dialogfeld „Bearbeiten“

Die Teaser-Komponente delegiert das Rendern von Bildern an die Bild-Komponente. Daher wird das [Dialogfeld „Bearbeiten“] dem Inhaltsautor zur Bearbeitung des Teaserbilds zur Verfügung gestellt.

Dialogfeld „Design“

Das Dialogfeld „Design“ ermöglicht es dem Vorlagenautor, die Teaser-Optionen zu definieren, die der Inhaltsautor bei Verwendung dieser Komponente hat.

Registerkarte „Teaser“

• Aktionsaufrufe
  • Aktionsaufrufe deaktivieren – Blendet die Option Aktionsaufrufe für Inhaltsautoren aus.
• Elemente
  • Vortitel ausblenden – Blendet die Option Vortitel für Inhaltsautoren aus.
  • Titel ausblenden – Blendet die Option Titel für Inhaltsautoren aus.
    • Bei Auswahl der Option wird der Titeltyp ausgeblendet.
  • Beschreibung ausblenden – Blendet die Option Beschreibung für Inhaltsautoren aus.
• Titeltyp – Definiert das H-Tag, das vom Titel des Teasers verwendet werden soll.
• Links
  • Bild nicht verknüpfen – Bei Auswahl dieser Option wird das Teaser-Bild nicht verknüpft.
  • Titel nicht verknüpfen – Bei Auswahl dieser Option wird der Teaser-Titel nicht verknüpft.
• Bilddelegat – Information, die anzeigt, an welche Komponente der Teaser die Bildverarbeitung delegiert.

Registerkarte „Stile“

Die Teaser-Komponente unterstützt das AEM-Stilsystem.