WordPress propose des outils pour modifier les images insérées dans les articles.
La bibliothèque de médias permet de réutiliser des images déjà envoyées pour un autre article.
La barre d’outils rapides pour les images permet de facilement modifier l’affichage d’une image (légende, taille, alignement…) ou de la recomposer : recadrage, rotation ou retournement.
Insérer des images depuis la bibliothèque de médias
Les images déjà envoyées sur le site sont disponibles dans la bibliothèque de médias .
Dans la fenêtre d’édition d’article, cliquer sur le bouton 
.
Cliquer sur Bibliothèque de médias :
WordPress permet de filtrer la recherche des images dans la bibliothèque :
Les critères de recherche disponibles :
- le type d’élément :
tous les médias,
uniquement les éléments insérés dans l’article en cours d’édition,
les images,
les sons,
les vidéos,
les éléments envoyés non intégrés dans un article (« Non-joint »), - la date à laquelle l’image a été envoyée vers le site à partir un ordinateur en local ,
- un texte à rechercher dans le titre ou dans la description des articles.
Sélectionner des images en cliquant sur leurs vignettes. Les touches CTRL (sélections isolées) et Majuscule (sélection contiguë) permettent de sélectionner plusieurs images. Les images sélectionnées ont une coche en haut et à droite de leur vignette. En cliquant sur la coche, on désélectionne l’image :
Cliquer ensuite sur le bouton Insérer dans l’article :
Á noter : les paramètres apparaissant dans la colonne de droite ( DÉTAILS DU FICHIER ATTACHÉ ) correspondent à l’image dont la vignette a une coche sur fond bleu.
Les images sélectionnées apparaissent dans l’article en édition (la mise en page dépend de la taille des images et des alignements choisis) :
Cliquer sur le bouton 
ou le bouton 
. Cela permet de voir ce qui s’affichera pour un visiteur du site :
Supprimer une image définitivement
Sélectionner une vignette dans la bibliothèque de médias. Dans la colonne de droite, cliquer sur 
:
WordPress.com affiche un message d’alerte, car la suppression de l’image sera irréversible (il faudra renvoyer l’image si on veut l’utiliser de nouveau) et elle disparaîtra de tous les articles où elle a pu être insérée :
La barre d’outils rapides pour les images
Dans l’éditeur d’articles, cliquer sur une image. La barre d’outils rapides pour les images apparaît :
Outils d’alignement
Cliquer sur l’une des quatre icônes d’alignement 
.
Voici l’effet des différents alignements disponibles.
), on obtient le même effet qu’avec les icônes d’alignement de la barre d’outils rapides pour les images.Alignement à gauche
Centrer
Aligner à droite
Pas d’alignement
Si l’image a une légende, elle est renvoyée à la ligne :
Si l’image n’a pas de légende elle s’insère dans le paragraphe :
On notera que l’option « Pas d’alignement » des images n’a pas d’équivalent dans la mise en forme des paragraphes.
Outil de suppression
Cliquer sur une image puis cliquer sur l’icône 
qui apparaît dans la barre d’outils rapides pour les images :
Outil de modification
Cliquer sur une image puis cliquer sur l’icône 
qui apparaît dans la barre d’outils rapides pour les images. Une fenêtre apparaît nous permettant de redéfinir les paramètres associés à l’image. Lorsqu’on a modifié les paramètres, on valide en cliquant sur le bouton 
.
Descriptif et alignement
- Légende,
- Texte alternatif (ce qui s’affiche à la plage de l’image si elle ne peut être chargée dans le navigateur),
- Alignement
L’alignement est la position que prend l’image par rapport au texte qui l’entoure.
Réglages de l’affichage
- Taille
WordPress.com propose un choix de taille dont la taille personnalisée qui permet de redéfinir largeur et hauteur en saisissant des valeurs :
À noter : les tailles personnalisées n’agissent que sur l’affichage de l’image, elles ne modifient pas la taille de l’image stockée sur le site (le fichier de l’image est inchangé, ce n’est qu’au moment de l’affichage que WordPress change la taille de ce qu’il fait voir aux visiteurs). Il est donc possible d’agrandir ou diminuer plusieurs fois la taille de l’image sans perte de qualité.
WordPress permet de créer (ou non) un lien avec l’image.
Fichier média crée un lien vers le fichier de l’image sur le serveur qui héberge le site :
Quand un visiteur du site cliquera sur l’image, celle-ci apparaîtra dans une page web , où il sera par exemple possible de la zoomer :
Page du fichier attaché crée un lien vers une page spécifique pour l’affichage des images :
Voici un exemple de ce que peut voir un visiteur du site :
Lien personnalisé permet d’associer une adresse web (url) quelle qu’elle soit. Par exemple, nous pouvons associer une vidéo. Quand un visiteur du site cliquera sur l’image, il sera redirigé vers la page présentant la vidéo :
Il est bien évidemment possible de n’associer aucun lien à l’image. Dans ce cas, si un visiteur clique sur l’image… il ne se passera rien :
Options avancées
- Attribut « Title »de l’image
L’attribut « Title »permet d’afficher un texte lorsqu’une image est survolée par la souris :
- Classe css de l’image
La classe css permet d’attribuer une mise en forme à un élément d’une page web. Pour une image, on peut par exemple définir une bordure (épaisseur, couleur, type…).
Par exemple, cela permet d’entourer certaines images (celles à qui on associe la classe css) par une bordure en pointillé :
- Bordure de l’image
WordPress.com permet de créer une bordure autour d’une image en choisissant l’épaisseur (en pixels) et la couleur :
Pour définir la couleur, il faut cliquer sur la case Couleur puis choisir une couleur avec l’outil de palette.
La bordure apparaît autour de l’image dans l’éditeur d’article (après avoir cliqué sur le bouton ) :
Et voici ce que pourrait voir un visiteur qui accède au site depuis son ordinateur :
- Définition de marges
Les marges sont un espace laissé entre une image et le texte qui l’entoure. WordPress.com permet de définir 4 largeurs de marges en pixels (au-dessus, au-dessous, à gauche et à droite de l’image) :
Voici l’effet obtenu côté visiteur (à comparer avec la copie d’écran précédente où l’image était collée au texte) :
- Paramétrage du lien
Si un lien est associé à l’image, WordPress.com permet de définir les trois paramètres suivants :
- indiquer si le lien doit être ouvert dans une nouvelle fenêtre ou est un simple déplacement vers un point (ancre) de la fenêtre courante,
- ajouter un attribut rel : on notera notamment l’attribut « rel=nofollow« , utilisé pour indiquer aux moteurs de recherche qu’ils ne doivent pas suivre le lien,
- associer une classe css au lien
Modifier l’image originale
Cliquer sur l’image à modifier dans l’éditeur d’articles, puis sur l’icône puis sur le bouton 
.
WordPress fait apparaître la fenêtre suivante :
La barre d’outils permet d’appliquer des modifications sur l’image :
Une fois les modifications réalisées, il est possible de les 
ou de les 
en cliquant sur les boutons correspondants.
Recadrer l’image
Cliquer sur l’image puis déplacer la souris jusqu’à définir le nouveau dimensionnement de l’image :
On remarque que les nouvelles dimensions apparaissent dans la colonne de droite dans la section RECADRAGE DE L’IMAGE :
Il est possible de définir la proportion entre la largeur et la hauteur :
En survolant la surface de recadrage, le pointeur de la souris se transforme en croix fléchée. Cliquer puis déplacer la souris, la surface de recadrage se déplace avec la souris :
Cliquer sur l’icône 
, l’image modifiée apparaît :
Cliquer sur le bouton :
L’image modifiée apparaît dans l’éditeur d’article :
Rotation de l’image
Rotation de 90° dans le sens inverse des aiguilles d’une montre :
Rotation de 90° dans le sens des aiguilles d’une montre :
À noter : il est possible d’effectuer plusieurs rotations.
Retournement de l’image
Retournement de l’image dans le sens vertical :
Le retournement horizontal (les zèbres « regardent » dans l’autre sens) :
Annuler et rétablir la dernière action
Redimensionner l’image originale
Dans la colonne de droite, définissez une nouvelle taille d’image (largeur x hauteur en pixels). Quand on modifie une dimension, WordPress calcule l’autre de façon à conserver la proportion.
WordPress précise que le redimensionnement a été réalisé. Cliquer sur le bouton 
pour revenir aux détails de l’image :
Cliquer sur le bouton 
permet d’obtenir de l’aide. WordPress.com précise que la taille de l’image ne peut pas être augmentée.
Supposons qu’on double la taille du fichier image. Si on affiche ensuite avec la taille de départ, cet affichage se fera avec perte de définition. Il vaut donc mieux ne pas « agrandir » l’image originale, mais agrandir la taille de l’affichage là où c’est souhaité (par déplacement des poignées ou utilisation d’un css).
C’est aussi pourquoi il ne faut diminuer la taille d’une image originale en dessous des tailles utilisées pour son affichage, sauf à accepter la perte de définition (une définition moindre, veut dire un fichier image moins volumineux et donc un temps de téléchargement réduit, ce qui peut être l’effet recherché).
Remplacer une image
Dans l’éditeur d’article, cliquer sur une image puis sur le bouton :
Dans la fenêtre Détails de l’image, cliquer sur le bouton 
:
Remplacer par une image de la bibliothèque de médias
Cliquer sur une vignette de la bibliothèque de médias. L’image sélectionnée apparaît dans la colonne de droite. Cliquer sur le bouton 
:
L’ancienne image disparaît et la nouvelle image vient se positionner au même endroit. Attention : la taille et définition des images n’étant pas forcément identiques, un recadrage peut être nécessaire :
Remplacer par une image envoyée
Cliquer sur l’index 
, puis sur le bouton 
et sélectionner une image dans l’explorateur de Windows :
L’image sélectionnée apparaît dans la colonne de droite. Cliquer sur le bouton , l’image de remplacement apparaît dans l’éditeur d’article :
