Blocs

Blocs »Bloc d’image

Table des matières

Barre d’outils du bloc
Ajout d’une image
Modifier l’image
Redimensionnement des images
Alignement des images
Images en mode Large et Pleine largeur
Légendes
Réglages du bloc
Réglages de l’image
Réglages du lien
Avancé

Il est possible d’ajouter le bloc d’image à une page en cliquant sur le bouton Ajouter un bloc. Vous pouvez également saisir /image et appuyer sur Entrée.

Ajoutez des images avec une commande de touche de raccourci.
Ajoutez des images avec une commande commençant par une barre oblique.

Des instructions détaillées sur l’ajout de blocs sont disponibles ici.


Barre d'outils du bloc

Chaque bloc possède des commandes spécifiques afin de faciliter sa modification dans l’éditeur. Vous trouverez ci-dessous un exemple de la barre d’outils du bloc d’image.

Icônes Large ou Pleine largeur.
Icônes Large ou Pleine largeur, propres aux blocs d’images (non disponibles dans tous les thèmes).

Les icônes de la barre d’outils du bloc d’image sont, de gauche à droite :

  • Modifier le type de bloc
  • Alignement à gauche
  • Centre
  • Alignement à droite
  • Large (si le thème prend cette option en charge)
  • Pleine largeur (si le thème prend cette option en charge)
  • Modifier
  • Plus d’options

↑ Table des matières ↑

Ajout d'une image

Le panneau des options de média proposera trois options : Charger, Bibliothèque de médias et Insérer à partir d’une URL.

Trois options vous permettent d'ajouter des images : Charger, Bibliothèque de médias et Insérer à partir d'une URL.
Trois options vous permettent d’ajouter des images : Charger, Bibliothèque de médias et Insérer à partir d’une URL.

Charger et Bibliothèque de médias vous permettent d’ajouter ou de choisir dans votre bibliothèque le média avant de l’intégrer à votre page.

Ajoutez l’image à partir de l’onglet Charger les fichiers, puis sélectionnez-la dans l’onglet Bibliothèque de médias. La personnalisation des détails de la pièce jointe à l’image, comme le titre, la légende, le texte alternatif et la description, dans la fenêtre Bibliothèque de médias peut également s’avérer utile pour l’optimisation des moteurs de recherche et la consultation ultérieure de votre bibliothèque de médias.

Chargez ou sélectionnez une image à partir de votre Bibliothèque de médias, ajoutez les informations relatives à l'image, puis appuyez sur Sélectionner.
Chargez ou sélectionnez une image à partir de votre Bibliothèque de médias, ajoutez les informations relatives à l’image, puis appuyez sur Sélectionner.

Vous pouvez rechercher des images dans notre Bibliothèque de photos gratuites proposée par Pexels. Cliquez sur Bibliothèque de médias, puis sur l’icône de l’image dans l’angle supérieur gauche de la fenêtre pop-up. Sélectionnez Bibliothèque de photos gratuites pour rechercher une image. Saisissez un mot ou une expression dans l’espace « Rechercher des photos gratuites » afin de trouver des images. Une fois que vous avez trouvé un image, cliquez dessus pour l’intégrer à votre document.

Cliquez sur Bibliothèque de médias, puis sur l'icône de l'image dans l'angle supérieur gauche de la fenêtre pop-up. Sélectionnez Bibliothèque de photos gratuites pour parcourir les photos fournies par Pexels afin d'en trouver une.
Recherchez une image dans la Bibliothèque de photos gratuites proposée par Pexels

Pour en savoir plus sur la Bibliothèque d’images gratuites, cliquez ici.


↑ Table des matières ↑

Modifier l'image

Icône Crayon pour modifier un bloc d'image

Cette option, représentée par une icône en forme de crayon, vous permet de sélectionner un nouveau fichier d’image pour votre bloc. Utilisez-la si vous devez remplacer le fichier d’image de votre bloc d’image, ou modifier le titre ou le texte alternatif.


↑ Table des matières ↑

Redimensionnement des images

Une fois l’image ajoutée à l’éditeur, vous pouvez la redimensionner et l’aligner afin de bien l’adapter au contenu qui l’entoure.

Redimensionnez une image en glissant-déposant ses poignées.
Redimensionnez une image en glissant-déposant ses poignées.

Pour redimensionner une image, cliquez sur cette dernière pour afficher les poignées de redimensionnement. Cliquez ensuite sur les poignées de redimensionnement et réglez l’image à la taille souhaitée.

Vous pouvez également ajuster, dans les réglages du bloc à droite, la largeur et la hauteur afin de régler la taille de l’image. Les réglages du bloc contiennent, en outre, des options pratiques pour configurer l’image sur 100, 75, 50 et 25 % de sa taille d’origine.


↑ Table des matières ↑

Alignement des images

Alignez une image dans un bloc de paragraphe.
Alignez une image dans un bloc de paragraphe.

Si vous souhaitez aligner une image dans un paragraphe, vous devez commencer par insérer l’image juste au-dessus du bloc de paragraphe cible.

Boutons d'alignement - Alignement à gauche en surbrillance

Cliquez sur l’image et sélectionnez l’alignement à gauche ou à droite. Cette action permet de fusionner l’image dans le bloc de paragraphe.

Enfin, redimensionnez l’image en fonction de la largeur et de la hauteur souhaitées.


↑ Table des matières ↑

Images en mode Large et Pleine largeur

La prise en charge du nouvel éditeur ayant été ajoutée à nos thèmes, les icônes de configuration des images en mode Large et Pleine largeur sont disponibles. Ces deux tailles d’image vous permettent d’agrandir l’image au-delà de la largeur usuelle du contenu du thème.

Une image « Large » dans l'éditeur.
Une image « Large » dans l’éditeur.

↑ Table des matières ↑

Légendes

Vous pouvez ajouter des légendes aux images de deux façons. Si vous souhaitez ajouter une légende à une instance particulière d’une image, saisissez-la dans l’espace dédié à la légende sous l’image dans l’éditeur.

Si vous souhaitez que la même légende apparaisse dans toutes les instances d’une image, vous devez l’ajouter à l’image dans la Bibliothèque de médias en cliquant sur le bouton Modifier sur le bloc d’image.


↑ Table des matières ↑

Réglages du bloc

Pour chaque bloc, la colonne latérale de l’éditeur contient des options spécifiques qui peuvent offrir davantage d’options de personnalisation que celles disponibles dans la barre d’outils du bloc. Si la colonne latérale ne s’affiche pas, cliquez sur l’icône représentant un pignon en regard du bouton Publier.

Les réglages du bloc sont disponibles dans la colonne latérale.
Les réglages du bloc sont disponibles dans la colonne latérale.

↑ Table des matières ↑

Réglages de l'image

Les réglages de l’image proposent un champ de texte qui permet d’ajouter du texte alternatif. Cette description supplémentaire est importante pour l’accessibilité et l’optimisation des moteurs de recherche.

Vous pouvez modifier les images en utilisant des pourcentages ou des dimensions en pixel.
Vous pouvez modifier les images en utilisant des pourcentages ou des dimensions en pixel.

Vous pouvez également modifier la largeur et la hauteur d’une image par incrément de 25 % ou à l’aide de dimensions en pixel précises.

L'éditeur WordPress permet de modifier la taille d'une image de plusieurs façons.
L’éditeur WordPress permet de modifier la taille d’une image de plusieurs façons.

↑ Table des matières ↑

Réglages du lien

Les réglages du lien vous permettent de transformer vos images en hyperlien. Vous avez la possibilité de choisir l’action déclenchée par un clic sur l’image : ouverture d’une page de pièce jointe, ouverture du fichier média d’origine ou ouverture d’une URL personnalisée de votre choix.

Si vous optez pour l’ouverture d’une URL personnalisée, saisissez l’URL à associer à l’image dans le champ URL du lien. Vous pouvez également préciser si le lien doit s’ouvrir ou non dans un nouvel onglet.

Votre image peut être liée à une page de pièce jointe, un fichier média ou une URL personnalisée.
Votre image peut être liée à une page de pièce jointe, un fichier média ou une URL personnalisée.

↑ Table des matières ↑

Avancé

L’onglet Avancé vous permet d’ajouter une classe CSS à votre bloc. Vous pouvez ainsi écrire un CSS personnalisé et configurer le style du bloc d’image à votre guise
.

La section Avancé vous permet d'ajouter une classe CSS à votre bloc.
La section Avancé vous permet d’ajouter une classe CSS à votre bloc.