Le bloc Image vous permet d’ajouter des images dans vos publications, vous pourrez leur ajouter une légende et spécifier éventuellement un lien vers le fichier image ou un autre contenu.
Pour connaître la procédure à suivre pour ajouter un bloc, veuillez consulter l’article Ajouter un nouveau bloc.
Ajouter une image
Pour ajouter une image, vous avez plusieurs possibilités :
- Par « glisser-déposer » d’un fichier dont le format est supporté par WordPress – Vous pouvez « glisser-déposer » un fichier image depuis votre ordinateur vers : un bloc Paragraphe vide, ou vers un bloc Image vide ou contenant une image (pour la remplacer). Le curseur est alors accompagné de la mention « + Copier » et le bloc où sera copiée l’image est coloré en bleu. Vous pouvez aussi « glisser-déposer » un fichier entre deux blocs, une ligne bleue matérialisera alors l’emplacement où sera insérée l’image. Lorsqu’il n’y a pas de bloc Image au préalable, celui-ci est créé, et le fichier est automatiquement ajouté à la médiathèque.
- Via l’onglet Médias de l’outil d’insertion de blocs – Cliquez sur Ouvrir/fermer l’outil d’insertion de blocs, sélectionnez l’onglet Médias puis cliquez sur Images, vous accédez alors au contenu de la médiathèque, ou cliquez sur Openverse, vous accédez alors aux images proposées sur Openverse. Effectuez un double-clic sur une image pour l’insérer dans un bloc Image. Vous pouvez aussi « glisser-déposer » une image de l’onglet Médias vers un bloc Image vide ou contenant déjà une image.
- En insérant un bloc Image.
Lorsque vous insérez un bloc Image, trois options s’offrent à vous : Téléverser, Médiathèque, Insérer à partir d’une URL.
Téléverser et Médiathèque vous permettent d’ajouter une image à la médiathèque ou de choisir une image qui y est déjà présente et de l’intégrer dans votre contenu.
Il suffit d’ajouter l’image à partir de l’onglet Téléverser des fichiers, ou de la sélectionner dans l’onglet Médiathèque. Dans l’onglet Médiathèque, la personnalisation des détails de l’image tels que le Texte alternatif, le Titre, la Légende et la Description, peut également être utile pour le référencement et la navigation future dans votre Médiathèque.
Lorsque vous cliquez sur l’option Insérer à partir d’une URL, un champ texte est affiché dans lequel vous pouvez saisir ou coller l’URL de l’image, cliquez ensuite sur le bouton Appliquer pour valider l’URL. L’image est alors affichée dans le bloc Image et l’outil Téléverser une image externe est ajouté à la barre d’outils du bloc. Cet outil vous permet, d’un simple clic, de téléverser l’image ciblée par l’URL dans votre médiathèque, et de remplacer automatiquement l’image, initialement externe, par l’image téléversée dans votre médiathèque. Cette option offre donc un moyen rapide de téléverser une image dans votre médiathèque.
Vous pouvez aussi intégrer le bloc Image, puis y glisser-déposer une image, ce qui la téléversera automatiquement dans votre médiathèque.
Une fois l’image ajoutée au bloc, vous pouvez saisir une légende.
Les légendes peuvent être ajoutées aux images de deux façons :
- Si vous souhaitez ajouter une légende à une instance particulière d’une image, saisissez-la simplement dans l’espace Légende situé sous l’image dans l’éditeur.
- Si vous souhaitez que la légende soit la même pour toutes les instances d’une image dans toutes les publications, vous devez alors ajouter la légende à l’image dans la Médiathèque.
Barre d’outils du bloc
Chaque bloc dispose d’une barre d’outils vous permettant de le manipuler directement dans l’éditeur. Parmi ces outils, on distingue les outils communs, présentés dans l’article Barre d’outils des blocs, et d’éventuels outils spécifiques, décrits ci-dessous.
Modifier le type ou le style du bloc
Vous avez la possibilité de transformer le type du bloc Image en bloc Colonnes, Groupe, Média et texte, Bannière, Galerie et Fichier. La transformation en bloc Groupe ou Colonnes, vous offre l’opportunité de mettre un ou plusieurs blocs à côté de votre image, et de définir la couleur d’arrière-plan du bloc (pour le bloc Groupe). La transformation en bloc Média et texte vous permet d’ajouter un ou des blocs Paragraphe. La transformation en bloc Bannière, vous propose d’insérer un texte en surimpression sur l’image. Quant à la transformation en bloc Galerie, celle-ci vous incite à ajouter d’autres images pour compléter la galerie. Enfin, la transformation en bloc Fichier crée un bloc composé d’un lien vers l’image accompagné d’un bouton Télécharger.
Alignement
Concernant l’alignement, précisons qu’il est possible d’aligner une image dans un paragraphe. Pour cela vous devez d’abord insérer l’image juste au-dessus du bloc Paragraphe cible. A partir de là, cliquez sur l’image et sélectionnez l’alignement à gauche ou à droite, ce qui fusionnera l’image dans le bloc Paragraphe. Cette vidéo vous montre comment aligner une image dans un bloc Paragraphe :
Au fur et à mesure que la prise en charge du nouvel éditeur est ajouté à nos thèmes, vous commencerez à voir des icônes pour les images en grande et en pleine largeur. Ces deux tailles d’image vous permettront d’étendre celle-ci au-delà de la largeur habituelle du contenu du thème. La vidéo ci-dessous illustre ces possibilités :
Appliquer un filtre duotone
Vous pouvez créer un filtre duotone qui sera appliqué à l’image sans changer l’image originale. L’effet duotone fonctionne très bien pour les images ayant de forts contrastes.
Vous pouvez sélectionner deux couleurs une pour les ombres et une pour les mises en évidence en cliquant sur une des options proposées par le thème. Ou, vous pouvez choisir deux couleurs via le sélecteur en cliquant sur les ronds blancs présents à gauche et à droite dans les aplats de couleur.
Pour effacer le filtre duotone, il suffit de cliquer sur le bouton Effacer.
Insérer un lien
Vous pouvez choisir si un clic sur l’image ouvrira le fichier multimédia original, la page du fichier joint ou une URL personnalisée de votre choix, ou encore une vue agrandie de l’image.
- Cliquez sur l’outil Insérer un lien.
- Vous avez alors quatre possibilités :
- Indiquer une URL, via Collez l’URL ou saisissez une recherche.
- Faire un Lien vers le fichier image.
- Faire un Lien vers la page du fichier joint.
- Agrandir au clic.
- Une fois choisie la nature du lien (URL, fichier image, page du fichier joint), vous pouvez cliquez sur le bouton Réglages de lien (icône flèche vers le bas) pour :
- Activer ou non l’option Ouvrir dans un nouvel onglet.
- Donner une valeur à l’Attribut rel du lien.
- Définir la Classe CSS du lien.
- Si vous souhaitez modifier la nature du lien, cliquez sur l’outil Modifier (icône crayon) ou si le lien est une URL, sur l’outil Retirer le lien (pour pouvoir changer de type de lien) ou Désactiver le dépliement au clic (si vous avez optez pour agrandir l’image au clic).
- Si vous souhaitez supprimer le lien, cliquez sur l’outil Retirer le lien.
- Cliquez en dehors du bloc Image pour terminer l’action.
Lorsque vous optez pour que le lien cible une URL de votre choix, vous pouvez soit coller l’URL dans le champ, soit faire une recherche parmi les publications, catégories ou étiquettes de votre site en saisissant un mot clé. Patientez quelques instants pendant la recherche, le délai est variable selon le nombre de publications, catégories ou étiquettes contenues dans votre site. Si des publications, catégories ou étiquettes correspondent à la recherche, elles seront affichées dans une liste déroulante et il suffira alors de cliquer sur la publication, catégorie ou étiquette souhaitée. Enfin, pour valider l’URL, cliquez sur le bouton Appliquer.
Cette vidéo vous montre comment insérer un lien sur l’image vers un autre contenu du site (ici la page d’archive d’une étiquette par le biais d’une recherche) :
Si vous avez choisi de faire un lien vers le Fichier média, lorsque le lien de l’image sera activé, cela aura pour effet d’afficher le fichier média seul.
Enfin, si vous avez choisi de faire un lien vers la Page du fichier joint, un clic sur le lien entraînera l’affichage de la page du fichier média contenant le titre du média, le média lui-même et, selon le thème, d’autres métadonnées comme la date de téléversement du fichier, son auteur ou autrice, etc.
Agrandir au clic
L’option Agrandir au clic ajoute une petite icône sur l’image dans l’interface publique du site qui permet de visualiser l’image en plein écran dans une fenêtre modale, cliquez à nouveau sur l’image ou cliquez sur la croix en haut à droite de la fenêtre modale pour revenir à la publication.
Recadrer
L’outil Recadrer vous permet de modifier à la fois la taille et le cadrage de l’image.
Lorsque vous cliquez sur l’outil Recadrer, trois nouveaux outils (Zoom, Proportion de taille, Pivoter) sont disponibles dans la barre d’outils du bloc Image et un quadrillage est appliqué à l’image pour vous guider :
L’outil Zoom vous permet d’indiquer un pourcentage de zoom, en déplaçant le curseur et/ou en utilisant les flèches haut et bas jusqu’au niveau de zoom souhaité, ou encore en saisissant la valeur dans le champ texte. Lorsque le niveau de zoom vous convient, cliquez sur Appliquer.
L’outil Proportion de taille affiche une liste d’options telles que Originale, Carrée, et différentes proportions en mode Paysage (16:10, 16:9, 4:3 et 3:2) ou Portrait (10:16, 9:16, 3:4 et 2:3).
Cliquez sur l’option souhaitée, les parties de l’image qui ne seront plus affichées sont alors obscurcies. Si les proportions vous conviennent, cliquez sur Appliquer.
Lorsque vous avez indiqué un niveau de zoom ou modifié les proportions de taille, un curseur de déplacement vous permet de modifier le cadrage de l’image en la déplaçant.
L’outil Pivoter applique une rotation de 90° vers la droite à chaque clic sur l’outil. Cliquez sur Appliquer pour valider la rotation.
Vous pouvez effacer toutes les modifications apportées à tout moment en cliquant sur le bouton Annuler, l’outil Recadrer devient alors inactif.
Ajouter du texte au-dessus de l’image
Cet outil vous permet d’ajouter un texte « en surimpression » sur votre image et convertit donc automatiquement votre bloc Image en un bloc Bannière.
Ajouter une légende
Si vous avez saisi une légende pour l’image dans la médiathèque, celle-ci est automatiquement ajoutée et visible sous l’image. Si vous souhaitez la retirer, cliquez sur l’outil Supprimer la légende.
Dans le cas contraire, cliquez sur l’outil Ajouter une légende puis saisissez le texte de la légende.
Si vous souhaitez utiliser une légende différente de celle associée à l’image dans la médiathèque, cliquez sur l’outil Supprimer la légende, puis sur l’outil Ajouter une légende afin d’en saisir une nouvelle.
Remplacer
Cet outil vous permet de sélectionner une nouvelle image pour votre bloc.
Cliquez sur l’outil Remplacer, trois options sont alors proposées :
- Ouvrir la médiathèque pour sélectionner une autre image présente dans la médiathèque,.
- Téléverser pour ajouter une nouvelle image à votre médiathèque puis l’utiliser pour remplacer l’image courante.
- Modifier pour saisir une autre URL d’image (cliquez ensuite sur le bouton Envoyer pour valider la nouvelle URL). Vous pouvez aussi copier l’URL de l’image en cliquant sur le bouton Copier.
Réglages du bloc
Selon les blocs, divers réglages sont disponibles dans la colonne latérale des réglages. Parmi ceux-ci, on distingue les réglages communs (à une majorité de blocs) des réglages spécifiques, décrits ci-dessous.
Réglages
Texte alternatif
Dans la section Réglages, un champ texte permet d’ajouter un Texte alternatif (attribut alt), qui est essentiel pour l’accessibilité et le référencement naturel (SEO). En savoir plus sur l‘accessibilité des médias.
Proportion de taille
La liste déroulante Proportion de taille vous propose de choisir entre la Taille d’origine et d’autres formats classiques comme Carrée 1:1, ou Standard 4:3 ou encore Portrait 3:4. Si vous choisissez une autre valeur que la Taille d’origine, vous pourrez choisir comment le format s’applique à l’image via les options Couvrir (l’image est déformée pour couvrir le format choisi) ou Contenir (l’image est contenue dans le format choisi sans déformation).
Largeur et Hauteur
Une fois l’image ajoutée dans l’éditeur, vous pouvez redimensionner et aligner les images pour qu’elles s’adaptent mieux au contenu environnant. Le redimensionnement peut s’effectuer de deux manières, à l’aide des poignées de redimensionnement ou avec les champs Hauteur et Largeur dans la section Réglages de la colonne latérale des réglages.
Pour redimensionner une image, cliquez sur celle-ci afin de faire apparaître les poignées de redimensionnement. Ensuite, cliquez sur l’une des poignées de redimensionnement et faites la glisser jusqu’à atteindre la taille souhaitée pour l’image.
Ou saisissez uniquement une Largeur personnalisée (la Hauteur sera recalculée automatiquement pour respecter la Proportion de taille, la valeur reste sur Automatique) ou uniquement une Hauteur personnalisée (dans ce cas c’est la Largeur qui sera recalculée), ou personnaliser les deux valeurs. Dans ce dernier cas, la valeur dans la liste Proportion de taille devient Personnalisé.
Résolution
La liste déroulante Résolution vous propose de choisir une des tailles définies dans l’écran Réglages des médias : Miniature, Moyenne, Grande ou Taille originale. La valeur choisie ici déterminera le fichier qui sera utilisé pour afficher l’image.
Aussi, par exemple, si vous choisissez la taille Moyenne (image redimensionnée à 300 pixels en largeur), le bloc Image affichera le fichier correspondant à l’image de taille moyenne, soit « nom-de-l-image-300xaaa », même si vous modifiez par la suite les dimensions de l’image. Gardez à l’esprit que ce sera donc toujours l’image de ce fichier qui sera affichée, redimensionnée ou non, selon que vous aurez fait des modifications pour la Proportion de taille.
Filtres
Pour accéder aux réglages des Filtres, activez l’onglet Styles dans la colonne latérale des réglages.
Pour appliquer un filtre, cliquez sur le bouton Duotone et cliquez sur le filtre souhaité. Notez que vous ne pouvez appliquer qu’un filtre défini dans le thème. Pour appliquer un autre filtre duotone, utilisez l’outil Appliquer un filtre duotone.
Pour supprimer le filtre, cliquez sur l’option Non défini ou cliquer sur l’outil Options des Filtres puis sur Réinitialiser.
Avancé
L’onglet Avancé vous permet d’accéder aux réglages avancés des blocs.
Traduit par Jenny Dupuy
Relu par Patrick Olivaud & Marie Comet
Dernière mise à jour le 2 avril 2024
Contribuer à la documentation en français de WordPress
Journal des modifications
2 avril 2024 – Jenny Dupuy – Réorganisation des paragraphes pour tenir compte de l’ordre des outils dans la barre d’outils, modification du paragraphe Insérer un lien (ajout de agrandir au clic), ajout du paragraphe Filtres, mise en conformité avec la version 6.5.
29 novembre 2023 – Jenny Dupuy – Ajout des fonctionnalités d’insertion d’image en glisser-déposer, et via l’onglet Médias de l’outil d’insertion, mise à jour de la capture d’écran de la barre d’outils, déplacement des paragraphes sur les filtres duotones, ajout de la fonctionnalité Ajouter une légende, modification de la section Réglages de l’image en Réglages, Taille de l’image en Proportion de taille, Dimensions de l’image en Résolution, mise à jour des réglages, suppression de la vidéo montrant le redimensionnement, ajout de l’option Agrandir au clic, en conformité avec la version 6.4.
16 février 2023 – Marie Comet – Mise à jour de la capture d’écran de la barre d’outils du bloc, en conformité avec WordPress 6.1. Modifications du paragraphe Appliquer un filtre duotone puisque les présélections sont différentes selon le thème.