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="http://monsite.fr/monimage.jpg" title="Description de mon image.">
<img src="http://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="http://monsite.fr/monimage.jpg" title="Description de mon image."></a>
<img src="http://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
Mot(s)-clé(s) , ,

35 commentaires

Ecrire un commentaire» 1 2
  1. 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. 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 http://www.dejunterlabirmanie.fr

  3. 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. ok,
    je vais faire ça, je te tiens au courant

    merci Lise
    bonne soirée

  5. 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

    1. 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

    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

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

      1. philippe

        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…

      2. philippe

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

1 2

Laisser un commentaire

Votre adresse mail ne sera jamais rendue publique ni utilisée.

*Si vous écrivez un commentaire ici pour la première fois, celui-ci ne sera publié qu'après validation par un administrateur du blog. Ne l'envoyez pas plusieurs fois !
*Bien sûr, tout commentaire injurieux, publicitaire ou spam sera supprimé.
*C'est à vous maintenant !

(obligatoire)
(obligatoire)

Laisser ces deux champs tels quels :

Protégé par Invisible Defender.


  • Mentions légales
    Les différents éléments du Blog de Lise restent la propriété de leur(s) auteur(s) respectifs.


Connexion à WordPress protégée par Clef