Hinzufügen von Dynamic Media-Assets zu Seiten

Um die dynamische Medienfunktion zu Assets hinzuzufügen, die Sie auf Ihren Websites verwenden, können Sie die Komponente Dynamic Media oder Interaktive Medien direkt auf der Seite hinzufügen. Wechseln Sie dazu in den Layoutmodus und aktivieren Sie die Komponenten vom Typ „Dynamische Medien“. Anschließend können Sie der Seite diese Komponenten und der Komponente Assets hinzufügen. „Dynamische Medien“ und „Interaktive Medien“ sind intelligente Komponenten, die erkennen, ob Sie ein Bild oder ein Video hinzufügen. Die verfügbaren Optionen werden entsprechend angepasst.

Sie können dynamische Medienelemente direkt zur Seite hinzufügen, wenn Sie AEM als WCM verwenden. Wenn Sie einen Drittanbieter für Ihr WCM verwenden, verknüpfen Sie Ihre Assets oder betten Sie sie ein. Eine responsive Website von Drittanbietern finden Sie unter Bereitstellen optimierter Bilder für eine responsive Site.

HINWEIS

Sie müssen Assets veröffentlichen, um sie Seiten in AEM hinzufügen zu können. Siehe Veröffentlichen von Dynamic Media-Assets.

Hinzufügen einer Dynamic Media-Komponente zu einer Seite

Das Hinzufügen einer Dynamic Media-Komponente zu einer Seite entspricht dem Hinzufügen einer Komponente zu einer beliebigen Seite. Die Dynamic Media-Komponenten werden in den folgenden Abschnitten ausführlich beschrieben.

HINWEIS

Wenn eine Dynamic Media-Komponente auf einer Webseite vorhanden ist, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.

Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.

  1. Öffnen Sie in AEM die Seite, auf der Sie die Dynamic Media-Komponente hinzufügen möchten.

  2. Klicken Sie im Bedienfeld auf der linken Seite der Seite (möglicherweise müssen Sie die Anzeige des Seitenbedienfelds umschalten) auf das Symbol Komponenten.

  3. Wählen Sie unter der Überschrift Components in der Dropdown-Liste Dynamic Media. Wenn keine Liste der Dynamic Media-Komponenten verfügbar ist, müssen Sie wahrscheinlich die zu verwendenden Dynamic Media-Komponenten aktivieren. Informationen hierzu finden Sie unter Aktivieren von Dynamic Media-Komponenten.

    chlimage_1-537

  4. Ziehen Sie eine Dynamic Media-Komponente, die Sie verwenden möchten, an die gewünschte Position auf der Seite.

  5. Bewegen Sie den Mauszeiger direkt über die Komponente. Wenn die Komponente blau hervorgehoben wird, tippen Sie einmal darauf, um die Symbolleiste der Komponente anzuzeigen. Tippen Sie auf das Symbol ​Konfiguration (Schraubenschlüssel).

  6. Bearbeiten Sie die Komponenten nach Bedarf und klicken Sie auf das Häkchen, um die Änderungen zu speichern.

Aktivieren von Dynamic Media-Komponenten

Wenn keine Dynamic Media-Komponenten zum Hinzufügen zu einer Seite verfügbar sind, bedeutet dies wahrscheinlich, dass Sie zunächst die zu verwendenden Komponenten aktivieren müssen.

  1. Öffnen Sie in AEM die Seite, auf der Sie die Dynamic Media-Komponente hinzufügen möchten.

  2. Tippen Sie links oben auf der Seite in der Symbolleiste auf das Symbol „Seiteninformationen“ und dann in der Dropdown-Liste auf Vorlage bearbeiten.

    edit-template

  3. Tippen Sie oben rechts auf der Seite in der Symbolleiste in der Dropdown-Liste auf Struktur.

    Richtlinie

  4. Tippen Sie unten auf der Seite auf Layout-Container, um die Symbolleiste zu öffnen. Tippen Sie anschließend auf das Symbol „Richtlinie“.

  5. Stellen Sie auf der Seite Layout-Container unter der Überschrift Eigenschaften sicher, dass die Registerkarte Zugelassene Komponenten ausgewählt ist.

    Zugelassene Komponenten

  6. Scrollen Sie nach unten, bis Dynamic Media angezeigt wird.

  7. Tippen Sie links neben Dynamic Media auf „>“, um die Liste zu erweitern, und wählen Sie die Dynamic Media-Komponenten aus, die Sie aktivieren möchten.

    Liste der Dynamic Media-Komponenten

  8. Tippen Sie rechts oben auf der Seite Layout-Container auf das Symbol „Fertig“ (Häkchen).

  9. Tippen Sie oben rechts auf der Seite in der Symbolleiste in der Dropdown-Liste auf Anfänglicher Inhalt und fügen Sie dann wie gewohnt eine Dynamic Media-Komponente zu einer Seite hinzu.

Lokalisieren von Dynamic Media-Komponenten

Zum Lokalisieren von Dynamic Media-Komponenten stehen Ihnen zwei Möglichkeiten zur Verfügung:

  • Öffnen Sie auf einer Web-Seite unter „Sites“ die Option Eigenschaften und wählen Sie die Registerkarte Erweitert aus. Wählen Sie die gewünschte Sprache für die Lokalisierung aus.

    chlimage_1-538

  • Wählen Sie über den Site-Selector die gewünschte Seite oder Seitengruppe aus. Tippen Sie auf Eigenschaften und wählen Sie die Registerkarte Erweitert aus. Wählen Sie die gewünschte Sprache für die Lokalisierung aus.

    HINWEIS

    Nicht allen im Menü Sprache verfügbaren Sprachen sind derzeit Tokens zugewiesen.

Dynamic Media-Komponenten

Dynamic Media und Interaktive Medien sind auf der Registerkarte Dynamic Media unter Komponenten verfügbar. Verwenden Sie die Komponente Interaktive Medien für beliebige interaktive Assets wie interaktive Videos, interaktive Bilder oder Karussell-Sets. Verwenden Sie für alle anderen Komponenten vom Typ „Dynamische Medien“ die Komponente Dynamische Medien.

HINWEIS

Diese Komponenten sind nicht standardmäßig verfügbar und müssen zunächst über den Vorlagen-Editor bereitgestellt werden. Nachdem sie im Vorlageneditor zur Verfügung gestellt wurden, können Sie die Komponenten wie jede andere AEM-Komponente Ihrer Seite hinzufügen.

chlimage_1-539

Komponente „Dynamische Medien“

Die Dynamic Media-Komponente ist intelligent. Je nachdem, ob Sie ein Bild oder ein Video hinzufügen, stehen Ihnen verschiedene Optionen zur Verfügung. Die Komponente unterstützt Bildvorgaben, bildbasierte Viewer wie Bildsets sowie Rotationssets, Sets für gemischte Medien und Videos. Darüber hinaus reagiert der Viewer. Das heißt, die Bildschirmgröße ändert sich automatisch je nach Bildschirmgröße. Bei allen Viewern handelt es sich um HTML5-Viewer.

HINWEIS

Wenn eine Dynamic Media-Komponente, eine interaktive Medienkomponente oder beide auf einer Webseite vorhanden sind, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.

Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.

HINWEIS

Wenn Sie die Dynamic Media-Komponente hinzufügen und Einstellungen für Dynamic Media leer ist, ist es nicht möglich, ein Asset ordnungsgemäß hinzuzufügen. Überprüfen Sie Folgendes:

  • Sie Dynamic Media aktiviert haben. Dynamic Media ist standardmäßig deaktiviert.
  • das Bild eine Pyramid TIFF-Datei aufweist. Bilder, die vor der Aktivierung von Dynamic Media importiert wurden, verfügen nicht über eine Pyramid TIFF-Datei.

Arbeiten mit Bildern

Mit der Komponente „Dynamic Media“ können Sie dynamische Bilder, einschließlich Bildsets, Rotationssets und Sets für gemischte Medien, hinzufügen. Sie können Vergrößerungen sowie Verkleinerungen vornehmen und (sofern zutreffend) ein Bild in einem Rotationsset drehen oder ein Bild aus einem anderen Set auswählen.

Sie können zudem die Viewer-Vorgabe, Bildvorgabe oder das Bildformat direkt in der Komponente konfigurieren. Um ein Bild dynamisch zu machen, können Sie die Haltepunkte festlegen oder eine dynamische Bildvorgabe anwenden.

Sie müssen die folgenden Dynamic Media-Einstellungen bearbeiten, indem Sie in der Komponente auf das Symbol Bearbeiten und dann auf Dynamic Media-Einstellungen klicken.

dm-settings-image-preset

HINWEIS

Standardmäßig ist die Bildkomponente für Dynamic Media adaptiv. Wenn Sie eine feste Größe festlegen möchten, legen Sie sie in der Komponente auf der Registerkarte Erweitert mit den Einstellungen Breite und Höhe fest.

  • Viewer-
    VorgabeWählen Sie eine vorhandene Viewer-Vorgabe aus dem Dropdown-Menü. Wenn die gewünschte Viewer-Vorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Siehe „Verwalten von Viewer-Vorgaben“. Es ist nicht möglich, eine Viewer-Vorgabe auszuwählen, wenn Sie eine Bildvorgabe verwenden, und umgekehrt.
    Dies ist die einzig verfügbare Option beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien. Die angezeigten Viewer-Vorgaben sind ebenfalls intelligent – es werden nur relevante Viewer-Vorgaben angezeigt.

  • Viewer-
    ModifikatorenViewer-Modifikatoren haben die Form eines "name=value"-Paars mit einem &-Trennzeichen und ermöglichen das Ändern von Viewern, wie im Viewer-Referenzhandbuch beschrieben. Ein Beispiel für einen Viewer-Modifikator ist posterimage=img.jpg&caption=text.vtt,1, der ein anderes Bild für die Videominiatur festlegt und eine Untertiteldatei mit dem Video verknüpft.

  • Bildvorgabe
    Wählen Sie eine vorhandene Bildvorgabe aus dem Dropdown-Menü. Wenn die gewünschte Bildvorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Siehe „Verwalten von Bildvorgaben“. Es ist nicht möglich, eine Viewer-Vorgabe auszuwählen, wenn Sie eine Bildvorgabe verwenden, und umgekehrt.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

  • Bildmodifikatoren:
    Sie können Bildeffekte anwenden, indem Sie zusätzliche Bildbefehle bereitstellen. Diese werden unter „Bildvorgaben“ und in der Referenz zum Image-Serving-Befehl beschrieben.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.


  • HaltepunkteWenn Sie dieses Asset auf einer responsiven Site verwenden, müssen Sie die Bild-Haltepunkte hinzufügen. Bildhaltepunkte müssen durch Kommas (,) voneinander getrennt werden. Diese Option kann verwendet werden, wenn in einer Bildvorgabe keine Höhe oder Breite festgelegt ist.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.
    Sie können die folgenden erweiterten Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

  • Titel
    Ändern Sie den Titel des Bilds.

  • Alt
    TextFügen Sie dem Bild einen Titel für Benutzer hinzu, die Grafiken deaktiviert haben.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

  • URL, Öffnen
    inSie können ein Asset so einstellen, dass ein Link geöffnet wird. Legen Sie die URL fest. Geben Sie in „Öffnen in“ an, ob der Link im selben oder einem neuen Fenster geöffnet werden soll.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

  • ​Breite und
    HöheGeben Sie den Wert in Pixel ein, wenn das Bild eine feste Größe haben soll. Wenn die Werte leer gelassen werden, ist das Asset adaptiv.

Arbeiten mit Videos

Verwenden Sie die Dynamic Media-Komponente, um Ihren Web-Seiten dynamische Videos hinzuzufügen. Beim Bearbeiten der Komponente können Sie eine vordefinierte Video-Viewer-Vorgabe für das Wiedergeben des Videos auf der Seite verwenden.

chlimage_1-540

Sie müssen die folgenden Dynamic Media-Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

HINWEIS

Die Videokomponente für Dynamic Media ist standardmäßig adaptiv. Wenn sie eine feste Größe aufweisen soll, müssen Sie dies in der Komponente auf der Registerkarte Erweitert mit Breite und Höhe festlegen.

  • Viewer-
    VorgabeWählen Sie eine vorhandene Video-Viewer-Vorgabe aus dem Dropdown-Menü. Wenn die gewünschte Viewer-Vorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Siehe „Verwalten von Viewer-Vorgaben“.

  • Viewer-
    ModifikatorenViewer-Modifikatoren haben die Form eines "name=value"-Paars mit einem &-Trennzeichen und ermöglichen das Ändern von Viewern, wie im Viewer-Referenzhandbuch für Adoben beschrieben. Ein Beispiel für einen Viewer-Modifikator ist posterimage=img.jpg&caption=text.vtt,1.

    Mit Viewer-Modifikatoren können Sie beispielsweise Folgendes ausführen:

    • Verknüpfen Sie eine Untertiteldatei mit einem Video caption.
    • Verknüpfen Sie eine Navigationsdatei mit einem Video Navigation.

Sie können die folgenden Erweiterte Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

  • Titel
    Ändern Sie den Titel des Videos.

  • ​Breite und
    HöheGeben Sie den Wert in Pixel ein, wenn das Video eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.

Bei der Arbeit mit smartem Zuschneiden

Verwenden Sie die Dynamic Media-Komponente, um Bild-Assets für smartes Zuschneiden zu Ihren Web-Seiten hinzuzufügen. Beim Bearbeiten der Komponente können Sie eine vordefinierte Video-Viewer-Vorgabe für das Wiedergeben des Videos auf der Seite verwenden.

Weitere Informationen finden Sie unter Bildprofile.

dm-settings-smart-cut

Sie können die folgenden Dynamic Media-Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

HINWEIS

Standardmäßig ist die Bildkomponente für Dynamic Media adaptiv. Wenn Sie eine feste Größe einrichten möchten, legen Sie sie auf der Registerkarte Erweitert in der Komponente mit der Breite und Höhe fest.

  • Bildmodifikatoren:
    Sie können Bildeffekte anwenden, indem Sie zusätzliche Bildbefehle bereitstellen. Diese werden unter „Bildvorgaben“ und in der Referenz zum Image-Serving-Befehl beschrieben.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

Sie können die folgenden Erweitert Einstellungen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.


  • TitelÄndern Sie den Titel des Smart-Schnittbilds.

  • Alt-
    TextFügen Sie dem Bild für intelligente Beschneidung einen Titel für Benutzer hinzu, die Grafiken deaktiviert haben.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

  • URL, Öffnen
    inSie können ein Asset so einstellen, dass ein Link geöffnet wird. Legen Sie die URL fest. Geben Sie in „Öffnen in“ an, ob der Link im selben oder einem neuen Fenster geöffnet werden soll.
    Diese Option ist beim Anzeigen von Bildsets, Rotationssets oder Sets für gemischte Medien nicht verfügbar.

  • ​Höhe und
    BreiteGeben Sie den Wert in Pixel ein, wenn das Bild für die intelligente Beschneidung eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.

Komponente für interaktive Medien

Die Komponente „Interaktive Medien“ ist für Assets mit interaktiven Elementen wie Hotspots oder Imagemaps vorgesehen. Verwenden Sie bei interaktiven Bildern, interaktiven Videos oder Karussellbannern die Komponente Interaktive Medien.

Die Komponente "Interaktive Medien"ist intelligent. Je nachdem, ob Sie ein Bild oder ein Video hinzufügen, stehen Ihnen verschiedene Optionen zur Verfügung. Zudem ist der Viewer dynamisch. Die Größe des Bildschirms ändert sich demnach automatisch auf Grundlage der Bildschirmgröße. Bei allen Viewern handelt es sich um HTML5-Viewer.

HINWEIS

Wenn eine Dynamic Media-Komponente, eine interaktive Medienkomponente oder beide auf einer Webseite vorhanden sind, auf die ein Benutzer mit schreibgeschützten Berechtigungen zugreift, werden die Seitenumbrüche und die Komponenten nicht korrekt dargestellt. Der Grund dafür ist, dass die Seite rekonstruiert wurde, um sicherzustellen, dass die Eigenschaften der Komponenten gut sind und alle referenzierten Assets und Konfigurationen verfügbar sind. Die Seite wird dann erneut gerendert und die Komponenten werden umgebrochen. Der entsprechende Komponentencode auf der Seite kann aufgrund des schreibgeschützten Zugriffs des Benutzers nicht erneut gerendert werden.

Um dieses Problem zu vermeiden, müssen Sie sicherstellen, dass AEM Sites-Benutzer über die erforderlichen Berechtigungen zum Zugriff auf die Assets verfügen.

chlimage_1-541

Sie können die folgenden allgemeinen Einstellungen ​bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

  • Viewer-
    VorgabeWählen Sie eine vorhandene Viewer-Vorgabe aus dem Dropdown-Menü. Wenn die gewünschte Viewer-Vorgabe nicht sichtbar ist, müssen Sie sie möglicherweise sichtbar machen. Viewer-Vorgaben müssen veröffentlicht werden, bevor sie verwendet werden können. Siehe „Verwalten von Viewer-Vorgaben“.

  • Titel
    Ändern Sie den Titel des Videos.

  • ​Breite und
    HöheGeben Sie den Wert in Pixel ein, wenn das Video eine feste Größe haben soll. Wenn die Werte leer gelassen werden, wird es adaptiv.

Sie können die folgenden Einstellungen von Zu Warenkorb hinzufügen bearbeiten, indem Sie in der Komponente auf Bearbeiten klicken.

  • Produkt-
    Asset anzeigenStandardmäßig ist dieser Wert ausgewählt. Das Produkt-Asset zeigt ein Bild des Produkts, wie im Commerce-Modul definiert. Deaktivieren Sie das Kontrollkästchen, um das Produkt-Asset nicht anzuzeigen.

  • "
    Produktpreis anzeigen"Standardmäßig ist dieser Wert ausgewählt. Der Produktpreis gibt den Preis des Artikels an, wie im Commerce-Modul definiert. Deaktivieren Sie das Kontrollkästchen, um den Produktpreis nicht anzuzeigen.

  • Produkt-
    Form anzeigen Standardmäßig ist dieser Wert nicht ausgewählt. Das Produktformular beinhaltet jegliche Produktvarianten, etwa hinsichtlich der Größe und der Farbe. Deaktivieren Sie das Kontrollkästchen, um die Produktvarianten nicht anzuzeigen.

Panoramamedienkomponente

Die Panoramamedienkomponente bezieht sich auf Kugelpanoramen. Solche Bilder bieten ein 360°-Zuschauererlebnis eines Raums, einer Immobile, eines Ortes oder einer Landschaft. Damit ein Bild als Kugelpanorama gilt, muss MINDESTENS eine der beiden folgenden Eigenschaften zutreffen:

  • Ein Seitenverhältnis von 2:1.
  • Mit den Keywords „equirectangular“ oder („spherical“ und „panorama“) oder („spherical“ und „panoramic“) als Tags versehen. Weitere Informationen finden Sie unter Verwenden von Tags.

Die Kriterien für das Seitenverhältnis sowie die Keywords gelten für Panorama-Assets für die Asset-Detailseite und die WCM-Komponente „Panoramamedien“.

panoramic-media-viewer-preset

Sie können die folgenden erweiterten Einstellungen bearbeiten, indem Sie in der Komponente auf Konfigurieren tippen.

  • Viewer-
    VorgabeWählen Sie einen vorhandenen Viewer aus dem Dropdown-Menü "Viewer-Vorgabe"aus.

Wenn die gesuchte Viewer-Vorgabe nicht angezeigt wird, stellen Sie sicher, dass sie veröffentlicht wurde. Sie müssen Viewer-Vorgaben veröffentlichen, bevor Sie sie verwenden können. Siehe Verwalten von Viewer-Vorgaben.

Bereitstellen von Dynamic Media-Assets mit HTTP/2

HTTP/2 ist das neue, aktualisierte Web-Protokoll, das die Kommunikation zwischen Browser und Servern verbessert. Es beschleunigt die Übertragung von Informationen und reduziert die erforderliche Prozessorleistung. Es ist jetzt möglich, Dynamic Media-Assets über HTTP/2 bereitzustellen, das schnellere Reaktions- und Ladezeiten bietet.

Vollständige Informationen zu den ersten Schritten mit HTTP/2 und Ihrem Dynamic Media-Konto finden Sie unter Bereitstellung von Inhalt über HTTP/2.

Auf dieser Seite

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now