L’insertion d’images dans un article WordPress.com se fait aisément grâce à l’éditeur d’images qui permet d’envoyer des images depuis son ordinateur vers le serveur qui héberge le site.
L’éditeur d’images permet d’ajouter une légende, de positionner une image par rapport au texte, d’en modifier la taille, de déplacer une image dans l’article, d’y associer des liens vers d’autres pages web…
Si vous découvrez la création d’article avec WordPress, je vous suggère de lire d’abord les articles suivants :
- Créer un article avec WordPress.com : se connecter à l’administration, saisir le titre de l’article, mettre en forme les caractères dans l’article, sauvegarder sa saisie, voir comme un visiteur (aperçu) et publier l’article.
- Rédiger un article avec WordPress : Rédiger les paragraphes, Autres options de mise en forme, Outils d’édition.
Envoyer une image dans un article
WordPress permet d’envoyer une ou plusieurs images depuis un ordinateur vers le site internet pour les insérer dans un article.
Aller dans l’éditeur d’article et cliquer sur le bouton 
:
La fenêtre d’insertion de média apparaît :
On trouve différents types de fichiers images (jpeg, png et gif), mais aussi des types de fichiers documents (pdf, doc, ppt, xls…).
WordPress.com précise :
- la taille maximale d’un ficher à envoyer (1 Gigabyte),
- l’espace disque restant disponible sur le serveur pour stocker les médias (99,7% des 3 Gigabytes octroyés).
Première solution pour envoyer : le bouton « Sélectionner des fichiers »
Cliquer sur le bouton Sélectionner des fichiers :
Sélectionner les images dans l’explorateur Windows qui s’ouvre automatiquement (il est possible d’utiliser la touche CTRL pour sélectionner plusieurs images et la touche SHIFT pour sélectionner plusieurs images contiguës), puis cliquer sur Ouvrir :
WordPress visualise le transfert des images :
Deuxième solution pour envoyer : le « glisser – déposer »
Après avoir fait apparaître la fenêtre d’insertion de média, sélectionner des fichiers dans l’explorateur Windows et glisser – déposer au centre de la fenêtre d’insertion (« glisser – déposer » consiste à cliquer sur des fichiers sélectionnés et à déplacer la souris en maintenant le clic enfoncé jusqu’au point où on dépose); lorsque les fichiers atteignent la zone d’insertion, celle-ci change de couleur et on peut relâcher la souris :
L’envoi doit s’effectuer automatiquement lorsque l’opérateur cesse d’appuyer sur le bouton gauche de la souris :
Saisir les paramètres d’une image à envoyer
La vignette de l’image envoyée est sélectionnée (noter la coche en haut et à droite de la vignette).
Paramètres d’accompagnement de l’image
Dans la colonne de droite, saisir Titre, Légende, Texte alternatif et Description :
Alignement de l’image
Préciser la façon dont l’image sera alignée dans l’article en cliquant sur la flèche à droite de Alignement :
Voici l’effet des différents alignements :
Alignement à gauche :
Alignement au centre :
Alignement à droite :
Pas d’alignement avec légende :
Pas d’alignement sans légende :
Associer un lien à l’image
Choisir le lien, c’est définir ce qui apparaîtra si un visiteur du site clique sur l’image.
Cliquer sur la flèche à droite de Lier à :
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 du thème dédiée à l’affichage des images; l’adresse de la page est indiquée par WordPress :
Voici un exemple de ce que peut voir un visiteur du site :
On notera l’affichage du titre et de la description associés à l’image.
Lien personnalisé permet d’associer une adresse web (url) en la saisissant. Dans l’exemple ci-dessous, cliquer sur l’image des zèbres aura pour effet d’aller à une page de la WordPress TV sur le WordCamp Paris 2012 !) :
Voici la page vers laquelle sera redirigé le visiteur du site qui clique sur l’image liée :
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 :
Choisir la taille de l’image
Choisir la taille de l’image parmi celles proposées en cliquant sur la flèche à droite de Taille :
Les tailles prédéfinies Miniature, Moyenne et Grande sont paramétrées dans l’administration (Réglages + Médias) :
Insérer l’image dans l’article
Cliquer sur Insérer dans l’article :
Insérer dans l’article s’applique à toutes les images sélectionnées (présence de la coche en haut et à droite des vignettes des images).
La photo insérée apparaît dans l’éditeur d’article :
Cliquer sur Aperçu pour visualiser l’article vu par un visiteur du site :
La vision du visiteur dépend du thème choisi :
Action sur l’image dans l’éditeur d’articles
Déplacer une image dans l’article
Cliquer sur l’image et déplacer la souris. Une copie de l’image se déplace en surimpression, et le curseur se positionne à l’endroit où l’image peut s’insérer :
Lorsqu’on relâche la souris, l’image s’insère à l’endroit du curseur en tenant compte de l’alignement :
Modifier la taille de l’image
Cliquer sur une image puis survoler un des 8 carrés blancs en bordure d’image (les poignées). Une flèche apparaît indiquant la façon dont la taille peut être modifiée. Cliquer sur une poignée puis déplacer la souris tout en maintenant le clic enfoncé :
Déplacer la souris pour définir la taille souhaitée; l’image retaillée apparaît en surimpression, délimitée par un rectangle en pointillé, avec la taille cible indiquée dans un rectangle (longueur x hauteur en pixels) :
Quand on relâche la souris, l’image prend la nouvelle taille :
À noter : la modification de taille ne concerne que l’affichage de l’image, elle ne modifie pas la taille de l’image envoyée. Il est donc possible d’agrandir ou diminuer la taille de l’image sans perte de qualité.
Haut de pageInsérer une image depuis une adresse web
Dans l’éditeur d’articles, cliquer sur .
Dans la colonne de gauche, cliquer sur Insérer à partir d’une adresse web (url) :
Saisir l’adresse web (url) d’une image (attention : il s’agit de l’adresse d’une image, pas l’adresse d’une page d’un site contenant une image ). Une fois l’adresse saisie, WordPress.com doit faire apparaître l’image, sinon il y a un problème avec l’adresse saisie :
Saisir les autres paramètres (non obligatoires) :
- légende (apparaît en dessous de l’image),
- texte alternatif (apparaît si l’image ne peut s’afficher),
- Alignement
- Lien associé à l’image (dans l’exemple ci-dessous un lien est créé vers la page d’accueil du site de la communauté WordPress francophone); si un visiteur du site clique sur l’image, il sera redirigé vers cette page
Cliquer sur 
, voici ce qui apparaît dans l’éditeur d’articles :
Et voici ce qui s’affiche pour un visiteur du site :
On constate que le lien a bien été créé : en survolant l’image avec la souris, l’adresse du lien est affiché par le navigateur.
Modifier une image web
Après avoir inséré une image web, il est possible de la modifier de la même façon qu’une image envoyée, par exemple en cliquant dessus dans l’éditeur d’articles pour faire apparaître la barre d’outils rapides pour les images :
