Dynamic Media-Tour: Grundlagen, Teil II dm-journey-part2
Willkommen bei der Dynamic Media-Tour: Grundlagen, Teil II, bei der Sie Folgendes lernen können:
- Anatomie einer Dynamic Media-URL und wie Dynamic Media Inhalte bereitstellt
- Grundlagen zum Erstellen von Bildvorgaben zum Rendern von Assets
- Bildsets, Rotationssets und Sets mit gemischten Medien
Siehe auch Dynamic Media-Tour; Grundlagen, Teil I.
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 erzeugte 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 das Bild einer Armbanduhr ist farblich unterteilt, um das Lesen und Verstehen zu vereinfachen.
Anatomie 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/
. Das einfache Betrachten der Serverdomain macht es einfach, eine Reihe von Bildern anzuzeigen und zu verstehen, ob sie von Dynamic Media bereitgestellt werden. Die URL wird ziemlich konsistent sein. Es gibt jedoch einige Dynamic Media-Kunden, die zu einer dedizierten Serverdomain gewechselt haben, die möglicherweise wie name-of-your-company.scene7.com
aussieht. 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 Pyramic-TIFF können 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. Jetzt ausprobieren.
Wenn Ihr Browserfenster immer noch für die Dynamic Media-URL und das Bild der Armbanduhr geöffnet ist, schauen wir uns näher an, wie Sie Bildausgabedarstellungen erstellen können, indem Sie einfach 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. Jetzt ausprobieren.
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. Jetzt ausprobieren.
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 betrachtete Bild zu 100 % dynamisch erzeugt 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 erzeugt eine brandneue Ausgabedarstellung der Uhr, basierend auf dem neuen Breitenwert, den Sie gerade eingegeben haben, und stellt dann das neue Bild zurück 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 wid=1000
, &rotate=90
ein, und drücken Sie die Eingabetaste. Jetzt ausprobieren.
Die Uhr ist immer noch leicht nach links geneigt. Ändern Sie den Drehwert von 90
nach 92
und drücken Sie dann die Eingabetaste. Jetzt probieren.
Auch hier wird in dem Moment, in dem Sie die Eingabetaste drücken, fast augenblicklich eine neue Ausgabedarstellung der Uhr erzeugt. Sie können die Leistung, die Sie erhalten, nachvollziehen, wenn Sie verstehen, dass Dynamic Media an einem arbeitsreichen Wochenende oder an einem großen Feiertag mehr als 800.000 Bildanfragen pro Sekunde liefern kann.
Es ist zwar möglich, Bildverarbeitungsparameter in einer URL auf Bild-für-Bild-Basis zu ändern, aber das ist keine effiziente Methode, insbesondere wenn Sie Zehntausende von Bildern auf Ihrer Website haben. 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 und Orte, an denen Sie ein Bild erstellen oder ein Bild verfügbar machen sollten. Traditionell geht ein Kreativer in Adobe Photoshop und speichert jede dieser verschiedenen Ausgabedarstellungen als statisches Bild ab.
Gut: statische Bilder, jeweils manuell erstellt.
Stellen Sie sich vor, wie der Creative Director sich die Bilder anschaut 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.“
Das Kreativ-Team müsste alle neuen statischen Bilder erneut aufnehmen.
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
- einer Produktdetailseite,
- Suchmaske,
- Miniaturansicht,
- Einkaufskarte oder
- Hero-Bild,
Sie möchten, dass diese Bilder mit denselben Parametern bereitgestellt werden, 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 dem Format, das Sie in der Registerkarte Allgemein ausgewählt haben – im obigen Beispiel wurde JPEG ausgewählt – können Sie Assets in RGB, Graustufen oder CMYK bereitstellen. Aus dem Pulldown-Menü Farbprofil können Sie auswählen, 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, dass Sie in Anatomie einer Dynamic Media URL 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 Rezept für Ihre Bilder vorstellen. Alle Bilder, die diese Vorgabe verwenden, werden konsistent und jedes Mal gleich aussehen. 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.
Anwenden der Bildvorgabe „Medium“, um eine Ausgabedarstellung eines Bildes zu erzeugen.
Kopieren Sie die URL und fügen Sie sie dann in Ihren Browser ein, um das Erscheinungsbild des Bildes zu überprüfen. Jetzt ausprobieren.
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 Sie das Bild von 120 x 120 (die Cart
-Bildvorgabe) nicht so erhalten, wie Sie dachten. Sie müssen das Bild vergrößern, indem Sie die Breite und die Höhe auf 175 Pixel erhöhen. Traditionell müssten Sie in Adobe Photoshop gehen und all diese Warenkorbbilder neu erstellen. Mit Dynamic Media bearbeiten Sie jedoch einfach die Bildvorgabe, indem Sie die Werte für Breite und Höhe auf 175 ändern und die Vorgabe speichern, wie im folgenden Beispiel gezeigt.
Bearbeiten der Breite und Höhe des Cart
Bildvorgabe.
Nachdem Sie Ihre Bildvorgabe geändert und den Cache geleert haben, werden alle Bilder aktualisiert, und alle URLs, die mit dieser Vorgabe verwendet werden, ändern sich nicht mehr. Das bedeutet, dass keine fehlerhaften Links und keine Umleitungen auf Webseiten erforderlich sind.
Bildsets, Rotationssets und Sets mit gemischten Medien dm-journey-f
Zu den beliebtesten Einsatzbereichen von Dynamic Media gehört die Möglichkeit, Bildsets, Rotationssets und Sets mit gemischten Medien zu erstellen.
Bildsets 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 Bildsets können Sie alternative Ansichten eines Elements darstellen. Dabei bietet der Viewer Zoomtools, mit denen Bilder genauer betrachtet werden können. Anzeigen eines Bildsets 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, von der Vertrieb und Marketing wollen, dass die Kundinnen und Kunden sie als eine einzige Präsentation sehen, als ein Bildset.
Der Beginn der Erstellung eines Bildsets.
Um das Bildset zu erstellen, wählen Sie Bildset aus dem Pulldown-Menü Erstellen. Beachten Sie, dass im Menü auch Optionen zum Erstellen eines Sets mit gemischten Medien, Rotationssets und Karussellsets vorhanden sind. Sie erstellen diese Sets auf ähnliche Weise wie Bildsets.
Ein Set mit gemischten Medien kann Bilder, Mustersets, Rotationssets, Videos und Sets mit adaptiven Videos enthalten. Probieren Sie es jetzt aus. Ein Rotationsset simuliert das Drehen eines Gegenstands zur genaueren Untersuchung. Rotationssets ermöglichen es, wichtige visuelle Details aus jedem Blickwinkel anzuzeigen. Jetzt ausprobieren.
Das Erstellen eines Bildsets ist unkompliziert. Fügen Sie einfach 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 Bildset Running
in Experience Manager Assets.
Das Bildset Running
in Experience Manager Assets, Kartenansicht.
Unabhängig davon, ob Sie ein Bildset, ein Set mit gemischten Medien, ein Rotationsset oder ein anderes interaktives Medium erstellt haben, sollten Sie sehen, wie es nach dem Erstellen des Sets aussieht und sich für einen Kunden verhält. Dynamic Media verfügt über zahlreiche integrierte Viewer, mit denen Sie genau das tun können.
Wählen Sie zunächst das erstellte Bildset aus, um es wie im folgenden Beispiel in einer Vorschau zu öffnen.
Das Bildset Running
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 Bildset Running
, 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 Bildsets im Viewer anzeigen. Es ist jedoch am besten, es in Ihrem Browser zu sehen, soe wie es auch 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. Jetzt ausprobieren.
Mit der einzelnen URL können Sie das Bildset und den Viewer verwenden, wo Sie sie auf Ihrer Website benötigen. Im vorherigen Beispiel haben Sie möglicherweise bemerkt, dass Einbetten rechts neben der URL-Schaltfläche steht. Durch Auswahl von Einbetten können Sie den Code für dieses Bildset / diesen Viewer kopieren und zu einer Web-Seite oder Experience Manager Sites-Komponente hinzufügen.
Der Flyout-Viewer ist ein standardmäßiger, vorkonfigurierter Viewer, dessen Eigenschaften Sie bearbeiten können. Sie können aber auch, genau wie bei der Erstellung einer Bildvorlage, einen eigenen, benutzerdefinierten Viewer erstellen.
Angenommen, Ihrem Verkaufs- und Marketing-Team gefällt der 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 einfach 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. Jetzt ausprobieren.
Wenn Sie den Mauszeiger über den Schuh bewegen, zoomen Sie in das Bild ein, und Sie können mehr Details sehen, wenn Sie den Mauszeiger hin und her bewegen. Der Grund dafür ist einfach die Größe des Bildes, das ursprünglich in Dynamic Media hochgeladen wurde.
Wenn man über sein Leben als Verbraucher nachdenkt, oder wenn man in seiner täglichen Rolle arbeitet, und wenn man auf verschiedene Websites geht, sieht man Dinge wie diese. Denken Sie darüber nach, wie das gemacht wird und wie Sie die Leistung von Dynamic Media in Ihrer eigenen Arbeit und auf der Website Ihres Unternehmens nutzen können.
Sie haben sich gerade über Bildsätze und Viewer informiert. 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.
- Viewer
ZoomVertical_dark
, der auf ein Bild-Asset angewendet wwurde. Jetzt ausprobieren. - Viewer
Zoom_light
, der auf ein Bild angewendet wurde. Jetzt ausprobieren.
Optional – Weitere Informationen
Wenn Sie mehr darüber erfahren möchten, was Sie gerade gelesen haben, nutzen Sie die unten stehenden Materialien, um Konzepte genauer zu erkunden. Ansonsten ist Ihre Dynamic Media-Tour abgeschlossen!
Dynamic Media-Hilfethemen
- So erstellt man Bildvorgaben
- Eine Liste von Bildverarbeitungsparametern, die Sie beim Erstellen einer Bildvorgabe im Feld „Bildmodifikator“ verwenden können
- So zeigt man Assets in der Vorschau an
- So zeigt man 3D-Assets in der Vorschau an
- So erstellt man Bildsets
- So erstellt man Rotationssets
- So erstellt man Sets mit gemischten Medien
Dynamic Media-Tutorials
- Verwenden von Dynamic Media mit Experience Manager Assets
- Adobe Experience Manager-Inhaltsbibliothek (Suche in Dynamic Media)
Dynamic Media-Viewer
- Live-Demos jedes Viewers