Lien image réduite vers image originale

Pourquoi ce plugin ?

Les blocs de textes tels que #CHAPO, #TEXTE peuvent contenir des images. Ces images, ajoutées par un rédacteur, sans contrôler leur taille, peuvent modifier le design du site web.

Pour eviter un désastre graphique, nous pouvons insérer le filtre image_reduire (documentation) : [(#TEXTE||image_reduire{200,200})]

Ce code spip réduira toutes les images dans #TEXTE qui ont une largeur et/ou longueur supérieure à 200 pixels. Mais l’image devient parfois illisible : plus de detailles, texte trop petit...

Il faudrait donc un lien vers l’image de taille réelle. Ce lien est ajouté via ce plugin.

Description du plugin

Ce plugin rajoute un filtre à utiliser sur les blocs de texte. À chaque image du bloc est associé un lien direct vers l’image original, qui se trouve dans le dossier IMG du site.

Associé avec image_reduire, le filtre créera donc un lien vers l’image avec sa taille d’origine.

Ce filtre ne fonctionne que avec les images avec les extensions jpg, jpeg, png et gif (pour utiliser avec thickbox v2, cf ci-dessous).

Utilisation

Ce filtre ne requiert aucun arguments.

Il s’utilise comme n’importe quel filtre : (#balise

Exemple :
[(#TEXTE||imlien_originale|image_reduire{200,200})]

Facultatif : Thickbox v2

Vous pouviez installez en plus le plugin Thickbox v2. Ainsi l’image se charge en surimpression sur le site, grâce à de l’AJAX. Le chargement et la présentation de l’image sont plutôt réussis.
Désormais, utiliser plutot FancyBox !

Téléchargement :

version 1.0, stable

Discussion

10 discussions

  • lein image

    Répondre à ce message

  • Christian Julia

    Bonjour. J’apprécie beaucoup ce plugin que j’utilise maintenant systématiquement sur tous mes sites. Merci ! Seul petit souci, le titre ou la description de l’image n’apparaît pas sous la fenêtre de l’image agrandie (pour moi avec Fancybox). En revanche, la description apparaît en bulle quand on passe la souris sur la photo réduite. De plus, si on écrit doc plutôt qu’img pour faire apparaître la légende sous la photo réduite, alors l’image ne s’agrandit pas. C’est pas grand chose mais s’il y avait une solution... Merci d’avance.

    Répondre à ce message

  • Glika Tchu

    Bonjour,

    j’utilise spip 2.1.2, et ce plugin marche très bien, en effet. Mais voilà : je voulais que le lien s’ouvre dans un nouvel onglet.

    Voici donc le fichier imliens_fonctions.php modifié en conséquences, si quelqu’un en avait besoin :

    <?php 
    
    function imlien_originale($texte) {
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.jpe?g\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.gif\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.png\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    
    	return $texte;
    
    	}
    
    ?>

    Et merci beaucoup pour le plugin, très utile !

    Répondre à ce message

  • J’ai poster en bas un correction pour la liens actif en marge et le apastrophe en trop, mais ca produit un bordeur eclater sur certains images.

    Si c’est le cas pour vous, mieux est de que corriger la apastrophe en trop, donc :

    <?php 
    
    function imlien_originale($texte) {
    
    	$texte = preg_replace('@(<span[^>]*>\s*<img src=\')([^\\.]*\.jpe?g\')([^>]*)></span>@',
    
    							'<a href=\'\\2 type=\'image/jpeg\'>\\1\\2\\3></span></a>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>\s*<img src=\')([^\\.]*\.gif\')([^>]*)></span>@',
    
    							'<a href=\'\\2 type=\'image/gif\'>\\1\\2\\3></span></a>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>\s*<img src=\')([^\\.]*\.png\')([^>]*)></span>@',
    
    							'<a href=\'\\2 type=\'image/png\'>\\1\\2\\3></span></a>',$texte);
    
    	return $texte;
    
    	}
    
    ?>

    Répondre à ce message

  • Excuse mon francais, je suis anglophone...

    Merci pour ce plugin, je le trouve tres utile (aparaments c’est possible avec thickbox aussi, mais ceci est le mieux si le but est precisement un liens ver limage originel).

    Par example, pour la site d’un asso donc je gere, www.solarfire.org, c’est tres utile pour un solution du homepage pour un site multilangue. Pour avoir home page un peux « actif » sans la liberter des mot, ca suffit d’inserer un page unique dans la somaire avec un redimension petit de tout les image, et dans la page unique copy colle les balise image d’un peut partout du site, tous au « left ». Resulat est est plains de petit image qui montre les activiter du asso, avec bien sur des grands liens vers les accueille des different langue ; avec ce plugin la page est encore plus actif car interactif pour la visiteur ;)

    Effectivements il y a la petit problem de la liens en marge et l’apastrophe en trop deja mentioner.

    Solutions pour les deux :
    Ouvre la dossier « image_lien_1.0-3 » du plugin et puis ouvre la fichier « imlien_functions.php » et remplace tout la text avec ceci :

    <?php 
    
    function imlien_originale($texte) {
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.jpe?g\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3 type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.gif\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3 type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.png\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3 type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	return $texte;
    
    	}
    
    ?>

    Ca corrige la marge actif et la apastrophe (pour moi en tout cas en spip 2.09). La manipulation est simple : enlever la backslash et apastrophe apres la 3. D’ou viens l’apostrophe extra est un mystere.

    Répondre à ce message

  • 3

    Hello,

    Sur mon site en construction j’ai utilisé ce filtre un temps pour le tester, puis je l’ai désactivé car j’ai trouvé une autre solution. Après désactivation, c’est comme si je n’avais rien fait : la fonction est restée active, c’est à dire que si on clique sur une image on obtient toujours une page contenant l’image source.

    J’utilise toujours |image_reduire{xxx,yyy}. Si je suis bien renseigné, le comportement normal de Spip (sans le plugin) ne devrait pas faire afficher l’image ! J’ai même jeté le plugin du serveur, vidé tous les caches possibles plusieurs fois, rien n’y fait. Que se passe-t-il ?

    • Quelle version de SPIP utilies-tu ?
      Je n’ai pas retouche a spip depuis mon dernier site web, c’est a dire lors de la redaction de cet article.

      La version sur laquelle j’ai concu ce plugin est la 1.9.2b. Je viens de jeter un coup d’oeil et on en est a la version 1.9.2d, qui apporte des modifications a la gestion des images. Peut etre que ce type de lien a ete integre a cette nouvelle version.

      Le lien fonctionnait-il aussi avant le plugin ?
      En desactivant tous les autres plugin, fonctionne t il encore ?

      Jujubre

    • Eh bien, ça y est ça fonctionne, mais je ne sais pas pourquoi... ;-(

      Je suis désolé, mais j’ai vraiment un problème plus général, ailleurs, car ce phénomène m’est déjà arrivé plusieurs fois. Je me suis souvent trouvé devant des problèmes insolubles que je soumets à la question dans des forums. Après que de gentils contributeurs s’arrachent les cheveux pour me trouver une solution, mon problème finit pas se régler tout seul !

      C’est un peu comme si quelque part il y avait une mémoire qui conserve des comportements qui ont pourtant été modifiés.... Je vide régulièrement tous les caches que je connais ! Peut-être y en a-t-il un que je ne connais pas ? Je développe avec un serveur interne (MAMP sur Mac). Peut-être que le problème est de ce côté là ? Mais je n’ai pas la science pour m’y retrouver dans cette usine à gaz.

      Donc, merci pour la peine. (Tu peux détruire cette série de messages qui n’a pas vraiment sa place, ici)

    • Bonjour,

      Pour SPIP 1.9.2d

      Dans un article j’ai inséré l’image <img100|center> qui est donc visible par celui qui visite le site.
      Je cherche à faire apparaître une bulle d’informations quand l’utilisateur passe sa souris au dessus de l’image. Quelle syntaxe, à l’intérieur de l’article, me permettrait de réaliser au mieux cet effet ?
      Il semblerait que l’on peut trouver une solution avec le fichier « img.html » que l’on trouve dans le dossier « /dist ».
      Quand est-il exactement ?

      En vous remerciant pour tout conseil..

    Répondre à ce message

  • Bonjour

    J’utilise ce plugin depuis quelques jours. Il marche très bien, mais j’ai constaté un problème mineur : sur les images centrées, du fait que la balise <a> englobe la balise <span>, le lien est actif dans les marges, donc en dehors de l’image. J’ai modifié le code du fichier imlien_fonctions.php de la façon suivante (inversion de l’imbrication des deux balises) :

    <?php 
    
    function imlien_originale($texte) {
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.jpe?g\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.gif\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	$texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.png\')([^>]*)></span>@',
    
    							'\\1<a href=\'\\3\' type=\'image/jpeg\'>\\2\\3\\4></a></span>',$texte);
    
    	return $texte;
    
    	}
    
    ?>

    Répondre à ce message

  • Lorsque j’utilise ce plugin, j’ai un petit souci : le lien généré donne ça :

    <a href='IMG/jpg/plan2007.jpg'' type='image/jpeg'><img src='IMG/jpg/plan2007.jpg' width='400' height='280'  alt="" style='height:280px;width:400px;' class='' /></a>

    Notez le double quote simple à la fin du href.
    Conséquence : sous IEZ le lien ne fonctionne pas.
    J’ai corrigé les expressions régulières pour avoir un seul quote mais je ne comprends pas pourquoi...

    Répondre à ce message

  • 3

    Si on utilise la génération automatique de vignettes avec le plugin Thickbox, je ne suis pas sûr d’avoir compris le « plus » de ce plugin...

    • Moi non plus...

      Explique moi comment tu fais :
      -  Tu as un texte que ton redacteur a fait en uploadant des images 1600*1200. Il y connait pas grand chose, et faut faire avec, prevoir ce genre de chose.
      -  Tu utilises donc image_reduire pour diminuer la taille des images insérées dans le texte pour ne pas exploser ton design, par ex : [(#TEXTE|image_reduire{400,400})]
      -  Mais ces images reduites ne permettent pas d’acceder a l’image originale. Par exemple un article de journal, il serait interessant de l’avoir en taille réelle afin de pouvoir le lire.
      -  d’ou la création d’un lien vers les images correspondantes, dans le dossier IMG de spip.

      Si tu peux faire ca avec les vignettes, explique-moi.

      Personnellement, j’ai erré pas mal de temps sur spip et n’ai pas trouvé cela, d’ou le plugin.

    • J’ai eu le même problème que toi pour notre intranet au boulot. Les rédacteurs scannent des articles de la presse et ne savent pas redimensionner une image ni avec totoshop, ni avec Paint... Avant Thickbox je passais mon temps à repasser derrière eux pour jouer des ciseaux

      Bref, dans le panneau de configuration espace privé, j’ai porté la taille des vignettes à 200 automatiquement. Je les laisse inclure leurs articles en tant que doc (bien que ce sont des JPG). Dans l’espace public c’est Thickbox qui prend le relais et on peut toujours zoomer la photo jusqu’à sa taille réelle. Et crois moi une demi-page de Ouest-France c’est grand, très grand...trop grand.

    • effectivement, ca aurait pu solutionner mon problème en parti.

      Mais suivant la section : rubrique ou article, la mise en page change, et donc le redimensionnement de l’image.

    Répondre à ce message

  • Jean-Noël

    Bonjour,

    attention petite faute de frappe dans la rédaction du plugin et dans le paragraphe « Utilisation » il est écrit imlien_oriniale au lieu de imlien_originale.

    ET merci un joli petit plus pour la rédaction et visualisation d’une image dans le texte.

    Cordialement

    Répondre à ce message

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom