Le composant d’image des composants principaux est un composant d’image adaptatif qui permet d’effectuer des modifications statiques.
Le composant d’image comprend une sélection des images adaptatives et un comportement réactif avec chargement différé pour le visiteur de la page, ainsi qu’un positionnement et un recadrage des images faciles pour l’auteur du contenu.
Les largeurs d’image ainsi que le recadrage et les paramètres supplémentaires peuvent être définis par l’auteur du modèle dans la boîte de dialogue de conception. L’éditeur de contenu peut télécharger ou sélectionner des ressources dans la boîte de dialogue de configuration et recadrer l’image dans la boîte de dialogue de modification. Pour plus de commodité, une simple modification statique de l’image est également disponible.
Le composant d’image s’accompagne de fonctions réactives efficaces prêtes à l’emploi. Au niveau du modèle de page, la boîte de dialogue de conception permet de définir les largeurs par défaut du fichier image. Le composant d’image charge alors automatiquement la largeur correcte à afficher en fonction de la taille de la fenêtre du navigateur. Lorsque la fenêtre est redimensionnée, le composant d’image charge dynamiquement la taille d’image correcte, instantanément. Les développeurs de composants n’ont pas à définir des requêtes multimédias personnalisées, puisque le composant d’image est déjà optimisé pour charger le contenu.
En outre, le composant d’image prend en charge le chargement différé afin de différer le chargement du fichier image réel jusqu’à ce qu’il soit visible dans le navigateur, ce qui augmente la réactivité des pages.
Le composant d’image (à partir de la version 2.13.0) prend en charge les ressources Dynamic Media. Lorsqu’elles sont activées, ces fonctionnalités offrent la possibilité d’ajouter des fichiers d’image Dynamic Media par un simple glisser-déposer ou par le biais du navigateur de ressources, comme vous le feriez pour toute autre image. En outre, les modificateurs d’image, les paramètres d’image prédéfinis et les recadrages intelligents sont également pris en charge.
Vos expériences web créées avec les composants principaux bénéficient des fonctionnalités d’image Dynamic Media sur plusieurs plateformes, hautement performantes, robustes, enrichies et optimisées par Sensei.
La version actuelle du composant d’image est v2, qui a été introduite avec la version 2.0.0 des composants principaux en janvier 2018. Elle est décrite dans ce document.
Le tableau ci-après présente en détail toutes les versions prises en charge du composant, les versions AEM avec lesquelles les versions du composant sont compatibles et les liens vers la documentation pour les versions précédentes.
Version du composant | AEM 6.4 | AEM 6.5 | AEM as a Cloud Service |
---|---|---|---|
v2 | Compatible | Compatible | Compatible |
v1 | Compatible | Compatible | - |
Pour plus d’informations sur les versions et les publications des composants principaux, voir le document sur les versions des composants principaux.
Les composants SVG (Scalable Vector Graphics) sont pris en charge par le composant d’image.
Pour des raisons de sécurité, l’éditeur d’image ne fait jamais appel au fichier SVG d’origine. Il est appelé par <img src=“path-to-component”>
. Cela empêche le navigateur d’exécuter les scripts incorporés dans le fichier SVG.
La prise en charge de SVG nécessite la version 2.1.0, ou ultérieure, des composants principaux et le Service Pack 2 pour AEM 6.4, ou version ultérieure, pour être compatible avec les fonctionnalités de l’éditeur d’image d’AEM.
Pour tester le composant d’image et voir des exemples de ses options de configuration, ainsi que la sortie HTML et JSON, consultez la bibliothèque de composants.
La documentation technique la plus récente sur le composant d’image se trouve sur GitHub.
Vous trouverez plus d’informations sur le développement des composants principaux dans la documentation destinée aux développeurs de composants principaux.
Le composant d’image prend en charge les microdonnées schéma.org.
Outre la boîte de dialogue de modification et la boîte de dialogue de conception standard, le composant d’image propose une boîte de dialogue de configuration dans laquelle l’image elle-même est définie avec sa description et ses propriétés de base.
&
, quel que soit le type de paramètre prédéfini sélectionné.dc:description
dans DAM.dc:title
dans DAM.Les options Recadrage intelligent et Paramètre d’image prédéfini s’excluent mutuellement. Si un auteur doit utiliser un paramètre d’image prédéfini associé à un rendu avec recadrage dynamique, il devra utiliser les modificateurs d’image pour ajouter manuellement ce paramètre.
La boîte de dialogue de modification permet à l’auteur du contenu de recadrer, de modifier la carte de lancement et de zoomer sur l’image.
Les fonctions de recadrage, de rotation et de zoom ne s’appliquent pas aux ressources Dynamic Media. Si les fonctions de Dynamic Media sont activées, les modifications des ressources Dynamic Media sont effectuées à l’aide de la boîte de dialogue Configuration.
Commencer recadrage
Cette option ouvre une liste déroulante pour les proportions de recadrage prédéfinies.
Une fois qu’une option de recadrage est sélectionnée, utilisez les poignées bleues pour dimensionner le recadrage sur l’image.
Rotation à droite
Utilisez cette option pour faire pivoter l’image de 90° vers la droite (dans le sens horaire).
Symétrie horizontale
Utilisez cette option pour retourner l’image horizontalement ou faire pivoter l’image de 180° sur l’axe Y.
Symétrie verticale
Utilisez cette option pour retourner l’image verticalement ou faire pivoter l’image de 180° sur l’axe X.
Réinitialiser le zoom
Si l’image a déjà été agrandie, utilisez cette option pour réinitialiser le niveau de zoom.
Ouvrir le curseur de zoom
Utilisez cette option pour afficher un curseur permettant de contrôler le niveau de zoom de l’image.
L’éditeur statique peut également être utilisé pour modifier l’image. En raison d’un espace limité, seules les options de base sont disponibles en ligne. Pour des options de modification complètes, utilisez le mode Plein écran.
Les opérations de modification d’image (recadrage, pivotement, rotation) ne sont pas prises en charge pour les images GIF. Aucune modification de ce type apportée en mode d’édition aux fichiers GIF n’est conservée.
La boîte de dialogue de conception permet à l’auteur du modèle de définir le recadrage, le téléchargement et la rotation dont dispose l’auteur du contenu lors de l’utilisation de ce composant.
Dans l’onglet Principal, vous pouvez définir une liste de largeurs en pixels pour l’image ; le composant chargera automatiquement la largeur la plus appropriée en fonction de la taille du navigateur. Il s’agit d’une partie importante des fonctions réactives du composant d’image.
En outre, vous pouvez définir quelles options de composant générales sont automatiquement activées ou désactivées lorsque l’auteur ajoute le composant à une page.
Sur l’onglet Fonctions, vous pouvez définir les options disponibles pour les auteurs de contenu lors de l’utilisation du composant, y compris les options de téléchargement, d’orientation et de recadrage.
Source
Sélectionnez l’option Autoriser le transfert des ressources depuis le système de fichiers pour permettre aux auteurs de contenu de télécharger des images à partir de leur ordinateur local. Pour forcer les auteurs de contenu à sélectionner uniquement des ressources à partir d’AEM, désactivez cette option.
Orientation
Rotation
Utilisez cette option pour permettre à l’auteur de contenu d’appliquer l’option
Rotation à droite.
Symétrie
Utilisez cette option pour permettre à l’auteur de contenu d’appliquer
les options Symétrie horizontale et Rotation verticale.
L’option Symétrie est désactivée par défaut. L’activation de cette option affichera les boutons Symétrie verticale et Symétrie horizontale dans la boîte de dialogue de modification du composant d’image. Toutefois, cette fonction n’est actuellement pas prise en charge par AEM et les modifications effectuées à l’aide de ces options ne seront pas conservées.
Recadrage
Sélectionnez l’option Autoriser le recadrage pour permettre à l’auteur du contenu de recadrer l’image dans le composant au sein de la boîte de dialogue de modification.
Remarque : Dans AEM, les proportions de recadrage sont définies en tant que hauteur/largeur. Cela diffère de la définition conventionnelle de la largeur/hauteur. Cela a été créée pour des raisons de compatibilité héritée. Les auteurs de contenu ne verront aucune différence tant que vous indiquez le nom clair des proportions, car le nom s’affiche dans l’interface utilisateur et non les proportions.
Le composant d’image prend en charge le système de style AEM.
Le composant d’image utilise la servlet d’image adaptative des composants principaux. La servlet d’image adaptative est en charge du traitement des images et de leur diffusion en flux continu. Les développeurs peuvent l’utiliser dans le cadre de leur personnalisation des composants principaux.
Les requêtes conditionnelles effectuées par le biais de Last-Modified
en-tête sont prises en charge par la servlet d’image adaptative, mais la mise en cache de l’en-tête Last-Modified
doit être activée dans Dispatcher.
L’exemple de configuration de Dispatcher d’AEM Project Archetype contient déjà cette configuration.