Insérer des images dans un article WordPress

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 :

Haut de page

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  image et vidéo - bouton Ajouter un média :

image dans WordPress - bouton Ajouter un média dans édition d'article
image dans WordPress – bouton Ajouter un média dans édition d’article

La fenêtre d’insertion de média apparaît :

image dans WordPress - fenêtre d'insertion média
image dans WordPress – fenêtre d’insertion média

La liste des types de fichiers pouvant être envoyés sur le serveur est rappelée dans la fenêtre de sélection :

image dans WordPress - types de fichiers acceptés
image dans WordPress – types de fichiers acceptés

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 :

image dans WordPress - lancer la sélection des fichiers à envoyer
image dans WordPress – lancer la sélection des fichiers à envoyer

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 :

image dans WordPress - sélectionner les images à envoyer
image dans WordPress – sélectionner les images à envoyer

WordPress visualise le transfert des images :

image dans WordPress - avancement du transfert
image dans WordPress – avancement du transfert

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 :

image dans WordPress - gisser déposer des fichiers à envoyer
image dans WordPress – gisser déposer des fichiers à envoyer

L’envoi doit s’effectuer automatiquement lorsque l’opérateur cesse d’appuyer sur le bouton gauche de la souris :

image dans WordPress - envoi de fichiers après glissé déposé
image dans WordPress – envoi de fichiers après glissé déposé
Haut de page

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 :

image dans WordPress - descriptif d'une image
image dans WordPress – descriptif d’une image

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 :

image dans WordPress - choisir l'alignement
image dans WordPress – choisir l’alignement

Voici l’effet des différents alignements :

Alignement à gauche :

image dans WordPress - alignement à gauche
image dans WordPress – alignement à gauche

Alignement au centre :

image dans WordPress - alignement au centre
image dans WordPress – alignement au centre

Alignement à droite :

image dans WordPress - alignement à droite
image dans WordPress – alignement à droite

Pas d’alignement avec légende :

image dans WordPress - pas d'alignement avec légende
image dans WordPress – pas d’alignement avec légende

Pas d’alignement sans légende :

image dans WordPress - pas d'alignement sans légende
image dans WordPress – 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­ à :

image dans WordPress - choisir un lien
image dans WordPress – choisir un lien

Fichier média crée un lien vers le fichier de l’image sur le serveur qui héberge le site :

image dans WordPress - lien vers le fichier média
image dans WordPress – lien vers le fichier média

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 :

image dans WordPress - fichier média avec zoom
image dans WordPress – fichier média avec zoom

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 :

image dans WordPress - lien vers une page du thème présentant l'image
image dans WordPress – lien vers une page du thème présentant l’image

Voici un exemple de ce que peut voir un visiteur du site :

image dans WordPress - exemple de page d'image
image dans WordPress – exemple de page d’image

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 !) :

image dans WordPress - lien ver une page web
image dans WordPress – lien ver une page web

Voici la page vers laquelle sera redirigé le visiteur du site qui clique sur l’image liée :

image dans WordPress - lien vers une page du web
image dans WordPress – lien vers une page du web

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 :

image dans WordPress - aucun lien
image dans WordPress – aucun lien

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 :

image dans WordPress - choisir la taille
image dans WordPress – choisir la taille

Les tailles prédéfinies Miniature, Moyenne et Grande sont paramétrées dans l’administration (Réglages + Médias) :

image dans WordPress - réglage des tailles prédéfinies
image dans WordPress – réglage des tailles prédéfinies
Haut de page

Insérer l’image dans l’article

Cliquer sur Insérer dans l’article :

image dans WordPress - insérer l'image dans l'article
image dans WordPress – insérer l’image 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 :

image dans WordPress - photo insérée dans l'éditeur d'article
image dans WordPress – photo insérée dans l’éditeur d’article

Cliquer sur Aperçu pour visualiser l’article vu par un visiteur du site :

image dans WordPress - demande d'aperçu
image dans WordPress – demande d’aperçu

La vision du visiteur dépend du thème choisi :

image dans WordPress - image vue par un visiteur (thème 1)
image dans WordPress – image vue par un visiteur (thème 1)
image dans WordPress - image vue par un visiteur (thème 2)
image dans WordPress – image vue par un visiteur (thème 2)
Haut de page

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 :

image dans WordPress - déplacement d'une image
image dans WordPress – déplacement d’une image

Lorsqu’on relâche la souris, l’image s’insère à l’endroit du curseur en tenant compte de l’alignement :

image dans WordPress - image déplacée
image dans WordPress – image déplacée

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é :

image dans WordPress - survoler une poignée pour modifier la taille de l'image
image dans WordPress – survoler une poignée pour modifier la taille de l’image

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) :

image dans WordPress - définir une nouvelle taille
image dans WordPress – définir une nouvelle taille

Quand on relâche la souris, l’image prend la nouvelle taille :

image dans WordPress - taille modifiée par glisser relâcher
image dans WordPress – taille modifiée par glisser relâcher

À 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 page

Insérer une image depuis une adresse web

Dans l’éditeur d’articles, cliquer sur image et vidéo - bouton Ajouter un média.

Dans la colonne de gauche, cliquer sur Insérer à partir d’une adresse web (url) :

envoyer images - Insérer adresse web
envoyer images – Insérer adresse web

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 :

envoyer images - adresse url d'une image
envoyer images – adresse url d’une image

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
envoyer images - paramétrage image web
envoyer images – paramétrage image web

Cliquer sur bouton Insérer dans l'article, voici ce qui apparaît dans l’éditeur d’articles :

envoyer images - image web insérée
envoyer images – image web insérée

Et voici ce qui s’affiche pour un visiteur du site :

envoyer images - image web côté visiteur
envoyer images – image web côté visiteur

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 :

envoyer images - modifier une image web
envoyer images – modifier une image web
Haut de page

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.