SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 246 visiteurs en ce moment

Accueil > Affichage multimédia > Images > Images réactives > Lien image réduite vers image originale

Lien image réduite vers image originale

25 août 2007 – par Jujubre – 15 commentaires

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

Zip - 3.1 ko

Dernière modification de cette page le 1er janvier 2016

Retour en haut de la page

Vos commentaires

  • Le 5 août 2012 à 10:13, par Christian Julia En réponse à : Lien image réduite vers image originale

    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

  • Le 16 mai 2011 à 12:47, par Glika Tchu En réponse à : Lien image réduite vers image originale

    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 :

    1. <?php
    2.  
    3. function imlien_originale($texte) {
    4.  
    5. $texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.jpe?g\')([^>]*)></span>@',
    6.  
    7. '\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    8.  
    9. $texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.gif\')([^>]*)></span>@',
    10.  
    11. '\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    12.  
    13. $texte = preg_replace('@(<span[^>]*>)(\s*<img src=\')([^\\.]*\.png\')([^>]*)></span>@',
    14.  
    15. '\\1<a href=\'\\3\' type=\'image/jpeg\' target=\'_blank\'>\\2\\3\\4></a></span>',$texte);
    16.  
    17. return $texte;
    18.  
    19. }
    20.  
    21. ?>

    Télécharger

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

    Répondre à ce message

  • Le 10 décembre 2009 à 17:54, par ? En réponse à : Correction que apastrophe

    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

  • Le 10 décembre 2009 à 16:55, par ? En réponse à : Correction de marge et apastrophe spip 2.09

    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

  • Le 30 avril 2008 à 17:35, par Béat En réponse à : Lien image réduite vers image originale

    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 ?

    • Le 1er mai 2008 à 19:33, par Jujubre En réponse à : Lien image réduite vers image originale

      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

    • Le 1er mai 2008 à 22:23, par Béat En réponse à : Lien image réduite vers image originale

      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)

    • Le 28 juin 2008 à 18:21, par Louis En réponse à : Lien image réduite vers image originale

      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

  • Le 9 mai 2008 à 12:55, par EricW En réponse à : Lien image réduite vers image originale

    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) :

    Répondre à ce message

  • Le 14 octobre 2007 à 12:12, par Manu En réponse à : Lien image réduite vers image originale

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

    <a href='//static-contrib.spip.net/IMG/jpg/plan2007.jpg'' type='image/jpeg'><img src='//static-contrib.spip.net/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

  • Le 26 août 2007 à 11:28, par SPQR En réponse à : Pas sûr d’avoir tout compris...

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

    • Le 26 août 2007 à 12:30, par Jujubre En réponse à : Pas sûr d’avoir tout compris...

      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.

    • Le 26 août 2007 à 17:26, par ? En réponse à : Pas sûr d’avoir tout compris...

      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.

    • Le 26 août 2007 à 18:28, par Jujubre En réponse à : Pas sûr d’avoir tout compris...

      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

  • Le 26 août 2007 à 08:00, par Jean-Noël En réponse à : Lien image réduite vers image originale

    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

Répondre à cet article

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Critère {mots}

    6 août 2009 – 316 commentaires

    Permettre de sélectionner facilement des objets SPIP ayant un ou des mots clefs en communs.

  • LinkCheck : vérificateur de liens

    13 février 2015 – 64 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Import ICS 2 (agenda distant)

    2 août – 39 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • GIS 4

    11 août 2012 – 1286 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)