Textüberlagerung

In diesem Abschnitt werden folgende Themen behandelt:

  • Überblick
  • Verwenden von Textüberlagerung
  • Verstehen der Eigenschaften von Textüberlagerung
  • Verwenden von ContextHub-Werten in Textüberlagerung
ACHTUNG

Die Funktion Textüberlagerung ist nur verfügbar, wenn Sie AEM 6.3 Feature Pack 5 oder AEM 6.4 Feature Pack 3 installiert haben.

Überblick

Textüberlagerung ist eine Funktion in AEM Screens, mit der Sie in einem Sequenzkanal für ein überzeugendes Erlebnis sorgen können, indem Sie einen Titel oder eine Beschreibung auf einem Bild einfügen.

Informationen zum Erstellen einer eigenen benutzerdefinierten Komponente finden Sie unter Erweitern einer AEM Screens-Komponente.

In diesem Abschnitt wird nur gezeigt, wie die Poster-Komponente in einem AEM Screens-Projekt als Textüberlagerung in einem Ihrer Sequenz-Kanäle genutzt werden kann.

Verwenden von Textüberlagerung

Im folgenden Abschnitt wird die Verwendung von Textüberlagerung in AEM Screens-Projekten beschrieben.

Voraussetzungen

Bevor Sie mit der Implementierung der Funktion beginnen, stellen Sie sicher, dass Sie als Voraussetzung ein Projekt eingerichtet haben. Beispiel:

  • Erstellen Sie ein AEM Screens-Projekt (in diesem Beispiel TextOverlayDemo)

  • Erstellen eines Sequenzkanals als TextSample im Ordner Kanäle

  • Fügen Sie Inhalte zu Ihrem Kanal TextSample hinzu

Die folgende Abbildung zeigt das Projekt TextOverlayDemo mit dem Kanal TextSample im Ordner Kanäle.

screen_shot_2018-12-16at75908pm

Gehen Sie wie folgt vor, um die Textüberlagerung in einem AEM Screens-Kanal zu verwenden:

  1. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten, um den Editor zu öffnen.

    screen_shot_2018-12-16at80017pm

  2. Wählen Sie das Bild aus und klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld „Eigenschaften“ zu öffnen.

    screen_shot_2018-12-16at80221pm

  3. Wählen Sie in der Navigationsleiste des Dialogfelds die Option Textüberlagerung, wie in der folgenden Abbildung dargestellt.

    screen_shot_2018-12-16at80424pm

Verstehen der Eigenschaften von Textüberlagerung

Mithilfe der Eigenschaften für Textüberlagerung können Sie einer beliebigen Komponente in einem Screens-Projekt Text hinzufügen. Im folgenden Abschnitt erhalten Sie eine Übersicht über die Eigenschaften, die in der Textüberlagerung verfügbar sind:

text

Sie können dem Textfeld einen Text hinzufügen und typografische Hervorhebungen wie Fett, Kursiv, Unterstrichen usw. anwenden.

Farbvariante Mit dieser Option kann der Text entweder dunkel (Text in schwarzer Farbe) oder hell (Text in weißer Farbe) dargestellt werden.

Größe und Anordnung Mit dieser Option kann der Benutzer den Text horizontal oder vertikal ausrichten oder zusätzlich präzise Tools für die Textausrichtung verwenden.

Hinweis

Für einen richtigen Einsatz der Tools müssen Sie die gewünschte Position in Pixel mit „px“ als Suffix angeben (z. B. „200px“). Das Ergebnis dieses Ausdrucks ist 200 Pixel vom Anfangspunkt entfernt.

Verwenden von ContextHub-Werten in Textüberlagerung

Im folgenden Abschnitt wird die Verwendung von Werten aus einem Datenspeicher beschrieben, z. B. Google-Tabellen in der Komponente für Textüberlagerung.

Voraussetzungen

Sie müssen ContextHub-Konfigurationen für Ihr AEM Screens-Projekt einrichten.

Informationen zum Einrichten und Verwalten datengesteuerter Asset-Änderungen mithilfe eines Datenspeichers finden Sie unter Konfigurieren von ContextHub in AEM Screens.

Nachdem Sie die erforderlichen Konfigurationen für Ihr Projekt eingerichtet haben, führen Sie die folgenden Schritte aus, um Werte aus den Google-Tabellen zu verwenden:

  1. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Eigenschaften.

  2. Wählen Sie die Registerkarte Personalisierung, um die ContextHub-Konfigurationen einzurichten.

    1. Wählen Sie unter ContextHub-Pfad den Wert libs > settings > cloudsettings > default > ContextHub Konfigurationen aus und klicken Sie auf Auswählen.

    2. Wählen Sie unter Segmentpfad den Wert conf > screens > settings > wcm > segments aus und klicken Sie auf Auswählen.

    3. Klicken Sie auf Speichern und schließen.

      Hinweis

      Verwenden Sie den ContextHub- und den Segmentpfad, in dem Sie Ihre Kontexthub-Konfigurationen und -Segmente anfänglich gespeichert haben.

      image1

  3. Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten, um den Editor zu öffnen.

    image1

  4. Fügen Sie eine Bild- und eine Textüberlagerungskomponente zu Ihrem Bild hinzu, wie im Abschnitt Verwenden von Textüberlagerung auf dieser Seite beschrieben.

  5. Klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld Bild zu öffnen.

    image1

  6. Navigieren Sie zur Registerkarte ContextHub im Dialogfeld Bild. Klicken Sie auf Hinzufügen.

    Hinweis

    Wenn Sie Ihre ContextHub-Konfigurationen nicht eingerichtet haben, wird diese Option für Ihr Projekt deaktiviert.

  7. Geben Sie Wert in das Feld Platzhalter ein, wählen Sie die Zeile aus, die Sie aus Ihrer Google-Tabelle in der ContextHub-Variable abrufen möchten (in diesem Fall wird der Wert aus Zeile 2 und Spalte 1 aus den Google-Tabellen abgerufen), und geben Sie den Standardwert wie in der Abbildung unten dargestellt als 20 ein. Klicken Sie auf das Häkchen, sobald Sie fertig sind.

    image1

    Hinweis

    Für Ihre Referenz zeigt das folgende Bild den Wert an, der aus den Google-Tabellen abgerufen wird:

    image1

  8. Gehen Sie im Dialogfeld „Bild“ zurück zur Registerkarte Textüberlagerung und fügen Sie den Text Aktuelle Temperatur {Wert} hinzu, wie in der nachstehenden Abbildung dargestellt.

    image1

  9. Klicken Sie auf Vorschau, um die gewünschte Ausgabe anzuzeigen.

    image1

Auf dieser Seite