Image

Ajouter une image#

Pour insérer une image dans votre publication WordPress avec Gutenberg, plusieurs méthodes sont possibles :

1. Glisser-déposer :

• Faites glisser un fichier image depuis votre ordinateur vers un bloc Paragraphe vide ou un bloc Image (vide ou avec image pour remplacement).
• Le curseur indique « + Copier », le bloc cible est surligné en bleu.
• Vous pouvez aussi déposer l’image entre deux blocs, une ligne bleue indique l’emplacement d’insertion.
• Si aucun bloc Image n’est présent, l’action crée le bloc et ajoute le fichier à la médiathèque automatiquement.

1. Outil d’insertion via l’onglet Médias :

• Ouvrez l’outil d’insertion de blocs, sélectionnez l’onglet Médias, puis Images.
• Choisissez une image dans votre médiathèque ou passez par l’onglet Openverse pour accéder à des images libres.
• Double-cliquez sur une image pour l’insérer dans un bloc Image.
• Vous pouvez aussi glisser-déposer depuis cet onglet dans un bloc Image existant ou vide.

1. Insertion directe d’un bloc Image :
   Lors de l’insertion du bloc Image, trois options s’offrent à vous :

• Téléverser : permet d’ajouter une nouvelle image depuis votre appareil dans la médiathèque.
• Médiathèque : permet de sélectionner une image déjà présente dans votre médiathèque.
• Insérer à partir d’une URL : collez l’adresse externe de l’image pour l’intégrer temporairement ou la téléverser dans la médiathèque.

Description des options d’ajout#

• Téléverser et Médiathèque : Ajoutent ou sélectionnent une image dans la médiathèque.
• Dans l’onglet Médiathèque, vous pouvez ajouter ou modifier :
• Le Texte alternatif (important pour l’accessibilité et SEO)
• Le Titre
• La Légende
• La Description

Insertion à partir d’une URL#

• Collez ou saisissez l’URL de l’image dans le champ prévu, puis cliquez sur Appliquer.
• L’image s’affiche alors dans le bloc.
• Un outil supplémentaire, Téléverser une image externe, permet de sauvegarder cette image dans la médiathèque en un clic, remplaçant l’image externe par la locale.

Ajouter une légende#

• Après ajout, vous pouvez saisir une légende sous l’image dans l’éditeur.
• Deux façons d’ajouter une légende :
• Légende spécifique à cette instance : Tapez directement dans la zone sous l’image.
• Légende globale : Saisissez la légende dans la médiathèque pour qu’elle s’applique à toutes les occurrences de cette image.

Barre d’outils du bloc#

Chaque bloc dispose d’une barre d’outils située au-dessus ou au-dessus du bloc, permettant de manipuler ses propriétés.

Cette barre contient des outils communs à la plupart des blocs ainsi que des outils spécifiques au bloc Image.

Modifier le type ou le style du bloc#

Il est possible de transformer le bloc Image en d’autres types de blocs :

• Colonnes ou Groupe : pour placer plusieurs blocs côte à côte et, dans le cas du groupe, définir une couleur d’arrière-plan.
• Média et texte : ajoute un ou plusieurs blocs paragraphe à côté de l’image.
• Bannière : superpose du texte à l’image (texte en surimpression).
• Galerie : permet d’ajouter plusieurs images dans une mise en page de galerie.
• Fichier : convertit l’image en lien vers le fichier avec un bouton de téléchargement.

Alignement#

• Pour aligner une image dans un bloc Paragraphe, insérez l’image juste au-dessus du bloc paragraphe ciblé, cliquez sur l’image et sélectionnez un alignement à gauche ou à droite.
• Cela fusionnera l’image dans le bloc paragraphe, faisant ainsi flotter l’image selon l’alignement choisi.

• Les options Grande largeur et Pleine largeur permettent d’étendre l’image au-delà de la largeur du contenu classique, selon le thème.

Appliquer un filtre duotone#

• Un filtre duotone personnalise l’apparence de l’image en modifiant ses couleurs via deux tons :
• Un pour les ombres
• Un pour les hautes lumières
• Sélectionnez un filtre prédéfini proposé par le thème ou créez un filtre personnalisé avec le sélecteur de couleurs.
• Pour supprimer le filtre, cliquez sur le bouton Effacer.

Insérer un lien#

Il est possible d’ajouter un lien cliquable sur l’image avec plusieurs options :

1. Cliquez sur Insérer un lien dans la barre d’outils.
2. Choisissez parmi les possibilités :

• Saisir une URL personnalisée.
• Lier vers le fichier image original.
• Lier vers la page du fichier joint (avec plus d’informations).
• Activer l’option Agrandir au clic (affiche l’image en popup plein écran).

1. Avec Réglages de lien (flèche vers le bas), vous pouvez :

• Ouvrir dans un nouvel onglet.
• Ajouter un attribut rel au lien.
• Définir une classe CSS personnalisée.

1. Pour modifier ou supprimer le lien, utilisez les outils Modifier, Retirer le lien ou Désactiver le dépliement au clic selon les cas.
2. Cliquez hors du bloc pour valider.

Lors de la saisie d’une URL personnalisée, vous pouvez également effectuer une recherche dans les contenus existants de votre site (publications, catégories, étiquettes) et sélectionner une correspondance pour créer un lien interne.

Recadrer#

L’outil Recadrer permet de modifier la taille et le cadrage de l’image directement dans l’éditeur grâce à trois sous-outils :

• Zoom : augmente ou diminue la taille d’affichage de l’image.
• Proportion de taille : choix parmi des formats classiques (original, carré, paysage 16:9, portrait 3:4, etc.).
• Pivoter : applique une rotation de 90° vers la droite à chaque clic.

Un quadrillage guide le recadrage et un curseur permet de déplacer l’image pour ajuster le cadrage.

Cliquez sur Appliquer pour valider ou sur Annuler pour annuler toutes les modifications.

Ajouter du texte au-dessus de l’image#

Cet outil convertit le bloc Image en un bloc Bannière, ce qui permet d’insérer du texte en surimpression sur l’image.

Ajouter une légende#

• La légende saisie dans la médiathèque est automatiquement affichée sous l’image dans le bloc.
• Pour la retirer, cliquez sur Supprimer la légende dans la barre d’outils.
• Pour ajouter une légende spécifique uniquement à cette instance de l’image, cliquez sur Ajouter une légende et saisissez le texte.
• Pour utiliser une légende différente de celle associée en médiathèque, supprimez la légende existante puis ajoutez-en une nouvelle manuellement.

Remplacer#

Cet outil permet de changer l’image actuelle du bloc. Trois sources d’image sont possibles :

1. Ouvrir la médiathèque : choisir une autre image déjà présente.
2. Téléverser : ajouter une nouvelle image depuis votre appareil et l’utiliser immédiatement.
3. Modifier URL : saisir une nouvelle URL d’image externe. Vous pouvez aussi copier l’URL actuelle.

Réglages du bloc#

Dans la colonne latérale des réglages, plusieurs options spécifiques au bloc Image sont disponibles.

Texte alternatif#

• Champ important pour l’accessibilité et le référencement naturel (SEO).
• Ce texte est utilisé par les lecteurs d’écran et affiché si l’image ne peut être chargée.

Proportion de taille#

• Permet de sélectionner des formats prédéfinis pour l’image :
• Taille d’origine
• Carrée 1:1
• Standard 4:3
• Portrait 3:4
• Les options Couvrir ou Contenir définissent le comportement d’affichage :
• Couvrir : l’image est recadrée et ajustée pour remplir le format, pouvant déformer l’image.
• Contenir : l’image est ajustée sans déformation, laissant un espace vide si besoin.

Largeur et Hauteur#

• L’image peut être redimensionnée :
• Directement avec les poignées de redimensionnement autour de l’image.
• En saisissant des valeurs numériques pour la largeur et la hauteur dans la colonne latérale.
• La proportion est respectée automatiquement si un seul paramètre est modifié, sinon le paramètre devient personnalisé.

Résolution#

• Choix de la taille de l’image à afficher dans le bloc parmi les formats définis dans les réglages médias :
• Miniature
• Moyenne
• Grande
• Taille originale
• Cette sélection définit quel fichier image sera chargé, indépendamment du redimensionnement appliqué dans l’éditeur.

Filtres#

• Accessible via l’onglet Styles dans la colonne latérale.
• Le bouton Duotone permet d’appliquer un filtre préconfiguré par le thème.
• Pour retirer un filtre, sélectionnez l’option Non défini ou utilisez Réinitialiser dans les options des filtres.

Avancé#

L’onglet Avancé offre accès aux réglages supplémentaires personnalisés des blocs, notamment :

• Classes CSS personnalisées pour appliquer des styles spécifiques via le thème ou CSS personnalisé.
• Attributs supplémentaires pour les développeurs ou utilisateurs avancés.

Ajouter un nouveau bloc
Accessibilité des médias dans WordPress
Réglages communs des blocs
Réglages avancés des blocs
Réglages des médias