Insérer des images

Mise à jour le 24 août 2008 @ 14:44

Il existe plusieurs plugins permettant d’insérer des images dans les billets ou les pages de son blog.

J’utilise pour ma part Shutter Reloaded pour insérer des vignettes qui s’agrandissent au clic de souris ; il est de petite taille (8ko) et permet ainsi un affichage rapide des images.

Installation de Shutter Reloaded

L’installation du plugin est classique : après avoir décompressé le fichier, il faut le télécharger dans le répertoire wp-content/plugins.

Insertion d’une image

Pour insérer une image, on peut utiliser uniquement l’interface graphique, d’abord en l’insérant avec l’icône puis en insérant un lien vers l’image elle-même avec .

Si l’on souhaite que l’image soit à droite ou à gauche du texte, la modification du code est très simple.

Pour l’alignement de l’image à gauche

Pour que l’image se trouve à gauche du texte, aller dans l’onglet code et ajouter class= »alignleft » dans le lien de l’image (voir dans l’exemple ci-dessous la ligne commençant par <img src…). Un clic sur la vignette, l’image s’agrandit, un clic sur l’image, elle revient au format vignette. (Le développeur de Shutter reloaded prévoit d’indiquer par une croix ou un mot la fermeture de l’image.)

<a href="https://monsite.fr/monimage.jpg" title="Description de mon image.">
<img src="https://monsite.fr/monimage.jpg" class="alignleft" height="46" width="70" /></a>

Il faut veiller à ce qu’il n’y ait pas d’espace entre le code relatif à l’image et l’image elle-même. (Le retour à la ligne dans l’exemple vise à faciliter la lecture.)

Pour l’alignement de l’image à droite

Il faut dans ce cas utiliser class= »alignright » dans le lien de l’image.

<a href="https://monsite.fr/monimage.jpg" title="Description de mon image."></a>
<img src="https://monsite.fr/monimage.jpg" class="alignright" height="46" width="70" />

Si le texte est trop court par rapport à l’image, ce qui est le cas pour cette deuxième image, il faut ajouter un espace sous celle-ci, avec le code suivant :

<p class="clear"></p>

Pour centrer l’image

Il faut dans ce cas utiliser class= »centered » dans le lien de l’image

ou centrer le paragraphe avec le code suivant :

<p align="center"></p>

Ce plugin est maintenant compatible avec NextGenGallery (version 0.73) que j’utilise pour l’affichage de mes galeries photos (voir un exemple de galerie photos). Il faut simplement modifier l’effet souhaité dans le panneau de configuration de ce plugin dans Options/Effets et désactiver tout autre effet similaire dans les autres plugins ou thèmes.

Je réaliserai prochainement une documentation en français pour NextGen Gallery…

Personnalisation de Shutter reloaded

Par défaut, Shutter reloaded est utilisé pour toutes les images. Dans un premier temps, je vous conseille de conserver cette option.

Vous pouvez aisément modifier l’apparence de l’affichage :

  • opacity, comme son nom le laisse supposer, modifie la transparence lors de l’affichage en grand de l’image,
  • caption text color est la couleur de la description s’affichant sous l’image,
  • arrows color indique la couleur des flèches vers l’image précédente ou suivante,
  • « loading » sign color est la couleur du message s’affichant pendant le téléchargement de l’image.

Ce plugin n’existe pour le moment qu’en anglais. Si son auteur réalise un fichier .pot, je le traduirai 😉 />
La traduction est disponible sur la page Les plugins et thèmes que j’ai traduits en français.

Pour utiliser d’autres effets,

vous pouvez consulter les billets que nous avons publiés :


Ecrit par Lise - Site

35 commentaires pour “Insérer des images

  1. 25 janvier 2009 à 18:23

    en fait l’image apparait en surimpression sur le site qui se “grise en transparence ”

    Il faut savoir ce qu’on veut 😉 soit l’image apparaît en surimpression, comme tu dis, soit sur une autre page !
    Il est possible de modifier la couleur du fond dans les options de Shutter reloaded.
    A dire vrai, je ne vois pas où est le problème 😉

  2. 25 janvier 2009 à 18:37

    bon, peut-être que je me suis mal exprimée
    sur ton blog les images apparaissent
    sur le mien il y a rien : du blanc et le nom de l’image

    tu peux allez voir sur https://www.dejunterlabirmanie.fr

  3. 25 janvier 2009 à 20:36

    Je n’ai pas de solution ! S’il s’agit d’une mauvaise installation de WP comme je l’ai évoqué plus tôt, essaie de refaire une mise à jour.

    Encore une fois, si ton blog n’en est qu’à son début, le mieux est de supprimer le répertoire wordpress et de refaire une installation à neuf, en retélechargeant un wordpress tout neuf !

  4. 25 janvier 2009 à 20:46

    ok,
    je vais faire ça, je te tiens au courant

    merci Lise
    bonne soirée

  5. 12 avril 2009 à 19:05

    Bonjour,
    Je vous félicite pour votre site trés bien fait. J’ai une question. J’utilise WordPress 2.7.1 et j’ai téléchargé shutter reloaded version 2.2. Je n’arrive pas à le faire marcher. Il s’installe parfaitement, j’accede aux modifications (settings), mais je n’arrive pas à inserer une image. Je ne vois aucun picto ou moyen d’inserer une image sur une page, ou article. J’ai lu qu’il fallait cliquer sur un icone. Je ne vois pas cet incone.
    Je vous remercie.

    Frédéric

    • 12 avril 2009 à 22:53

      L’insertion d’une image n’est pas modifiée par Shutter Reloaded. Elle se fait de façon classique sous WordPress, soit via l’interface graphique, soit via l’onglet code html.
      L’icône dont je parle est visible lors de l’écriture d’un article, si on utilise l’éditeur visuel.
      Moi qui utilise l’éditeur html, je clique sur le bouton « img ».

      Shutter Reloaded ne sert qu’à introduire un effet lorsqu’on clique sur l’image pour l’agrandir, il ne propose aucun icône pour insérer une image.

      J’espère vous avoir aidé avec ces explications supplémentaires, sinon, n’hésitez pas à revenir ici 😉

  6. philippe
    5 octobre 2009 à 14:20

    Bonjour, toute ces infos ne sont pas passionnantes quand on a du mal avec la technique. Mais elles sont extraordinairement pratiques pour s’en sortir. Merci de nous (me) simplifier la tâche. Je cherche la solution (qui est peut-être très simple) pour intégrer des diaporamas sonores.
    Je m’explique : je viens de créer un blog avec WordPress et je veux télécharger des diaporamas sonores réalisées avec le logiciel Soundslides. Ce ne sont pas des fichiers, mais tout un dossier qu’il faut transporter sur le site via le client FTP. Je l’ai fait une première fois… mais cela écrase mon site Wp et je tombe directement sur mon diaporama en page d’accueil de site, sans autre possibilité.
    J’ai donc recommencer en créer un dossier sur l’hébergeur : j’ai maintenant accès au diaporama en créant un lien sur mon blog (avec juste le nom du dossier à rajouter dans l’adresse).
    mais en fait je voudrais directement intégrer le diaporama dans le corps de l’article, comme on intègre une photo. Et pas avec un lien comme aujourd’hui. Et là, je sèche. Si vous avez la solution, ce serait génial.
    Cordialement,
    Philippe

    • 5 octobre 2009 à 14:57

      Avez-vous essayé d’utiliser le bouton dans l’éditeur de saisie d’un article qui permet d’insérer une video ?

      • philippe
        5 octobre 2009 à 16:25

        non, mais a priori ça ne marche pas. Puisque je rentre plusieurs dossiers et fichiers et pas un seul fichier video. Mais je vais tenter le coup ce soir. A bientôt…

      • philippe
        5 octobre 2009 à 17:55

        Dernière minute ! J’ai trouvé : il suffit d’intégrer le code HTML dans le blog. Code qu’il faut aller chercher sur le site soundslides avec son URL. Et ça marche !!

Laisser un commentaire

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

Laisser ces deux champs tels quels :

Protégé par Invisible Defender. 268 639 spammeurs ont vu s'afficher une page d'erreur 403.

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