Médias dynamiquesest l’un des outils polyvalents fournis par Adobe. Auparavant, il s’appelait Scene7. Il dispose de solides capacités d’édition et d’outils de création d’actifs. Il est basé sur un réseau de livraison de cache, qui charge le contenu pour améliorer le temps de chargement des pages et restitue les bons rendus d’image correctement redimensionnés et optimisés. Dynamic Media permet aux appareils demandeurs de demander exactement le type de rendu, la version et la taille exacte de l’image dont cet appareil a besoin au moment de la demande.
Vous êtes-vous interrogé sur les avantages de l’intégration de la fonctionnalité Dynamic Media dans les composants personnalisés ? Dans ce blog, je montrerai comment intégrer Dynamic Media avec des composants personnalisés et les avantages que cela procure.
Lorsque nous intégrons Dynamic Media à AEM, cela active diverses fonctionnalités Dynamic Media telles que des profils image/vidéo, des métadonnées DM, des flux de travail DM et un ensemble de composants Dynamic Media prêts à l’emploi. En outre, certains composants principaux comme Image fournissent des fonctionnalités Dynamic Media.
Si vous n’avez pas intégré Dynamic Media à AEM, veuillez passer par la documentation fournie par Adobe sur la façon de configurer Dynamic Media pour AEM.
Chargement de la bibliothèque multimédia dynamique
Tout d’abord, nous devons charger les clientlibs Dynamic Media sur chaque page pour restituer les ressources Dynamic Media via les composants AEM.
Collez le code suivant dans le composant de page de section d’en-tête, c’est-à-direcustomheaderlibs.html
<!--/* Dynamic Media Integration */-->
<sly data-sly-use.clientLib="${'/libs/granite/sightly/templates/clientlib.html'}"
data-sly-call="${clientLib.all @ categories="cq.dam.components.scene7.dynamicmedia,cq.dam.components.scene7.common.i18n"}"></sly>
Implémentation d’un modèle d’élingue personnalisé
Créez ensuite un utilitaire commun de modèle Sling personnalisé pour lire les propriétés des métadonnées des ressources Dynamic Media, qui est nécessaire pour charger toutes les ressources AEM via la fonctionnalité Dynamic Media.
Mise en œuvre du modèle Sling
public interface DynamicMedia extends BaseModel {
String getCurrentPagePath();
String getPageLocale();
String getAssetName();
String getAssetPath();
String getDynamicMediaViewerPath();
String getDynamicMediaImageServerPath();
boolean isWcmModeDisabled();
@Slf4j
@Model(
adaptables = SlingHttpServletRequest.class,
adapters = DynamicMedia.class,
defaultInjectionStrategy = DefaultInjectionStrategy.OPTIONAL
)
public class DynamicMediaImpl implements DynamicMedia {
private static final String DM_IMAGE_SERVER_PATH = "is/image/";
private static final String DM_VIEWERS_SERVER_PATH = "s7viewers/";
@SlingObject
private SlingHttpServletRequest request;
@ScriptVariable
private Page currentPage;
@RequestAttribute
private String imageReference;
@Getter
private String assetName;
@Getter
private String assetPath;
@Getter
private String dynamicMediaViewerPath;
@Getter
private String dynamicMediaImageServerPath;
@PostConstruct
protected void init() {
if (StringUtils.isNotEmpty(imageReference)) {
final Resource assetResource = request.getResourceResolver()
.getResource(imageReference);
if (assetResource != null) {
final Asset asset = assetResource.adaptTo(Asset.class);
if (asset != null) {
this.id = getId() + "-" + asset.getID();
assetName = asset.getName();
assetPath = asset.getMetadataValue(Scene7Constants.PN_S7_FILE);
final String dynamicMediaServer = asset.getMetadataValue(
Scene7Constants.PN_S7_DOMAIN);
dynamicMediaImageServerPath = dynamicMediaServer + DM_IMAGE_SERVER_PATH;
dynamicMediaViewerPath = dynamicMediaServer + DM_VIEWERS_SERVER_PATH;
}
}
}
}
@Override
public String getCurrentPagePath() {
return currentPage.getPath();
}
@Override
public String getPageLocale() {
return LocaleUtils.generateLocaleFromPath(getCurrentPagePath());
}
@Override
public boolean isWcmModeDisabled() {
return (WCMMode.fromRequest(request) == WCMMode.DISABLED);
}
}
Une fois que nous avons terminé la partie implémentation du modèle Sling, créez un modèle HTL dans le répertoire/apps/Répertoire>/composants/atomes/médias dynamiques/image.htmlpour assurer la réutilisabilité dans le composant chaque fois que nous voulons charger une image à l’aide d’un média dynamique pour un objectif spécifique composant. Collez le code suivant dans leimage.htmldéposer.
<sly data-sly-template.dynamicMediaImageTemplate="${ @ imageReference, aspectRatio, altText, suffixId}">
<div data-sly-use.dynamicMediaImage="${'com.perficientblogs.core.models.commons.DynamicMediaModel' @ imageReference = imageReference}"
id="${suffixId || dynamicMediaImage.id}"
data-current-page="${dynamicMediaImage.currentPagePath}"
data-page-locale="${dynamicMediaImage.pageLocale}"
data-asset-path="${dynamicMediaImage.assetPath}"
data-asset-name="${dynamicMediaImage.assetName}"
data-asset-type="image"
data-viewer-path="${dynamicMediaImage.dynamicMediaViewerPath}"
data-imageserver="${dynamicMediaImage.dynamicMediaImageServerPath}"
data-wcmdisabled="${dynamicMediaImage.wcmModeDisabled}"
data-dms7=""
data-mode="smartcrop" //Note: We can set the image preset mode here
data-enablehd="always"
data-aspectratio="${aspectRatio @context="scriptString"}"
data-title="${altText}"
data-alt="${altText}"
class="s7dm-dynamic-media">
</div>
</sly>
Référez-vous maintenant à ce fichier de modèle HTL n’importe où dans le composant HTML où nous souhaitons charger toute image créée via un CDN multimédia dynamique.
<sly data-sly-use.image=" /apps/<Project Driectory>/components/atoms/dynamicmedia/image.html"
data-sly-call="${image.dynamicMediaImageTemplate @ imageReference= modeloject.fileReference, aspectRatio= false, altText="Hello world Component"}"></sly>
Assurez-vous de transmettre une valeur pourimageRéférence propriété qui est obligatoire. Nous pouvons également transmettre les valeurs avec d’autres objets nommésratio d’aspect,textealt selon les besoins ou étendre les fonctionnalités selon les besoins.
Voir l’image ci-dessus pour le résultat final. Regardez l’URL de l’image rendue par le composant personnalisé. Il est fourni à partir du CDN fourni par Dynamic Media. C’est l’avantage que vous obtenez avec cela. De cette façon, les images seront diffusées beaucoup plus rapidement à l’utilisateur en fonction de la région dans laquelle il se trouve.
Si vous avez des questions ou des commentaires, déposez-les dans le chat ci-dessous !
Source link