[AEM Assets]{class="badge positive" title="Gilt für AEM Assets)."}

Dynamic Media-Tour: Grundlagen, Teil II dm-journey-part2

Willkommen auf der Dynamic Media-Journey: Grundlagen, Teil 2, wo Sie Folgendes lernen können:

Siehe auch Dynamic Media-Journey: Grundlagen, Teil 1.

Anatomie einer Dynamic Media-URL und wie Dynamic Media Inhalte bereitstellt dm-journey-d

Nachdem Ihre Dynamic Media-Assets hochgeladen und veröffentlicht wurden, können Sie die generierte URL eines Assets kopieren und in Ihren Browser einfügen, um zu sehen, wie das Asset einem Kunden angezeigt wird. Die folgende kopierte URL für ein Bild einer Armbanduhr ist farblich unterteilt, um das Lesen und Verstehen zu vereinfachen.

Struktur einer Dynamic Media-URL.

Der erste Teil der URL in Rot verweist auf die Serverdomain selbst. In diesem Fall wird Dynamic Media auf einer generischen Serverdomain ausgeführt, und zwar https://s7d1.scene7.com/is/image/. Sie können leicht feststellen, ob Dynamic Media eine Reihe von Bildern bereitstellt, indem Sie die Server-Domain überprüfen. Die URL-Struktur ist konsistent. Es gibt jedoch einige Dynamic Media-Kunden, die zu einer dedizierten Server-Domain gewechselt haben, in der diese name-of-your-company.scene7.com ist. Für die intelligente Bildbearbeitung ist eine dedizierte Serverdomain erforderlich.

Der lilafarbene Teil ist der Kontoname. In diesem Fall heißt das Konto jpearldemo.

Die Asset-ID oder der Name, AdobeStock_28563982, ist grün. Beachten Sie, dass das Asset keine Dateierweiterung wie .png oder .jpg hat. Wenn Assets in Dynamic Media aufgenommen werden, wird die Dateierweiterung entfernt und eine andere Art von Datei erstellt: eine Pyramid-TIFF-Datei. Mit der Pyramid-TIFF kann Dynamic Media schnell Ausgabedarstellungen erstellen.

Und schließlich gibt es einige Bildverarbeitungsparameter, ?wid=1000&fmt=jpeg&qlt=85, die am Ende in gelb angezeigt werden.

Der gesamte URL-Pfad ist live. Probieren Sie es jetzt aus.

Wenn Ihr Browser-Fenster weiterhin für die Dynamic Media-URL und das Bild der Armbanduhr geöffnet ist, können Sie Ausgabedarstellungen des Bildes erstellen, indem Sie die URL ändern.

Rendern des Bildes der Armbanduhr über die URL

Beginnen Sie, indem Sie nur die Bildverarbeitungsregeln im URL-Pfad manuell löschen. Behalten Sie den Servernamen, den Kontonamen und die Asset-ID oder den Bildnamen bei. Probieren Sie es jetzt aus.

Fügen Sie nun am Ende der URL einen Bildverarbeitungsparameter hinzu. Geben Sie im Feld URL rechts neben dem Bildnamen ?wid=500 ein und drücken Sie dann die Eingabetaste. Probieren Sie es jetzt aus.

Beachten Sie, dass eine neue Ausgabedarstellung der Uhr erzeugt wird. Eine wichtige Erkenntnis aus dieser einfachen Übung, die Breite des Bildes zu ändern, ist, dass das angezeigte Bild zu 100 % dynamisch generiert wird.

Ändern Sie jetzt den Breitenwert von 500 Pixel zu 1000 Pixel und drücken Sie dann die Eingabe. Jetzt ausprobieren.
In dem Moment, in dem Sie die Eingabetaste drücken, kehrt der Browser zum Dynamic Media-Bildserver zurück. Er generiert eine Ausgabedarstellung der Uhr basierend auf dem von Ihnen eingegebenen neuen Breitenwert und stellt dann das Bild zum Browser bereit und speichert es im Cache.

Dynamic Media verfügt über zahlreiche Bildverarbeitungsparameter, mit denen Sie Ihre Bild-Assets auf Webseiten optimieren können. Eine Liste davon können Sie hier einsehen.

Versuchen Sie jetzt, dem Bild der Uhr einen Rotationsparameter hinzuzufügen. Geben Sie am Ende des URL-Pfads, unmittelbar nach dem wid=1000, &rotate=90 ein, und drücken Sie dann die Eingabetaste. Probieren Sie es jetzt aus.

Die Uhr ist immer noch leicht nach links geneigt. Ändern Sie den Drehwert von 90 nach 92und drücken Sie dann die Eingabetaste. Jetzt testen.

Auch hier wird in dem Moment, in dem Sie Eingabetaste drücken, sofort eine neue Ausgabedarstellung der Uhr generiert. Sie können die Leistungsstufen einsehen. Dies erklärt, warum Dynamic Media in Zeiten hohen Traffics mehr als 800.000 pro liefern kann.

Das Ändern der Bildverarbeitungsparameter in einer URL auf Bild-für-Bild-Basis ist ineffizient, insbesondere für Websites mit Tausenden von Bildern. Eine viel bessere Herangehensweise ist die Verwendung von Bildvorgaben.

Grundlagen zum Erstellen von Bildvorgaben zum Rendern von Assets dm-journey-e

Es gibt mehrere Möglichkeiten, ein Bild zu erstellen. Sie möchten ein Bild verfügbar haben. Traditionell wendet sich ein Kreativprofi an Adobe Photoshop und speichert jede dieser verschiedenen Ausgabedarstellungen als statisches Bild.

Gut: statische Bilder, jeweils manuell erstellt.

Stellen Sie sich vor, der kreative Lead schaut sich die Bilder an und sagt:

„Bei dieser Aufnahme wollte ich unbedingt, dass der große Zeiger auf die Vier und der kleine Zeiger auf die 1 zeigt, damit das Zifferblatt besser zu erkennen ist.“

Der Creative nimmt alle neuen statischen Bilder neu auf.

Mit Dynamic Media können Sie jedoch, wenn Sie verschiedene Bildvorgaben haben, diese Bilder überall dort verwenden, wo Sie sie benötigen. Mit den Bildvorgaben werden Standards durchgesetzt.

Best Practice: eine Datei mit mehreren Ausgabedarstellungen, z. B. Search_Grid und Thumbnail, die dynamisch mithilfe von Bildvorgaben erstellt werden.

Überall dort, wo Sie eine bestimmte Art von Bild benötigen, z. B. auf

Sie möchten, dass dieses Bild mit denselben Parametern bereitgestellt wird, wo auch immer sie verwendet werden.

Sehen wir uns kurz an, wie man in Dynamic Media eine Bildvorgabe erstellt.

Erstellen einer Bildvorgabe ausgehend von der Registerkarte „Allgemein“.

Im obigen Beispiel können Sie sehen, dass eine neue Bildvorgabe mit dem Namen Medium erstellt wurde. Dynamic Media verwendet ein vorkonfiguriertes Beispielbild – den Rucksack –, damit Sie die Merkmale der Bildvorgabe bei der Erstellung sehen können.

Die Bildvorgabe Medium hat eine Breite von 500 Pixel und eine Höhe von 800 Pixel. In Teil I dieser Tour erfahren Sie mehr über die Bereitstellung von Assets in verschiedenen Formaten. Aus dem Pulldown-Menü Format können Sie Assets als JPEG, PNG, TIFF oder in mehreren anderen Formaten bereitstellen. Hier haben Sie Flexibilität.

Wenn Sie die Registerkarte Erweitert wählen, erhalten Sie Optionen für den Farbraum des Assets. Je nach auf der Registerkarte Standard ausgewähltem Format können Sie Assets in RGB, Graustufen oder CMYK bereitstellen. Verwenden Sie das Farbprofil-Pulldown-Menü, um festzulegen, wie ein CMYK-Bild-Asset zum Drucken bereitgestellt werden soll. Beachten Sie auch, dass es zusätzliche Parameter gibt, die Sie für das Scharfzeichnen Ihrer Bilder anwenden können. In diesem Fall wurde die Unschärfemaske angewendet.

Erstellen einer Bildvorgabe durch Auswahl von Optionen auf der Registerkarte „Erweitert“.

Sie erinnern sich, ​ Sie in „Struktur einer Dynamic MediaURL bereits über die Dynamic Media-URL gelesen haben und darüber, wie diese aufgebaut ist. In das Textfeld Bildmodifikator können Sie alle gewünschten zusätzlichen Bildverarbeitungsparameter eingeben. Wenn Ihre Bilder bereitgestellt werden, werden die Parameter unter Verwendung der Vorgabe in den Vorgabenamen der URL aufgenommen. Im obigen Screenshot wurde der Parameter bgc=451B15 hinzugefügt. Das heißt, es wurde eine dunkelbraune Hintergrundfarbe hinzugefügt.

Sie können sich eine Bildvorgabe als Konfiguration für Ihre Bilder vorstellen. Sie liefert alle Bilder, die die Voreinstellung konsistent verwenden. Das ist immer das Gleiche. Der Parameter &op_brightness=+10 wurde hinzugefügt, um die Helligkeit etwas zu erhöhen.

Wenn Sie fertig sind, speichern Sie die Vorgabe. Jetzt ist sie für alle Bilder verfügbar, die Sie haben. In diesem Fall möchten Sie die Bildvorgabe Medium auf das Bild einer Schüssel mit flüssiger Schokolade anwenden.

Um eine Ausgabedarstellung eines Bildes zu erzeugen, wenden Sie die Bildvorgabe Medium an.

Um das Erscheinungsbild des Bildes zu überprüfen, kopieren Sie die URL und fügen Sie sie in Ihren Browser ein. Jetzt testen.

Beachten Sie in Ihrem Browser den Namen der Bildvorgabe Medium im vollständigen URL-Pfad.

Sie können die Art der Helligkeit sehen, die im Bild angezeigt wird. Diese Qualität ist teilweise auf die Art und Weise zurückzuführen, wie die Schokolade aufgenommen wurde. Das liegt zum Teil auch daran, dass Sie mit Dynamic Media größere Bilder speichern können als die, die über digitale Kanäle bereitgestellt werden.

Wenn alles für Ihre Schale Schokolade zufriedenstellend aussieht, fügen Sie die URL in Ihre Webseiten ein, wo das Bild auf Ihrer Website erscheinen soll.

Wenn Sie sich das Bild der Uhr noch einmal ansehen, können Sie sehen, dass es eine Cart-Bildvorgabe, eine Grid-Vorgabe, eine Large-Vorgabe, eine PDP-page-Vorgabe (Produktdetailseite) und mehrere andere gibt.

Statische und dynamische Bildvorgaben. Das Bild der Uhr wurde mit der PDP-page-Bildvorgabe gerendert.

Aber was ist, wenn Sie ein Bild auf Ihrer Website ändern müssen? Angenommen, Sie haben einige Tests durchgeführt und festgestellt, dass das Bild von 120 x 120 (die Cart Bildvorgabe) nicht so wahrgenommen wird, wie Sie dachten. Vergrößern Sie das Bild, indem Sie die Breite auf 175 Pixel und die Höhe auf 175 Pixel erhöhen. Traditionell gehen Sie zu Adobe Photoshop und erstellen alle diese Warenkorbbilder neu. Mit Dynamic Media bearbeiten Sie die Bildvorgabe, indem Sie die Werte für Breite und Höhe auf 175 aktualisieren und die Vorgabe speichern, wie im folgenden Beispiel gezeigt.

Bearbeiten der Breite und Höhe der Cart Bildvorgabe.

Nachdem Sie Ihre Bildvorgabe geändert und den Cache gelöscht haben, werden alle Bilder aktualisiert, und alle URLs, die mit dieser Vorgabe verwendet werden, ändern nicht an beliebiger Stelle. Das bedeutet, dass keine fehlerhaften Links und keine Umleitungen auf Webseiten erforderlich sind.

Bild-Sets, Rotations-Sets und Sets mit gemischten Medien dm-journey-f

Zu den beliebtesten Verwendungszwecken von Dynamic Media gehört die Möglichkeit, Bildsets, Rotationssets und Sets mit gemischten Medien zu erstellen.

Bild-Sets bestehen normalerweise aus einer Reihe von Bild-Assets, die als einzelne Entität dargestellt werden. Diese Art von Sets bietet Benutzerinnen und Benutzern ein integriertes Betrachtungserlebnis, bei dem die Benutzerinnen und Benutzer durch Klicken auf ein Miniaturbild verschiedene Ansichten eines Elements sehen können. Mit Bild-Sets können Sie alternative Ansichten eines Elements darstellen. Dabei bietet der Viewer Zoomtools, mit denen Bilder genauer betrachtet werden können. Anzeigen eines Bild-Sets namens „Laufen“, das den Flyout-Viewer verwendet.

Hier in Dynamic Media können Sie mehrere Bilder von Laufschuhen sehen. Es handelt sich um eine Produktserie, bei der Vertrieb und Marketing möchten, dass Kunden sie als eine einzige Präsentation betrachten: ein Bildset.

Der Beginn der Erstellung eines Bildsets.

Um das Bild-Set zu erstellen, wählen Sie Bild-Set aus dem Pulldown-Menü Erstellen. Beachten Sie, dass im Menü auch Optionen zum Erstellen eines Sets mit gemischten Medien, Rotations-Sets und Karussell-Sets vorhanden sind. Sie erstellen diese Sets auf ähnliche Weise wie Bild-Sets.

Ein Set mit gemischten Medien kann Bilder, Mustersets, Rotations-Sets, Videos und Sets mit adaptiven Videos enthalten. Probieren Sie es jetzt aus. Mit einem Rotationsset können Benutzer ein Objekt drehen, um es zu untersuchen. Rotations-Sets ermöglichen es, wichtige visuelle Details aus jedem Blickwinkel anzuzeigen. Probieren Sie es jetzt aus.

Das Erstellen eines Bild-Sets ist unkompliziert. Fügen Sie die Bild-Assets hinzu, die Sie in das Set aufnehmen möchten.

Mit dem Bildset-Editor können Sie Bild-Assets hinzufügen und ihre Darstellung im Set neu anordnen.

Sie müssen dem Set einen Namen geben. Wählen Sie den Namen sorgfältig aus, da Sie ihn später nicht mehr bearbeiten können! Im obigen Beispiel wird der Satz Running genannt. Wenn Sie fertig sind, speichern Sie das Set.

Und hier ist das Bild-Set Running in Experience Manager Assets.

Das Running Bildset in Experience Manager Assets, Kartenansicht.

Nachdem Sie ein Bildset, ein Set mit gemischten Medien, ein Rotationsset oder ein anderes interaktives Medium erstellt haben, sollten Sie eine Vorschau davon anzeigen, wie es einem Kunden angezeigt wird und wie es sich verhält. Dynamic Media verfügt über zahlreiche integrierte Viewer, mit denen Sie dies tun können.

Wählen Sie zunächst das Bildset aus, um es in einer Vorschau zu öffnen, wie im folgenden Beispiel gezeigt.

Das Running Bildset in der Vorschau, mit ausgewählter Option „Viewer“.

Beachten Sie in der Vorschau, dass Sie die Muster für Laufschuhe auswählen und die Schuhe vergrößern und verkleinern können. Um einen Viewer auf das Set anzuwenden, wählen Sie aus dem Pulldown-Menü Viewer aus.

Das Running Bildset, auf das der Flyout-Viewer angewendet wurde.

In diesem Fall wurde der Viewer Flyout ausgewählt. An dieser Stelle können Sie eine Vorschau des Bild-Sets im Viewer anzeigen. Es ist jedoch am besten, sie in Ihrem Browser so zu sehen, wie es ein Kunde sieht. Wählen Sie URL in der linken unteren Ecke aus, kopieren Sie die URL und fügen Sie sie in Ihren Browser ein. Probieren Sie es jetzt aus.

Mit der einzelnen URL können Sie das Bild-Set und den Viewer verwenden, wo Sie sie auf Ihrer Website benötigen. Im vorherigen Beispiel haben Sie bemerkt dass Einbetten“ rechts neben der URL-Schaltfläche steht. Durch Auswahl von Einbetten können Sie den Code für dieses Bild-Set / diesen Viewer kopieren und zu einer Web-Seite oder Experience Manager Sites-Komponente hinzufügen.

Der Flyout-Viewer ist ein standardmäßiger Standard-Viewer, dessen Eigenschaften Sie bearbeiten können. Sie können aber auch, wie beim Erstellen einer Bildvorgabe, einen eigenen, benutzerdefinierten Viewer erstellen.

Angenommen, Ihr Verkaufs- und Marketing-Team bevorzugt den Flyout-Viewer nicht. Sie mögen die Zoom-Funktion, möchten aber, dass Kunden den Zoom-Effekt direkt über den Schuhen sehen. In diesem Fall wenden Sie den Viewer InlineZoom auf das Bildset an und kopieren und fügen die URL in Ihren Browser ein, um zu sehen, wie es sich verhält. Probieren Sie es jetzt aus.

Wenn Sie den Mauszeiger über den Schuh bewegen, zoomt das Bild hinein, und Sie können mehr Details sehen, wenn Sie den Mauszeiger bewegen. Dieser Zoom-Effekt ist auf die Größe des Bildes zurückzuführen, das ursprünglich in Dynamic Media hochgeladen wurde.

Wenn Sie Ihre Rolle als Verbraucher betrachten oder in Ihrer beruflichen Rolle arbeiten und wenn Sie verschiedene Websites besuchen, sehen Sie Beispiele für diese Funktionen. Überlegen Sie, wie dies geschieht und wie Sie die Funktionen von Dynamic Media in Ihrer eigenen Arbeit und auf der Website Ihres Unternehmens nutzen können.

Sie lesen Informationen über Bildsets und Viewer. Sehen wir uns einige andere Viewer an und probieren sie für einzelne Assets aus. Um den Viewer zurückzusetzen, klicken Sie auf die Schaltfläche Aktualisieren in der linken unteren Ecke.

Optional – Weitere Informationen

Um mehr darüber zu erfahren, was Sie lesen, verwenden Sie die folgenden Materialien, um Konzepte genauer zu erkunden. Ansonsten ist Ihre Dynamic Media-Tour abgeschlossen!

Dynamic Media-Tutorials

Dynamic Media-Viewer