Mise à jour le 22 octobre

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">&nbsp</p>

Pour centrer l'image

Il faut dans ce cas utiliser class="centered" dans le lien de l'image.

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

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