Mise à jour le
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.)
3fc74f863b24661585183e75bfe332c7000
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.
3fc74f863b24661585183e75bfe332c7001
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 :
3fc74f863b24661585183e75bfe332c7002
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 :
3fc74f863b24661585183e75bfe332c7003
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
shutter reloaded était déjà activé…
ainsi que akismet
en fait l’image apparait en surimpression sur le site qui se « grise en transparence »
je suis sur firefox
j’ai essayé sur safari
pareil
j’ai du faire un truc que je ne devais pas faire
ou vice versa…..
Si la question est uniquement celle-ci, ce n’est pas la peine de réinstaller WP.
L’image s’affiche sur une autre page, soit parce que le plugin ou la fonction que vous utilisez nécessite du javascript et que votre navigateur ne l’accepte pas. Il faut dans ce cas modifier les options de celui-ci.
Soit, il faut modifier le code d’insertion de l’image. Pour vous faciliter la tâche, un plugin comme Shutter reloaded devrait résoudre votre problème (voir le lien en haut de la page).
j’ai suivi votre conseil
j’ai téléchargé une image via FTP
c’est la même chose
l’image apparait sur une autre page quand je clique dessus
mon hébergeur (infomaniak)a migré récemment vers MySQL 5.067 cela aurait-il une incidence ?
je n’ai pas pu faire d’essai avant
il a fallu que je résolve l’histoire des permissions (777) et le boitier d’alimentation de ma livebox m’a laché donc je ne sais pas si ça fonctionnait avant…
donc peut-être une réinstallation
comment réinstaller wp proprement ?
encore merci
Exactement !
Encore une fois, essayez de télécharger une image via FTP.
Si votre blog est « tout neuf », et que vous n’avez aucune donnée à sauvegarder, une autre solution serait de le réinstaller complètement, il est possible que l’installation initiale ne se soit pas déroulée correctement.
bonjour,
d’abord merci de votre réponse
oups…. télécharger une image via le client FTP c’est télécharger l’image (qui est sur le bureau) dans le dossier uploads ?
mais..
aujourd’hui j’ai un autre cas de figure dans le tableau de bord lorsque j’insère l’image je n’ai plus de liens brisé mais un rectangle avec un point rouge au milieu quand je visualise l’article l’image n’apparait que lorque je clique dessus sur une autre page… ce n’est pas l’effet souhaité
toutes mes extentions sont desactivées…
je continue à chercher
merci de votre aide et pour ce site qui est est une mine d’informations…
Avez-vous essayé de télécharger une image via le client FTP et avez-vous la même erreur que si vous utilisez la fonction de WordPress ?
bonjour,
ce commentaire n’a rien à voir avec les précedents
désolée, mais je ne trouve de réponse nulle part….
je n’arrive pas à insérer d’images dans wordpress (2.7)
j’ai mis toutes les autorisations (777) mais quand j’uplaod j’ai un carré ou rectangle blanc avec un lien brisé
j’ai vérifié mes liens dans réglages/divers, ca a l’air d’être ok
je suis toute neuve dans ce domaine ai-je loupé qq chose ?
merci
Je ne peux apporter aucune réponse, je n’en ai pas la moindre idée, je n’utilise ni google ni flikr 😉
Peut-être pourras-tu trouver une réponse sur le site du WordPress francophone.
Bonjour,
Je voudrais savoir s’il existe un plugin qui permet d’inserer automatiquement des images (a partir de google ou de flikr par exemple) dans un post, grace aux mots clef par exemple ou aux tags?
Bon et bien je vous remercie pour votre réponse rapide, je m’en vais donc tester ce plugin. Cordialement.
Vladimir Prelovac, sur la page ci-dessous, indique en effet qu’il utilise NextGen Gallery :
https://www.prelovac.com/vladimir/wordpress-plugins-i-use
Je ne sais pas.
NextGen Gallery propose cet effet depuis les vignettes.
Bonjour,
Je m’excuse de faire un up sur un sujet un peu ancien, mais je pense que vous pourrez peut-être m’aider.
Je ne suis pas un expert au niveau code html, css, etc… et je voudrais savoir comment réaliser cet effet photo avec la souris qui passe dessus et la couleur du cadre qui change et le petit cadre blanc autour de la photo. Je ne parle pas dde l’effet LightBox déjà actif sur mon blog.
Voici l’adresse de l’effet recherché sur les photos : https://www.prelovac.com/vladimir/animal-beauty
Je vous remercie par avance de votre aide.
Cordialement.
Shutter Reloaded permet simplement de disposer du même effet pour toutes les images du blog, que ce soit pour une galerie photos ou pour des images insérées dans un article : affichage d’un fond, agrandissement de l’image, légende, texte ou bouton pour passer à l’image suivante.
Cet article a été écrit alors que l’insertion d’images n’était pas prise en charge comme le fait WP 2.5.
je comprends pas bien ce que cette extension a de plus que thumbnail et l’original donné dans wp 2.5.1 dans l’éditeur, on a plein de choix pour les chargements de tout ce qu’on veut et comme on veut (on peut même faire une gallery pour les photos justes chargés le jour de l’article) en cliquant sur la photo et la disposition gauche, centre, droite, on a simplement ce qu’on cherche, ce n’était pas du tout le cas dans 2.3, c’est une nette amélioration
Avec le widget de NextGenGallery.
bonjour Lise, je cherchais à joindre Yin Yin mais j’ai l’impression que mes messages ne passent pas.
je voulais savoir avec quel outil et comment il a réalisé son module » au hazard des images » dans sa sidebar
merci
cordialement
Jean Pierre
Hello,
désolé pour ce temps sans réponse, ni remerciements… Alors voili voili, merci beaucoup Lise. On ne s’est pas très bien compris, puisque, contrairement à Christine, je voulais mélanger les 2 effets sur un même message. Mais c’est pas grave, je fais comme elle, et cela me va très bien pour l’instant. J’utilise donc shutter reloaded et nextgen, et tout le monde s’affiche de manière regroupée. C’est très bien comme ça, j’ai de toute façon plein de boulot en retard pour mettre le blog à jour, vu que je le rédigeais offline sur un fichier txt en attendant d’avoir le net dans ma nouvelle demeure :o)
Merci encore, ton site m’a été, et m’est encore très utile pour parfaire mes connaissances sur wordpress, que je découvre encore…
Cordialement,
Antoine
https://blog.lebief.fr (blog de test, le définitif sera sur https://www.lebief.fr d’ici qques temps)
Oui, et bien c’est ce que Christine a fait par exemple dans ce billet
https://lisetauber.fr/?p=749
ou dans celui-là
https://lisetauber.fr/?p=742
Pour un affichage des images regroupées par billet, il faut choisir l’option
Shutter sur tous les liens pointant vers les images ; des ensembles d’images seront automatiquement créés pour chaque billet ou page.
Hello,
Désolé, il était tard, je me suis un peu mal exprimé… J’ai un post sur lequel se trouve une image isolée au début, histoire de présenter le post et j’aimerais qu’elle s’ouvre avec shutter reloaded. Un peu plus loin, sur ce même post, j’ai inseré une galerie NextGen, qui utilise l’effet Thickbox. Encore un peu plus loin, encore après du texte, j’ai encore une autre image isolée, et j’aimerais qu’elle utilise shutter reloaded aussi.
Je pourrais bien entendu créer une galerie pour chacune de ces images, mais j’ai peu que cela me fasse une micro-gestion de galeries à terme que j’appréhende un peu.
Voila un exemple de ce dont je parle… Le blog est en cours de création, j’ai découvert wordpress il y a 15j seulement. Bref, le blog est en phase terminale, mais encore en création quand même, un peu d’indulgence donc… :o)
https://blog.lebief.fr/2008/05/test/#more-20
Merci…
Antoine
J’ai un peu du mal à comprendre ta question. J’utilise par défaut Shutter Reloaded pour toutes les images de mon blog.
Lorsque j’insère une galerie photo, elle utilise l’effet Shutter Reloaded parce que j’ai configuré NGG avec cet effet.
Ma configuration NGG : dans Galerie > Options > Effets, j’ai choisi l’effet « Shutter » qui utilise class= »shutterset ».
Pour Shutter Reloaded, je viens de tester plusieurs configurations ; à partir du moment où Shutter est utilisé sur tous les liens pointant vers les images, toutes les images sont affichées avec cet effet.
Si tu cliques sur une des images de cette page, elle s’affiche grâce à Shutter Reloaded, si tu cliques sur les images d’une de mes galeries, par exemple Les fleurs de Bagatelle, chaque vignette affiche une image avec l’effet Shutter Reloaded.
Hello,
peut-on utiliser shutter reloaded et nextgen gallery dans le même post ?
J’ai bien entendu essayé, mais si je laisse les options de shutter par défaut (il prend donc toutes les images pour lui). Je clique alors sur une image isolée, ca fonctionne, il utilise shutter reloaded mais si je clique sur un thumbnail de la galerie nextgen du même post, il lance d’abord shutter, je clique, et il passe sur nextgen (je vois donc l’image deux fois de suite avant de passer sur l’image deux de la galerie. J’ai donc tenté de sélectionner l’option numéro deux de shutter, en lui spécifiant une classe= »shutter » donc, mais cela ne fonctionne pas, il ignore ma demande (j’ai bien modifié le code pour l’image isolée qui chez moi est : class= »shutter alignright size-thumbnail wp-image-19″).
Me trompe je qque part ? je ne trouve pas l’info sur le site du développeur… ni sur celle de nextgen, où il est par contre clairement expliqué comment utilisé l’effet shutterreloaded pour ses galeries.
Je sais que tu n’es pas le SAV des développeur des plugins, mais peut-être as tu déjà rencontré cette problématique.
Pour le reste, vraiment un gros bravo pour cet immense boulot réalisé sur ce blog, il est vraiment tip top, et une source d’information vraiment très utile pour tout bloggeur débutant (comme moi), ou confirmé…
Antoine
Possible… Je vais poursuivre mes recherches. Merci de ta réponse en tout cas.
Non jamais, Shutter reloaded est un plugin qui ne m’a jamais causé de souci.
As-tu un autre plugin similaire qui interférerait ?
Bonjour Lise,
J’ai tenté d’installer Shutter reloaded sur mon blog mais j’ai pour l’instant renoncé (retour à lightbox). Shutter fonctionne jusqu’à ce qu’on referme l’image visualisée en grande taille : sous Firefox le plugin fait apparaître un rectangle blanc (d’environ 400 px de large sur 250 px de haut, collé contre le bord gauche) qui masque la partie supérieure gauche de la page. Je ne sais pas comment retirer ce rectangle, à moins de recharcher la page. Tu as déjà eu ça ?