Le composant Image des composants principaux est un composant d’image adaptatif qui permet d’effectuer des modifications statiques.
Le composant 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 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 charger ou sélectionner des ressources dans la boîte de dialogue de configuration.
La version actuelle du composant Image est v3, qui a été introduite avec la version 2.18.0 des composants principaux en février 2022. 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 |
---|---|---|---|
v3 | - | Compatible | Compatible |
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.
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.
Consultez la section Servlet d’image adaptative pour plus d’informations techniques sur ces fonctionnalités et des conseils sur l’optimisation de la sélection du rendu.
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.
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.
Le composant Image comprend une boîte de dialogue de configuration, qui fournit la définition, la description ainsi que les propriétés de base de lʼimage.
Hériter l’image en vedette de la page : si vous cochez cette option, lʼimage en vedette de la page liée ou l’image de la page active si l’image n’est pas liée est utilisée.
Texte secondaire pour l’accessibilité : ce champ vous permet de fournir une description de l’image pour les utilisateurs souffrant de déficience visuelle.
dc:description
dans la gestion des ressources numériques (DAM) ou de la page active si aucune ressource n’est liée.Ressource image
Ne pas fournir de texte secondaire : cette option marque lʼimage afin quʼelle soit ignorée par les technologies dʼassistance, comme les lecteurs dʼécran, dans les cas où lʼimage existe à des fins dʼillustration et ne comporte pas de signification particulière.
&
, quel que soit le type de paramètre prédéfini sélectionné.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.
Le composant Image prend en charge le système de style AEM.
Utilisez la liste déroulante pour sélectionner les styles à appliquer au composant. Les sélections effectuées dans la boîte de dialogue de modification ou dans la barre d’outils du composant ont le même effet.
Pour que le menu déroulant soit disponible, les styles doivent être configurés pour ce composant dans la boîte de dialogue de conception.
Vous pouvez définir une liste de largeurs en pixels pour l’image, le composant chargera alors 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.
Consultez la section Servlet d’image adaptative pour plus d’informations techniques sur ses fonctionnalités et des conseils sur l’optimisation de la sélection du rendu en définissant soigneusement vos largeurs.
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.
La servlet d’image adaptative tente de sélectionner le meilleur rendu pour la taille et le type d’image demandés. Il est recommandé de définir les rendus DAM et les largeurs autorisées des composants Image de façon synchronisée afin que la servlet d’image adaptative effectue le moins de traitement possible.
Cela améliore les performances et évite que certaines images ne soient pas correctement traitées par la bibliothèque de traitement des images sous-jacente.
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.
Le composant Image prend en charge la couche de données client Adobe.