Textüberlagerung text-overlay
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
Überblick overview
Textüberlagerung ist eine Funktion, die in AEM Screens verfügbar ist. Damit können Sie in einem Sequenzkanal ein fesselndes Erlebnis schaffen, indem Sie einen Titel oder eine Beschreibung über ein Bild legen.
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 verwendet und eingesetzt werden kann. Außerdem wird gezeigt, wie sie als Textüberlagerung in einem der Sequenzkanäle verwendet werden kann.
Verwenden von Textüberlagerung using-text-overlay
Im folgenden Abschnitt wird die Verwendung von Textüberlagerung in AEM Screens-Projekten beschrieben.
Voraussetzungen
Stellen Sie vor der Implementierung der Funktion sicher, dass Sie als Voraussetzung für den Start der Implementierung der Textüberlagerung ein Projekt eingerichtet haben. Zum Beispiel:
-
Erstellen Sie ein AEM Screens-Projekt (in diesem Beispiel TextOverlayDemo)
-
Erstellen eines Sequenzkanals mit dem Namen 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.
Gehen Sie wie folgt vor, um die Textüberlagerung in einem AEM Screens-Kanal zu verwenden:
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten.
-
Klicken Sie auf das Bild und dann auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld „Eigenschaften“ zu öffnen.
-
Klicken Sie in der Navigationsleiste des Dialogfelds auf die Option Textüberlagerung, wie in der folgenden Abbildung dargestellt.
Verstehen der Eigenschaften von Textüberlagerung understanding-text-overlay-properties
Mit den Eigenschaften der Textüberlagerung können Sie zu jeder Komponente in Ihrem Screens-Projekt Text hinzufügen. Im folgenden Abschnitt erhalten Sie eine Übersicht über die Eigenschaften, die in der Textüberlagerung verfügbar sind:
Sie können dem Textfeld einen Text hinzufügen und typografische Hervorhebungen wie fett, kursiv und unterstrichen hinzufügen.
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 können Benutzende den Text horizontal oder vertikal ausrichten oder zusätzlich fein abgestufte Werkzeuge für die Textausrichtung verwenden.
Verwenden von ContextHub-Werten in einer Textüberlagerung using-text-overlay-context-hub
Im folgenden Abschnitt wird die Verwendung von Werten aus einem Datenspeicher beschrieben, z. B. Google-Tabellen in der Komponente für Textüberlagerung.
Voraussetzungen
Erstellen Sie ContextHub-Konfigurationen für Ihr AEM Screens-Projekt.
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:
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Eigenschaften.
-
Klicken Sie auf die Registerkarte Personalisierung, um die ContextHub-Konfigurationen einzurichten.
-
Klicken Sie für den ContextHub-Pfad auf libs > settings > cloudsettings > default > ContextHub-Konfigurationen und dann auf Auswählen.
-
Klicken Sie für den Segmentpfad auf conf > screens > settings > wcm > segments und dann auf Auswählen.
-
Klicken Sie auf Speichern und schließen.
note note NOTE Verwenden Sie den ContextHub- und den Segmentpfad, in dem Sie Ihre Kontexthub-Konfigurationen und -Segmente anfänglich gespeichert haben. 
-
-
Navigieren Sie zu TextOverlayDemo > Kanäle > TextSample und klicken Sie in der Aktionsleiste auf Bearbeiten.
-
Fügen Sie eine Bild- und eine Textüberlagerungskomponente zu Ihrem Bild hinzu, wie im Abschnitt Verwenden von Textüberlagerung auf dieser Seite beschrieben.
-
Klicken Sie auf Konfigurieren (Schraubenschlüsselsymbol), um das Dialogfeld Bild zu öffnen.
-
Navigieren Sie zur Registerkarte ContextHub im Dialogfeld Bild. Klicken Sie auf Hinzufügen.
note note NOTE Wenn Sie Ihre ContextHub-Konfigurationen nicht eingerichtet haben, ist diese Option für Ihr Projekt deaktiviert. -
Geben Sie den Wert im Feld Platzhalter ein. Klicken Sie unter ContextHub-Variable auf die Zeile, aus der Sie den Wert aus Ihrer Google-Tabelle abrufen möchten. In diesem Fall wird der Wert aus Zeile 2 und Spalte 1 der Google-Tabellen abgerufen. Geben Sie nun den Standardwert als 20 ein, wie in der folgenden Abbildung dargestellt. Wenn Sie fertig sind, klicken Sie auf das Häkchen.
note note NOTE Für Ihre Referenz zeigt das folgende Bild den Wert an, der aus den Google-Tabellen abgerufen wird: 
-
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.
-
Klicken Sie auf Vorschau.
