Composant d’image

Le composant d’image des composants principaux est un composant d’image adaptatif qui permet d’effectuer des modifications statiques.

Utilisation

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.

Fonctions réactives

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.

Prise en charge des médias dynamiques

Le composant Image (à partir de la version 2.13.0) prend en charge les ressources Contenu multimédia dynamique. Lorsqu’elles sont activées, ces fonctionnalités offre la possibilité d’ajouter des fichiers d’image Contenu multimédia dynamique par simple glisser-déposer ou via l’explorateur 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 cultures intelligentes sont également pris en charge.

Vos contenus Web créés avec les composants principaux ne peuvent pas être dotés de fonctionnalités d’image multimédia dynamique multiplate-forme puissantes, puissantes, optimisées pour les applications Sensei, hautes performances et hautes performances.

Version et compatibilité

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.

Prise en charge SVG

Les composants SVG (Scalable Vector Graphics) sont pris en charge par le composant d’image.

  • Les opérations de glisser-déplacer d’une ressource SVG à partir de DAM et le téléchargement d’un fichier SVG depuis un système de fichiers local sont pris en charge.
  • La servlet d’image adaptative diffuse le fichier SVG d’origine en flux continu (les transformations sont ignorées).
  • Pour une image SVG, les « images intelligentes » et les « tailles intelligentes » sont définies sur un tableau vide dans le modèle d’image.

Sécurité

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.

CAUTION

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.

Exemple de sortie de composant

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.

Détails techniques

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 Image prend en charge les microdonnées schéma.org.

Boîte de dialogue de configuration

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.

Onglet Ressources

Onglet Ressource de la boîte de dialogue de configuration du composant Image

  • Ressource image
    • Déposez un fichier depuis l’explorateur de ressources ou appuyez sur l’option parcourir pour effectuer un téléchargement à partir d’un système de fichiers local.
    • Appuyez ou cliquez sur Effacer pour désélectionner l’image actuellement sélectionnée.
    • Appuyez ou cliquez sur Modifier pour gérer les rendus de la ressource dans l’éditeur de ressources.

Onglet Métadonnées

Onglet Métadonnées de la boîte de dialogue de configuration du composant Image

  • Type de paramètre prédéfini : définit les types de paramètres d’image prédéfinis disponibles, soit Image Presetor Smart Crop, et n’est disponible que lorsque les fonctionnalités Contenu multimédia dynamique sont activées.
    • Paramètre d’image prédéfini : lorsque Type de paramètre prédéfini d’ image prédéfini est sélectionné, la liste déroulante ​Paramètres d’image prédéfinis est disponible, ce qui permet de sélectionner les paramètres prédéfinis de média dynamique disponibles. Cette option n’est disponible que si des paramètres prédéfinis sont définis pour la ressource sélectionnée.
    • Recadrage dynamique : lorsque le type de paramètre prédéfini de recadrage dynamique est sélectionné, le ​rendu déroulant est disponible, ce qui permet de sélectionner les rendus disponibles de la ressource sélectionnée. Cette option n’est disponible que si des rendus sont définis pour la ressource sélectionnée.
    • Modificateurs d’images - D’autres commandes de traitement d’images de Contenu multimédia dynamique peuvent être définies ici, séparées par &, quel que soit le paramètre prédéfini Type sélectionné.
  • L’image est décorative : vérifiez si l’image doit être ignorée par les dispositifs d’assistance et ne requiert donc pas de texte de remplacement. Cela s’applique uniquement aux images décoratives.
  • Texte de remplacement : alternative textuelle de la signification ou de la fonction de l’image, pour les malvoyants.
    • ​Obtenir un texte de remplacement à partir de DAM : lorsque cette option est cochée, le texte de remplacement de l’image est renseigné avec la valeur des métadonnées dc:description dans DAM.
  • Légende - Informations supplémentaires sur l’image, affichées par défaut sous l’image.
    • Obtenir la légende à partir de DAM : lorsque cette option est sélectionnée, le texte de la légende de l’image est renseigné avec la valeur des dc:title métadonnées dans DAM.
    • Afficher la légende dans une fenêtre contextuelle : si cette option est activée, la légende ne s’affiche pas sous l’image, mais dans une fenêtre contextuelle dans certains navigateurs lorsque vous pointez sur l’image.
  • Lien - Lier l'image à une autre ressource.
    • Utilisez la boîte de dialogue de sélection pour créer un lien vers une autre ressource AEM.
    • Si vous ne créez pas de lien vers une ressource AEM, saisissez l’URL absolue. Les URL non absolues seront interprétées comme relatives à AEM.
  • ID : cette option permet de contrôler l’identifiant unique du composant dans le code HTML ainsi que dans la couche de données.
    • Si rien n’est indiqué, un ID unique est généré automatiquement et peut être trouvé en examinant la page obtenue.
    • Si un ID est spécifié, il incombe à l’auteur de s’assurer qu’il est unique.
    • La modification de l’ID peut avoir un impact sur le suivi CSS, JS et de couche de données.
TIP

Les options de recadrage intelligent et les paramètres d’image prédéfinis s’excluent mutuellement. Si un auteur doit utiliser un paramètre d’image prédéfini avec un rendu de recadrage dynamique, il devra utiliser les modificateurs d’image pour ajouter manuellement des paramètres prédéfinis.

Boîte de dialogue de modification

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.

NOTE

Les fonctions de recadrage, de rotation et de zoom ne s’appliquent pas aux fichiers Contenu multimédia dynamique. Si les fonctions Contenu multimédia dynamique sont activées, toute modification apportée aux fichiers Contenu multimédia dynamique doit être effectuée par l'intermédiaire de la boîte de dialogue Configurer.

Boîte de dialogue de modification du composant Image

  • Commencer recadrage

    Icône Commencer recadrage

    Cette option ouvre une liste déroulante pour les proportions de recadrage prédéfinies.

    • Choisissez l’option Main libre pour définir votre propre recadrage.
    • Choisissez l’option Supprimer le recadrage pour afficher la ressource d’origine.

    Une fois qu’une option de recadrage est sélectionnée, utilisez les poignées bleues pour dimensionner le recadrage sur l’image.

    Options de recadrage

  • Rotation à droite

    Icône Rotation à droite

    Utilisez cette option pour faire pivoter l’image de 90° vers la droite (dans le sens horaire).

  • Rotation horizontale

    Icône Rotation horizontale

    Utilisez cette option pour retourner l’image horizontalement ou faire pivoter l’image de 180° sur l’axe Y.

  • Rotation verticale

    Icône Rotation verticale

    Utilisez cette option pour retourner l’image verticalement ou faire pivoter l’image de 180° sur l’axe X.

  • Réinitialiser le zoom

    Icône 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

    Icône Ouvrir le curseur de zoom

    Utilisez cette option pour afficher un curseur permettant de contrôler le niveau de zoom de l’image.

    Commande du curseur de zoom

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.

Options de modification statique des images

NOTE

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.

Boîte de dialogue de conception

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.

Onglet principal

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.

Onglet principal de la boîte de dialogue de conception du composant Image

  • Activer les fonctionnalités DM : lorsque cette option est cochée, les fonctionnalités d'activation de médias dynamiques sont disponibles.
  • Activer le chargement différé - Définissez si l'option de chargement différé est automatiquement activée lors de l'ajout du composant d'image à une page.
  • L'image est décorative - Définissez si l'option d'image décorative est activée automatiquement lors de l'ajout du composant d'image à une page.
  • Obtenir un autre texte du DAM - Définissez si l'option de récupération du texte de remplacement du DAM est automatiquement activée lors de l'ajout du composant d'image à une page.
  • Obtenir la légende à partir de DAM - Définissez si l’option de récupération de la légende à partir de DAM est automatiquement activée lors de l’ajout du composant d’image à une page.
  • Affichage de la légende sous forme de fenêtre contextuelle - Définissez si l’option d’affichage de la légende d’image sous forme de fenêtre contextuelle est automatiquement activée lors de l’ajout du composant d’image à une page.
  • Désactiver le suivi UUID : cochez cette case pour désactiver le suivi de l’UUID de la ressource d’image.
  • Largeurs : définit une liste de largeurs en pixels pour l'image et le composant charge automatiquement la largeur la plus appropriée en fonction de la taille du navigateur.
    • Appuyez ou cliquez sur le bouton Ajouter pour ajouter une autre taille.
      • Utilisez les poignées de capture pour réorganiser l’ordre des tailles.
      • Utilisez l’icône Supprimer pour supprimer une largeur.
    • Par défaut, le chargement des images est différé jusqu’à ce qu'elles deviennent visibles.
      • Sélectionnez l’option Désactiver le chargement différé pour charger les images au chargement de la page.
  • Qualité JPEG - Facteur de qualité (en pourcentage de 0 à 100) pour les images JPEG transformées (par exemple, redimensionnées ou recadrées).

Onglet Fonctionnalités

Sur l’onglet Fonctionnalités, 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

    Onglet Fonctionnalités de la boîte de dialogue de conception du composant Image

    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

    Onglet Fonctionnalités de la boîte de dialogue de conception du composant Image

  • Rotation
    Utilisez cette option pour permettre à l’auteur de contenu d’appliquer l’option
    Rotation à droite.

  • Retourner
    Utilisez cette option pour permettre à l’auteur de contenu d’appliquer
    les options Rotation horizontale et Rotation verticale.

    CAUTION

    L’option Retourner est désactivée par défaut. L’activation de cette option affichera les boutons Rotation verticale et Rotation 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

    Onglet Fonctionnalités de la boîte de dialogue de conception du composant Image

    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.

    • Cliquez sur Ajouter pour ajouter des proportions de recadrage prédéfinies.
    • Saisissez un nom descriptif. Celui-ci s’affichera dans la liste déroulante Commencer recadrage.
    • Entrez les proportions.
    • Utilisez les poignées de glissement pour réorganiser l’ordre des proportions.
    • Utilisez l’icône de corbeille pour supprimer des proportions.
    CAUTION

    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.

Onglet Styles

Le composant d’image prend en charge le système de style AEM.

Servlet d’image adaptative

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.

NOTE

Les requêtes conditionnelles effectuées par le biais de l’Last-Modifieden-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.

Sur cette page