[AEM_Assets]{class="badge positive" title="S’applique à AEM Assets)."}

Parcours Dynamic Media : principes de base, deuxième partie dm-journey-part2

Bienvenue dans le Parcours Dynamic Media : principes de base, deuxième partie, au cours duquel vous devriez vous familiariser avec les éléments suivants :

Voir aussi Parcours Dynamic Media : principes de base, première partie🔗.

Anatomie d’une URL Dynamic Media et méthode de Dynamic Media pour diffuser du contenu dm-journey-d

Une fois vos ressources Dynamic Media chargées et publiées, vous pouvez copier l’URL générée d’une ressource et la coller dans votre navigateur pour voir comment elle apparaîtra pour un client. L’URL copiée suivante d’une image de montre est répartie par couleur afin de faciliter la lecture et la compréhension.

Structure d’une URL Dynamic Media.

La première partie de l’URL, en rouge, fait référence au domaine du serveur lui-même. Dans ce cas, Dynamic Media s’exécute sur un domaine de serveur générique : https://s7d1.scene7.com/is/image/. Vous pouvez facilement déterminer si Dynamic Media diffuse un ensemble d’images en vérifiant le domaine du serveur. La structure de l’URL est cohérente. Certains clients Dynamic Media ont toutefois basculé vers un domaine de serveur dédié où il est name-of-your-company.scene7.com. Un domaine de serveur dédié est requis pour l’imagerie dynamique.

Le nom du compte correspond à la partie violette. Dans ce cas, le compte s’appelle jpearldemo.

L’identifiant ou le nom de la ressource, AdobeStock_28563982, est en vert. Notez que la ressource n’a aucune extension de fichier, que ce soit .png ou .jpg. Lorsque des ressources sont ingérées dans Dynamic Media, l’extension de fichier est supprimée et un autre type de fichier est créé : un fichier pyramide TIFF. Le TIFF pyramide permet à Dynamic Media de créer rapidement des rendus à la volée.

Enfin, les paramètres de traitement des images, ?wid=1000&fmt=jpeg&qlt=85, sont indiqués en jaune à la fin.

L’intégralité du chemin de l’URL est actif. Faites un essai.

La fenêtre de votre navigateur reste ouverte sur l’URL Dynamic Media et l’image de montre. Découvrez comment créer des rendus de l’image en modifiant l’URL.

Rendu de l’image de montre via l’URL

Supprimez d’abord manuellement uniquement les règles de traitement des images dans le chemin de l’URL ; laissez le nom du serveur, le nom du compte et l’identifiant de ressource ou le nom de l’image. Faites un essai.

Ajoutez maintenant un paramètre de traitement d’image à la fin de l’URL. Dans le champ URL, à droite du nom de l’image, saisissez ?wid=500, puis appuyez sur Entrée. Faites un essai.

Notez qu’un nouveau rendu de la montre est généré. Ce qu’il faut retenir de cet exercice simple de modification de la largeur de l’image est que l’image vue est générée à 100 % de manière dynamique.

Maintenant, remplacez la valeur de largeur de 500 pixels par 1000 pixels, puis appuyez sur Entrée. Faites un essai{target=« _blank}.
Dès que vous appuyez sur Entrée, le navigateur revient au serveur d’images Dynamic Media. Il génère un rendu de la montre, en fonction de la nouvelle valeur de largeur que vous avez saisie, puis diffuse l’image au navigateur et la met en cache.

Dynamic Media propose de nombreux paramètres de traitement des images que vous pouvez utiliser pour affiner vos ressources d’image sur les pages web. Vous pouvez consulter une liste d’entre eux ici.

Essayez maintenant d’ajouter un paramètre de rotation à l’image de montre. À la fin du chemin de l’URL, juste après wid=1000, saisissez &rotate=90, puis appuyez sur Entrée. Faites un essai.

La montre est encore légèrement inclinée à gauche. Remplacez la valeur de rotation de 90 par 92, puis appuyez sur Entrée. Faites un essai.

Encore une fois, au moment où vous appuyez Entrée, un nouveau rendu de la montre génère immédiatement. Vous pouvez voir les niveaux de performance, ce qui explique pourquoi Dynamic Media peut diffuser plus de 800 000 requêtes d’image, par seconde, pendant les périodes de trafic élevé.

La modification des paramètres de traitement des images dans une URL image par image est inefficace, en particulier pour les sites web comportant des milliers d’images. Nous recommandons d’utiliser des paramètres d’image prédéfinis.

Principes de base de la création de paramètres d’image prédéfinis pour le rendu des ressources dm-journey-e

Il existe plusieurs façons de créer une image. Vous souhaitez qu’une image soit disponible. Traditionnellement, un professionnel de la création accède à Adobe Photoshop et enregistre chacun de ces différents rendus sous forme d’images statiques.

Méthode acceptable : images statiques créées chacune manuellement.

Maintenant imaginez que le responsable créatif regarde les images et dise :

« Je voulais vraiment que sur cette photo la grande aiguille pointe vers le quatre et la petite main vers le 1, pour que l’on voie mieux le cadran ».

Le contenu créatif résout toutes les nouvelles images statiques.

Toutefois, avec Dynamic Media, si vous disposez de paramètres d’image prédéfinis différents, vous pouvez utiliser ces images où vous en avez besoin. Ce sont les paramètres d’image prédéfinis qui appliquent les normes.

Idéal : un fichier avec plusieurs rendus créés à la volée à l’aide de paramètres d’image prédéfinis, tels que Search_Grid et Thumbnail.

Pour chaque emplacement pour lequel vous avez besoin d’un type d’image particulier, par exemple :

Vous souhaitez que cette image soit diffusée avec les mêmes paramètres, quel que soit l’endroit où ils sont utilisés.

Penchons nous un instants sur la manière dont un paramètre d’image prédéfini est créé dans Dynamic Media.

Création d’un paramètre d’image prédéfini à partir de l’onglet De base.

Dans l’exemple ci-dessus, vous pouvez constater qu’un nouveau paramètre d’image prédéfini a été créé avec le nom Medium. Dynamic Media utilise un exemple d’image d’usine, un sac à dos, pour vous aider à voir les caractéristiques du paramètre d’image prédéfini au fur et à mesure de sa création.

Le paramètre d’image prédéfini Medium est de 500 pixels de large et de 800 pixels de haut. Dans la première partie de ce Parcours, vous avez appris comment diffuser des ressources dans différents formats. Dans le menu déroulant Format, vous pouvez choisir de diffuser des ressources sous la forme de JPEG, PNG, TIFF ou de plusieurs autres formats. Vous avez une certaine marge de manœuvre.

Sélectionnez l’onglet Avancé pour accéder aux options relatives à l’espace colorimétrique de la ressource. Selon le format sélectionné dans l’onglet De base, vous pouvez diffuser des ressources en RGB, Niveaux de gris ou CMJN. Utilisez le menu déroulant Profil colorimétrique pour sélectionner comment diffuser une ressource image CMJN pour l’impression. Notez également que vous pouvez appliquer d’autres paramètres pour accentuer vos images. Dans ce cas, le paramètre Accentuation a été appliqué.

Création d’un paramètre d’image prédéfini en sélectionnant des options dans l’onglet Avancé

Vous vous rappelez que, dans la section Structure d’une URL Dynamic Media précédente, vous avez lu des informations sur l’URL Dynamic Media et sur la manière dont elle est créée. Dans la boîte de dialogue Modificateur d’image, vous pouvez saisir les paramètres de traitement d’image supplémentaires de votre choix dans la zone de texte. Les paramètres sont inclus dans le nom du paramètre prédéfini de l’URL lors de la diffusion de vos images, à l’aide du paramètre prédéfini. Dans la capture d’écran ci-dessus, le paramètre bgc=451B15 a été ajouté. En réalité, une couleur de fond marron foncé a été ajoutée.

Vous pouvez considérer un paramètre d’image prédéfini comme une configuration de vos images. Il diffuse toutes les images qui utilisent le paramètre prédéfini de manière cohérente à chaque fois ; il est identique. Le paramètre &op_brightness=+10 a également été ajouté pour augmenter légèrement la luminosité.

Lorsque vous avez terminé, vous enregistrez le paramètre prédéfini, qui est désormais disponible pour toutes les images dont vous disposez. Dans ce cas, vous souhaitez appliquer le paramètre d’image prédéfini __ à l’image d’une casserole de chocolat fondu.

Pour générer un rendu d’image, appliquez le paramètre d’image prédéfini Medium.

Pour vérifier l’aspect de l’image, copiez l’URL et collez-la dans votre navigateur. Faites un essai.

Dans votre navigateur, notez que le nom du paramètre d’image prédéfini Medium est présent dans le chemin d’accès URL complet.

Vous pouvez voir le type de clarté affiché dans l’image. Cette qualité est en partie due à la façon dont la casserole de chocolat a été photographiée. Mais c’est aussi parce qu’avec Dynamic Media vous pouvez stocker des images plus grandes que celles diffusées sur les canaux numériques.

Si tout vous paraît satisfaisant pour votre image de casserole de chocolat, vous collez l’URL dans vos pages web où vous souhaitez que l’image apparaisse sur votre site web.

Si vous regardez à nouveau l’image de la montre ci-dessous, vous pouvez voir qu’il existe un paramètre d’image prédéfini Cart, un préréglage Grid, un préréglage Large, un préréglage PDP-page (page Détails du produit), et plusieurs autres.

Paramètres prédéfinis d’image statiques et dynamiques. L’image de la montre a été rendue à l’aide du paramètre d’image prédéfini PDP-page.

Mais qu’en est-il si vous devez changer une image sur votre site web ? Supposons, par exemple, que vous ayez effectué quelques tests et que vous ayez trouvé que l’image de 120 x 120 (le paramètre d’image prédéfini Cart) n’est pas perçue comme vous le pensiez. Augmentez la taille de l’image en augmentant la largeur à 175 pixels et la hauteur à 175 pixels. Traditionnellement, vous accédez à Adobe Photoshop et recréez toutes ces images de panier. Mais avec Dynamic Media, vous modifiez le paramètre d’image prédéfini en mettant à jour les valeurs Largeur et Hauteur sur 175 et enregistrez votre paramètre prédéfini, comme illustré dans l’exemple ci-dessous.

Modification de la largeur et de la hauteur du paramètre d’image prédéfini Cart.

Après avoir modifié votre paramètre d’image prédéfini et effacé le cache, toutes les images sont mises à jour et toutes les URL utilisées avec ce paramètre prédéfini ne changent pas où que ce soit. Cela signifie que vous n’aurez pas à gérer de lien rompu et ou de redirection de page web.

Les ensembles d’images, visionneuses à 360° et visionneuses de supports variés dm-journey-f

Parmi les utilisations les plus courantes de Dynamic Media figure la possibilité de créer des visionneuses d’images, à 360° et de supports variés.

Les ensemble d’images sont généralement composés d’une série de ressources d’image présentées comme une seule entité. Ces ensembles offrent aux utilisateurs une expérience de visionnage intégrée en leur permettant d’afficher différentes vues d’un élément en cliquant sur une miniature. Les ensembles d’images permettent de présenter différentes vues d’un élément et offrent des outils pour zoomer et examiner les images de plus près. Afficher un ensemble d’images appelée « Running » utilisant la visionneuse Fenêtre déroulante

Dans Dynamic Media, vous pouvez voir plusieurs images de chaussures de course. Il s’agit d’une gamme de produits que les ventes et le marketing souhaitent que les clients voient dans une seule présentation : une visionneuse d’images.

Début de la création d’une visionneuse d’images.

Pour créer l’ensemble d’images, choisissez Ensemble d’images dans le menu déroulant Créer. Notez que le menu contient également des options pour créer une visionneuse de supports variés, une visionneuse à 360° et un ensemble de carrousel. Vous créez ces ensembles de la même manière qu’un ensemble d’images.

Une visionneuse de supports variés peut contenir des images, des visionneuses d’échantillons, des visionneuses à 360°, et des visionneuses des vidéos et de vidéos adaptatives. Faites un essai. Une visionneuse à 360° permet aux utilisateurs de faire pivoter un objet pour l’examiner. Les visionneuses à 360° permettent d’afficher des détails visuels importants sous n’importe quel angle. Faites un essai.

La création d’un ensemble d’images est simple. Vous ajoutez les ressources d’image que vous souhaitez inclure dans la visionneuse.

L’éditeur de visionneuse d’images vous permet d’ajouter des ressources d’image et de réorganiser leur aspect dans la visionneuse.

Vous devez donner un nom à la visionneuse. Choisissez le nom avec soin, car vous ne pourrez pas le modifier plus tard ! Dans l’exemple ci-dessus, la visionneuse est appelée Running. Lorsque vous avez terminé, vous enregistrez la visionneuse.

Et voici l’ensemble d’images Running dans Experience Manager Assets.

La visionneuse d’images Running dans Experience Manager Assets, en mode Carte.

Après avoir créé une visionneuse d’images, de médias mixtes, à 360° ou d’autres médias interactifs, prévisualisez son aspect et son comportement pour un client. Dynamic Media intègre de nombreuses visionneuses qui vous permettent de le faire.

Vous commencez en sélectionnant la visionneuse d’images pour l’ouvrir dans un aperçu, comme le montre l’exemple suivant.

L’option Running une visionneuse d’images dans l’aperçu avec des visionneuses est sélectionnée.

Dans l’aperçu, vous pouvez sélectionner les échantillons de chaussures de course et effectuer un zoom avant ou arrière sur les chaussures. Pour appliquer une visionneuse, sélectionnez Visionneuses dans le menu déroulant.

La visionneuse d’images Running à laquelle est appliquée la visionneuse Fenêtre déroulante.

Dans ce cas, l’observateur Flyout a été sélectionné. À ce stade, vous pouvez prévisualiser l’ensemble d’images dans la visionneuse. Cependant, il est préférable de l’afficher dans votre navigateur comme un client le verrait. Vous pouvez sélectionner URL dans le coin inférieur gauche, puis copier l’URL et la coller dans votre navigateur. Faites un essai.

L’URL unique vous permet d’utiliser l’ensemble d’images et la visionneuse où cela s’avère nécessaire sur votre site web. Vous avez remarqué dans l’exemple précédent que la mention Incorporer se trouve à droite du bouton URL. En sélectionnant Incorporer, vous pouvez copier le code de cet ensemble d’images ou de cette visionneuse et l’ajouter à une page web ou à un composant Experience Manager Sites.

La visionneuse Fenêtre déroulante est une visionneuse standard par défaut dont vous pouvez modifier les propriétés. Vous pouvez également, comme pour la création d’un paramètre d’image prédéfini, créer votre propre visionneuse personnalisée.

Supposons maintenant que votre équipe de vente et de marketing ne préfère pas la visionneuse Fenêtre déroulante. Ils aiment la fonction de zoom, mais souhaitent que les clients voient l’effet de zoom directement sur les chaussures. Dans ce cas, appliquez la visionneuse Zoom intégré à la visionneuse d’images, puis copiez et collez son URL dans votre navigateur pour voir comment elle se comporte. Faites un essai.

Lorsque vous déplacez le pointeur de la souris sur la chaussure, l’image effectue un zoom avant et vous pouvez voir plus de détails en déplaçant le pointeur. Cet effet de zoom est dû à la taille de l’image qui a été initialement chargée dans Dynamic Media.

Lorsque vous réfléchissez à votre rôle de consommateur, ou lorsque vous travaillez dans votre rôle professionnel, et lorsque vous visitez différents sites web, vous voyez des exemples de ces fonctionnalités. Réfléchissez à la manière dont vous procédez et à la manière dont vous pouvez utiliser les fonctionnalités de Dynamic Media dans votre propre travail et sur le site web de votre entreprise.

Vous avez lu des informations sur les visionneuses d’images et les visionneuses. Penchons-nous sur deux autres visionneuses et essayons-les sur des ressources uniques. Pour réinitialiser la visionneuse, cliquez sur le bouton Actualiser dans le coin inférieur gauche.

Facultatif - En savoir plus

Pour en savoir plus sur ce que vous lisez, consultez les documents ci-dessous pour explorer ces concepts plus en détail. Sinon, votre Parcours Dynamic Media est terminé !

Tutoriels Dynamic Media

Visionneuses Dynamic Media