Retour vers la page Tutoriels avec la liste de tous les tutos.
Pour rester informé, abonnez-vous à la newsletter

WordPress :: Gestion basique des Images

[MAJ]: Mise à jour de la méthode le 26 février 2013 avec la toute dernière version de WordPress dans cet article: Gestion des Médias WordPress depuis la version 3.5

[MAJ]: de l’article le 19 octobre 2012 pour les captures d’écran avec la dernière version de WordPress (3.4.2)

Dans ce tutoriel nous allons voir comment intégrer une image a du contenu déjà existant. Le procédé est le même  pour les articles ou les pages.

Attention: Comme tout fichier sur le Web, il est important de respecter cette nomenclature dans le nom des images (ou des fichiers):

  • pas d’espace
  • pas de signe bizarre (!,?§….) à part le « – » et le « _ »
  • pas de lettres accentuées

Par contre, le titre de l’image ou du fichier comme nous le verrons accepte toutes ces restrictions.

Édition d’un article ou d’une page

Lorsque vous avez déjà publié un article ou une page, vous pouvez à tout moment modifier ce dernier à partir de la liste des pages ou des articles. Dans l’image ci-dessous, je vous montre le cas pour un article.
En passant le curseur juste en dessous du titre, des options apparaissent:

  • Modifier: pour modifier tout le contenu
  • Modification rapide: pour changer quelques paramètres de l’article.

 

Capture: Modification rapide

Insérer une image

Pour insérer une image placer le curseur à l’endroit où vous voulez insérer l’image et cliquez sur l’icône « Ajouter une image » (voir image ci-dessous)

Capture: Bouton ajouter un média

Après avoir cliqué, une nouvelle fenêtre s’ouvre (voir image ci-dessous). C’est à partir de celle-ci que vous pourrez choisir comment importer votre image.

Les options sont les suivantes:

  • Depuis votre ordinateur: vous choisissez « Parcourir » pour sélectionner le ou les fichiers à importer ou en utilisant le glissé/déposé
  • Depuis le Web: si vous avez l’URL d’une image (un document sur Picasa, Flickr…)
  • Galerie: pour sélectionner une image déjà liée avec l’article
  • Bibliothèque: pour sélectionner parmi toutes les images déjà installées sur le serveur de votre site. Un champ de recherche vous permettra de rechercher parmi toutes les images.

 

Capture: Ajouter un média

Une fois l’opération effectuée, le chargement est lancé.

 

Réglages de l’image chargée

Une fois que vous avez cliqué sur « Ouvrir » la fenêtre « Ajouter une image » s’agrandit dans la hauteur et vous pouvez entrer des options propres à chaque image (voir capture ci-dessous)

image du Chargement de l'image et options

Voici en détail les options de la fenêtre:

  • Titre: contrairement aux noms du fichier, il peut y avoir des accents et des espaces. C’est le contenu qui s’affiche dans une minuscule fenêtre lorsque vous passez le curseur au-dessus d’un lien
  • Texte alternatif: décris l’image pour les mal voyants. Il est invisible à l’oeil
  • Légende: affichera une description directement sous l’image qui sera visible
  • Description: pour décrire l’image si vous décidez d’afficher « Adresse web de l’article » lorsque que l’on clique sur l’image
  • Cible du lien: « Aucun » (l’image n’est pas cliquable), « Adresse web du fichier » (l’image cliquable est directement liée au fichier), « Adresse web de l’article » (l’image cliquable est liée à la page de type article pour chaque image)
  • Alignement: pour choisir comment le texte s’aligne par rapport à l’image
  • Taille: choix de tailles standard au moment de l’insertion. À chaque fois que vous chargez une image, WordPress génère autant de tailles de fichier disponibles. Ces réglages peuvent être modifiés dans la partie « Réglages>Médias »

Modification des images

Pour modifier votre image une fois qu’elle a été insérée, vous devez cliquer à l’intérieur. Deux icônes apparaissent. Un pour l’édition (à gauche), l’autre pour la suppression (de l’article. L’image n’est pas supprimée du serveur). Si ces icônes disparaissaient, il suffirait de recliquer dans l’image (voir image ci-dessous)

image des Icones pour modifier ou suprimer les images

Une nouvelle fenêtre apparaît. Avec celle-ci, le plus souvent, vous allez redimensionner l’image ou vous aidant de la taille. Ou bien vous allez enlever le lien vers l’image pour ne plus la rendre cliquable. Les « Options avancées« , quant à elles afficheraient la taille réelle de l’image en pixel et d’autres options que je n’aborderais pas ici.

image la Modification simple et avancée de l'image

Attention à toujours mettre à jour après chaque modification.

À propos du redimensionnement, vous verrez dans la vidéo une autre technique plus intuitive et plus rapide.

Processus total en image

Voici un résumé du tutoriel en image avec cette vidéo. Cette vidéo est en HD. Vous pouvez activer cette option après avoir cliqué sur « lecture/play ». Je vous indique la démarche à suivre juste en dessous de la vidéo.

Si vous recevez l’article par email, la vidéo est ici

Attention: Cette vidéo a été réalisée pour un projet particulier. Du coup, toutes les références ou actions présentées dans cette vidéo ne sont pas à prendre en compte.

Commentaires

  1. Albert muda a écrit

    Merci beaucoup,
    c’est exactement ce que j’ai cherché, pas évident de trouver quelques choses de simple des fois.
    Tu me sauves la vie sur la gestion des liens sur les photos

  2. Dominique Peloux-Raynal a écrit

    Bonjour Grégoire,
    Je suis toute nouvelle sur WP, avant j’étais sur canalblog maisj’en ai plus qu’assez de la publicité. Je mets en ligne une collection d’art singulier – collection Dominique Peloux-Raynal encore visible sur CB – mais je dois tout réapprendre sous WP, c’est la raison pour laquelle j’ai mis en privé car je ne veux pas mettre en ligne un blog qui ne sera pas parfait lol. Voilà ma question : quand je télécharge une image pour l’installer et que je poste, à l’écran quand je passe mon curseur sur certaines photos – pas toutes !!?? – apparaît le nom sous lequel a été enregistré la photo sur le pc. Comment effacer cela ?
    Merci pour votre aide, quant à ce post, je vais m’en servir, WP est plus pointu techniquement que CB mais pour l’instant je patauge grave (clin d’oeil)
    Bien cordialement.
    Dominique

    • a écrit

      Bonjour Dominique.
      Dans ton cas, le plus simple est d’éditer ton image et de mettre le texte que tu veux voir apparaître dans l’encart « Titre » (voir partie « Réglage de l’image chargée »). Par défaut, si tu ne mets rien, c’est le titre du fichier qui est pris. Si tu ne veux rien, tu mets un espace.

      • Dominique Peloux-Raynal a écrit

        Bonjour Grégoire, et merci pour ta réponse. Dans le titre, apparaît soit le nom de l’artiste soit le titre de l’oeuvre, ceci en fonction des catégories ou des articles créés. Depuis 10 jours, je me heurte à un autre problème et ce n’est pas faute d’avoir consulté les tutos. J’aime bien la fonction « légende » des images. Donc je crée un article sur un nouvel artiste et j’installe une de ses oeuvres que je légende. Mais comme j’ai choisi le thème Andréa, je dispose d’une très large colonne sur la droite pour installer à la suite plusieurs oeuvres du même artiste. C’est cela que je n’arrive pas à faire : une fois que j’installe la deuxième photo légendée, elle va partout sur la page sauf à droite de la première photo que j’ai installée. L’autre solution serait d’utiliser un plugin pour slide bar, mais là aussi je patine. Si tu es en vacances, pas de souci, ma demande peut attendre. En tout cas, merci pour ton aide.
        Bien cordialement.
        Dominique

  3. Chris a écrit

    Bonjour,
    j’ai une petite question quant à l’alignement vertical dans les parametres avancés,
    je voudrai aligner une puce à ma ligne de texte mais l’option « aucun » me monte trop l’image tandis que l’option « gauche » à l’inverse me la descend trop,
    n’y a t-il pas une astuce de type vertical-align:middle (syntaxe ok ??) à définir dans la partie css pour affiner ces parametres d’alignement vertical (mais tout en restant dans la fenêtre des paramètres avancés afin de ne gérer que cette image là sans toucher aux feuilles de style ?
    Merci d’avance de tes éclairages…
    Chris

  4. a écrit

    Bonjour Professeur Gregoire Noyelle

    Merci pour ce tuto ô combien instructif . Etant toujours entrain de travailler sur mon site , je viens de remarquer en changeant de thème , des modifications au niveau de la page : RÉGLAGE DE L’IMAGE CHARGÉE .

    La fonctionnalité comme Alignée les images par 3 , 6 ou 9 a disparu .
    Comment procéder avec le thème twenty twelve pour aligner les images ?

    J’utilise le thème Twenty Twelve et en chargeant des affiches de films , les images ne s’alignent pas sur la même ligne .Chaque image uploadée apparaît dans une nouvelle ligne au lieue de constituer un seul bloc de 6 images ou affiches comme je l’aurai souhaitée .
    Comment procéder ?

    Encore une fois , merci infiniment de votre aide .

    Cordialement

      • a écrit

        Merci encore une fois Monsieur Noyelle .
        En allant sur mon site au niveau de la page WESTERN , vous verrez comment sont positionnées les affiches .Ce qui n’est pas du tout esthétique ou la manière avec laquelle j’aurai voulu qu’elle soit intégrée ; c’est à dire par rangée de 6 affiches par ligne .

        Merci de vos conseils , grâce à vous , j’ai eu le courage de croire en wordpress et de faire le maximum pour le maîtriser .

        Bonne fin de soirée
        Cordialement

          • a écrit

            effectivement Mr noyelle , j’ai pas utilisé la fonction galerie , en ce sens qu’en l’utilisant ; une option de première importance disparaît , c’est celle de lien personnalisé au niveau de  » Lier à  » . Je n’aurai plus que 2 fonctions : Celle de  » Fichier Media « ‘ et celle de  » Page du Fichier Attaché  » .

            Celle qui m’intéresse le plus et qui renvoie au site de diffusion des films disparaît à savoir :Lier à > >>Lien Personnalisé , qui me permet de rediriger l’image quand on clique dessus vers youtube ou archive.org n’apparaît plus au niveau « Réglages de La Galerie »

            Avez vous une solution ?

            NB: J’ai remarqué que selon les thèmes utilisés , les fonctionnalités de wordpress peuvent changer selon les cas de figure .

            Cordialement

          • a écrit

            Dans ce cas, il faut créer une fonction et un modèle sur mesure pour votre thème.
            Oui c’est normal que certains thème modifie plus ou moins les comportements de WordPress. C’est aussi ce qui lui donne toute sa souplesse.

  5. a écrit

    Bonjour, sauriez-vous comment changer le lien de tout les fichiers média sur le serveur et articles/pages? Car j’ai changé le nom de domaine et les images ne sont plus visible.

  6. Fred a écrit

    Bonjour Grégoire,
    Nouvel utilisateur de WP je rencontre depuis quelques temps un soucis concernant la fonction intégration d’une image.
    A savoir, à chaque fois que je télécharge une image, lors de la mise en ligne celle-ci s’affiche sur la droite dans la publication.
    Pourtant lors de la prévisualisation elle apparait, par exemple, au centre si j’ai sélectionné un alignement central.
    J’ai beau suivre à la lettre les instructions de ce tuto, rien n’y fait, texte ou pas, alignement ou pas, les images s’afficheront sur la droite lors de la publication.
    Merci pour votre aide.
    Fred

  7. a écrit

    Bonjour,

    Savez-vous s’il est nécessaire de garder une image dans la bibliothèque pour qu’elle reste sur l’article ? En clair, si je supprime une image de la bibliothèque, mon article sera-t-il modifié de façon automatique ?

    Merci de votre aide.

    • a écrit

      Bonjour
      Oui, elle doit être dans la bibliothèque ou en ligne sur internet.
      Par contre, si vous la supprimez de la bibliothèque, vous aurez un point d’interrogation à la place de l’image dans votre article. Il vaut mieux la supprimer dans l’article directement.

  8. LILI a écrit

    Bonjour,
    J’ai installé un thème sur mon WordPress pro. Ma stagiaire a supprimé tous les médias (images, slides,..) afin d’y intégrer les notre. Le problème c’est que du coup nous avons perdu toute la structure de départ qui nous plaisait dans ce thème.
    J’ai supprimé le thème du WordPress pour le réinstaller et tout récupérer, mais les images n’apparaissent plus du tout, c’est comme si elles n’existaient plus dans le dossier zip que j’ai pourtant retéléchargé…
    Auriez-vous une solution pour récupérer ces médias?
    Mille merci

  9. a écrit

    Bonjour et Bonne Année !!!

    Je suis sur le thème Catch évolution et impossible d’accéder aux médias (photos featured image 1 et 2), pour les supprimer voir les changer. y a-t-il un moyen ou bien faut il passer par la version enfant ???
    Je galère grave.

    • a écrit

      Bonjour
      Pouvez vous préciser quand vous dites:

      impossible d’accéder aux médias (photos featured image 1 et 2),

      Est-ce pour ces featured images ou pour toutes les images, comme celles que vous insérez dans les articles

      • a écrit

        Bonjour Grégoire,
        En fait, il s’agit des photos mises en avant dans le slider de la page d’accueil par le thème lui-même. je peux y accéder en posant L’URL des photos dans la barre d’adresse, mais impossible d’avoir une interaction pour les remplacer. J’ai donc désactivé le slider, mais je trouverais très sympas de pouvoir en profiter.
        Merci d’avoir répondu
        Cordialement,
        Patrick

        • a écrit

          Bonjour Patrick
          Sans doute, le thème utilise les images à la une des articles ou des pages. Il doit y avoir un moyen de sélectionner un certain type de contenu qui est utilisé dans le slider. Cela marche normalement comme ça quand c’est bien conçu.

  10. a écrit

    Rebonjour Grégoire,
    Au risque d’être hors sujet….
    J’ai capté que les autres disposes d’un tableau de commandes qui se rapproche de word pour la rédaction des pages : Justifier avec des lignes horizontales, les liens, les polices, moi, je n’ai pas tout ça et ça m’handicape pour la mise en forme de mes textes. Est ce que la nouvelle version est comme ça ? puis-je paramétrer ?
    Voici ce que j’ai:
    b link b-quote del (barré) ins img ul ol li cole more fermer les balises plein écran
    Cordialement,
    Patrick

      • a écrit

        rere !!!
        Merci pour le lien Ultimate TinyMCE, qui correspond totalement à ma demande.
        Je suis tellement candide, que je n’ai même pas réussi à l’installer correctement :
        j’ai 2 zones pour pour rédiger mes articles, dont 1 sous Ultimate TinyMCE. Mais les boutons n’apparaissent pas et je n’ai pas non plus les onglets HTML et VISUEL.
        De plus, je ne suis pas très fort en anglais, alors j’ai télécharger la traduction, mais je n’ai pas trouvé le dossier lang ou language dans lequel charger le po et le mo.
        J’suis vraiment nul…..:(
        Si tu peux encore m’aider un petit peu ….
        Cordialement,
        Patrick

Laisser un commentaire

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

A noter : Les commentaires supportent le format Markdown.

Article / Page: WordPress :: Gestion basique des Images | Retour vers l'accueil sur le site de Grégoire Noyelle, Web Designer, Créateur de Thèmes WordPress, Freelance Spécialiste WordPress à Paris