Vignettes et images de survol

Cette contrib est inspirée de La miniature et son popup, par pym [1].

Présentation :

Lorsqu’on utilise la génération d’images miniatures (vignettes), une image insérée en tant que document a un lien permettant l’ouverture de l’image originale en taille réelle. Ce lien ouvre cette dernière à la place du contenu, dans une page blanche.

Avec cette contribution, l’image originale s’ouvre à la place de la vignette, à son survol. Le reste de l’article est inchangé, à l’exception de la mise en page qui se décale du fait de la différence de taille entre les 2 images.

Installation :

  • décompresser l’une des archives jointes en fonction de votre version de SPIP puis ouvrir survol.php3 [2] dans un éditeur de texte
  • copier/coller la fonction « survol » :
    • soit dans le fichier mes_fonctions.php3 qui se trouve à la racine du site (SPIP 1.8)
    • soit dans le fichier mes_fonctions.php qui se trouve dans le dossier squelettes (SPIP 1.9)

Utilisation :

Dans le squelette de l’article (article.html), appliquer le filtre « survol » au texte, c’est à dire remplacer #TEXTE par [(#TEXTE|survol)].

Exemple :
Voir cette page, sur laquelle on voit bien le résultat du traitement des images insérées comme documents sous forme de vignettes. Les autres images restent inchangées.

Principe de fonctionnement :

Le script recherche toutes les occurrences de vignettes, c’est à dire une balise image précédée d’un lien vers une image de type jpg, png ou gif : <a href=""><img src=""></a>. Il les remplace par une balise image avec survol (<img src="" onmouseout="" onmouseover="">) : l’image de la vignette est utilisée comme argument de « onmouseout » alors que l’image originale est utilisée comme argument de « onmouseover ».

Limitations :

-  testé sur SPIP 1.8.2, 1.9.1 et 1.9.2
-  ne fonctionne que pour des images insérées dans l’article en tant que documents, donc par une balise du type doc (exemple : <doc123|center>)

Notes

[1merci à lui pour ses conseils

[2ou survol.php dans le cas de SPIP 1.9

Discussion

3 discussions

  • 8

    Je débute avec SPIP, j’ai téléchargé 1.9.1 mais je ne vois pas de dossier squelettes, faut-il le créer ? et où se trouve le fichier mes_fonctions.php

    Merci de votre aide

    • Bonjour Stef,

      Effectivement, s’il n’existe pas, il faut créer le répertoire squelettes à la racine du site (tu peux alors y mettre tes squelettes perso, par exemple adaptés à partir des squelettes pas défaut qui se trouvent dans le dossier dist).

      Pareil pour le fichier mes_fonctions.php : le créer s’il n’existe pas, le placer dans le répertoire squelettes.

    • Bonjour winzmick

      J’ai suivi tes conseils, merci, mais ça ne fonctionne pas.

      J’ai crée un repertoire squelettes mis articles.html, rubrique.html mon css et le fichier mes_fonctions.php dans lequel j’ai collé le contenu du fichier dézippé "survol"

      J’ai la main sur la vignette qui ouvre une page avec l’image grandeur nature

      Je travaille en local sur EasyPHP et quand je vais à la cofiguration des vignettes dans spip je n’ai pas d’aperçu, le problème vient-il de là

      Voilà ce que j’ai comme indication ( j’ai choisi convert sinon la vignette n’apparait pas)

      Veuillez sélectionner la meilleure méthode de fabrication des vignettes en cliquant sur l’image correspondante.

      netpbm

      convert

      N.B. Si aucune image n’apparaît, alors le serveur qui héberge votre site n’a pas été configuré pour utiliser de tels outils. Si vous souhaitez utiliser ces fonctions, contactez le responsable technique et demandez les extensions « GD » ou « Imagick ».

      Merci pour ton avis

      Stéf

    • En local avec EasyPHP, je n’ai pas non plus accès au choix gd1 ou gd2. Et j’ai le même comportement que toi : une vignette cliquable, qui ouvre l’image vraie grandeur dans une nouvelle fenêtre.

      Sur mon site hébergé chez free, j’ai choisi une génération de vignette par la méthode gd2 et tout fonctionne bien.

      Tu peux aussi t’assurer que « Générer automatiquement les miniatures des images. » est bien coché.

    • Bonjour, désolé ça marche toujours pas !
      j’ai transféré spip chez free, je peux configurer le choix gd2 pour les vignettes
      J’ai crée un fichier squelette mis le fichier mes_fonctions.php
      avec la boucle « survol » :
      <?php
      /*
       *   +----------------------------------+
       *    Nom du Filtre :    survol                                               
       *   +----------------------------------+
       *    Date : vendredi 11 octobre 2006
       *    Auteur :  vinzmich (vinzmich@yahoo.fr)                                      
       *   +-------------------------------------+
       *    Fonctions de ce filtre :
       *    Remplace les vignettes et leurs liens par des vignettes dont l'image de survol est l'image en vraie grandeur.
       *    Le filtre survol est à appliquer au texte, dans le squelette de l'article sous la forme [(#TEXTE|survol)]
       *   +-------------------------------------+ 
       *  
       * Pour toute suggestion, remarque, proposition d'ajout
       * reportez-vous au forum de l'article :
       * http://www.uzine.net/spip_contrib/article.php3?id_article=1418
      */

      function survol($chaine) {
          
      $motif "/<a href=\"IMG\/(jpg|gif|png)\/([^\"]+\.(jpg|gif|png))\"(.+)><img src='IMG\/(cache.+)\/([^']+\.(jpg|gif|png))'(.+)\/><\/a>/";
          
      //cherche la chaine $motif dans la chaine $chaine et renvoi les résultats dans la teableau $tabresult
          
      preg_match_all ($motif$chaine$tabresult);
          
      $to_return $chaine;
          for (
      $i=0$icount($tabresult[0]); $i++) {
              
      $rep_on $tabresult[1][$i]; // 1ère parenthèse capturante : répertoire image cible (survol)
              
      $img_on $tabresult[2][$i]; // 2ème parenthèse capturante : nom de fichier image cible (survol)
              
      $rep_off $tabresult[5][$i]; // 5ème parenthèse capturante : répertoire vignette
              
      $img_off $tabresult[6][$i]; // 6ème parenthèse capturante : nom de fichier vignette
              
      $zesurvol '<a href="javascript:;"><img title="patience, l\'image en vraie grandeur va s\'ouvrir..." style="border-width: 0px;" class="spip_logos" alt="" src="IMG/'.$rep_off.'/'.$img_off.'" name="limage'.$i.'" onmouseover="document.limage'.$i.'.src = \'IMG/'.$rep_on.'/'.$img_on.'\'" onmouseout="document.limage'.$i.'.src = \'IMG/'.$rep_off.'/'.$img_off.'\'"></a>';
              
      $to_return preg_replace("<".$tabresult[0][$i].">",$zesurvol,$to_return);
          }
      //fin for
          
      return $to_return;
      }
      // FIN du Filtre survol
      ?>

      J’ai mis aussi un fichier rubrique.html et un fichier article.html
      J’ai remplacé #TEXTE par (#TEXTE dans article.html dans une div « texte »

      #TITRE

      (#TEXTE


      (#LOGO_DOCUMENT
      (#TITRE
      [(#DESCRIPTIF)]



      Au secours ! Merci

    • As-tu vérifié que les images sont incluses dans ton article en tant que document (et pas en tant qu’image) ? Pour que le filtre fonctionne, il faut que les images aient été ajoutées à l’article avec la boite de dialogue « JOINDRE UN DOCUMENT » ou « AJOUTER UN DOCUMENT » et non pas « AJOUTER UNE IMAGE ». Il faut aussi que ces images soient insérées dans l’article avec la bonne balise, c’est à dire quelque chose du type <doc123> (et non <img123>).

    • En fait j’ai spip 1.9.2, j’ai tout vérifié et tjrs pas de résultat

      désolé

    • Philippe

      J’utilise également la version 1.9.2 et la fonction telle quelle pour la version 1.9.1 ne fonctionnait pas.

      En fait, j’ai vu que dans cette nouvelle version de spip, l’organisation des répertoires pour les images est différentes. J’ai alors modifié le code de la fonction survol ainsi :

      function survol($chaine)

      $motif = « /< a href=\"IMG\/([^\"]+\.(jpg|gif|png))\"(.+)>< img src=’local\/(cache-vignettes.+)\/([^’]+\.(jpg|gif|png))’(.+)\/><\/a>/ » ;

      //cherche la chaine $motif dans la chaine $chaine et renvoi les résultats dans la teableau $tabresult

      preg_match_all ($motif, $chaine, $tabresult) ;

      $to_return = $chaine ;

      for ($i=0 ; $i< count($tabresult[0]) ; $i++)

      $rep_off = $tabresult[4][$i] ; // répertoire vignette

      $img_off = $tabresult[5][$i] ; // nom de fichier vignette

      $rep_on = $tabresult[2][$i] ; // répertoire image cible (survol)

      $img_on = $tabresult[1][$i] ; // nom de fichier image cible (survol)

      $zesurvol = ’< a href="javascript : ;">< img title="le survol avec le curseur de la souris (et un peu de patience) agrandit l\’image" style="border-width : 0px ;" class="spip_logos" alt="" src="local/’.$rep_off.’/’.$img_off.’" name="limage’.$i.’" onmouseover="document.limage’.$i.’.src = \’IMG/’.$img_on.’\’" onmouseout="document.limage’.$i.’.src = \’local/’.$rep_off.’/’.$img_off.’\’">< /a>’ ;

      $to_return = preg_replace(« <".$tabresult[0][$i]."> »,$zesurvol,$to_return) ;

      //fin for

      return $to_return ;

      // FIN du Filtre survol

      NB : pour éviter l’interprétation des balises par l’éditeur de message, j’ai inséré des espaces entre le "<" et le caractère suivant ainsi :
      "< a", "< img", "< /a" doivent être écrit sans l’espace.

      Cela semble fonctionner, mais j’ai encore des cas où les images s’affichent aleatoirement (une fois oui, une fois non). Je me demande si cela est dû à mon hébergeur ou à l’écriture du code (je suis débutant en php et en expression régulière sous php). Si quelqu’un peut m’aider à améliorer le code merci d’avance.

    • J’ai enfin réussi à le faire tourner sur SPIP 1.9.1 seulement ; sur 1.9.2 avec le nouveau script de Philippe, ça me plante la BDD

      Donc il faut faire attention de joindre à l’article un document ( qui sera l’image ) et dans le texte de l’article ! mettre la balise de l’image avec son numéro correspodant qui est donné au doc soit

      A bientôt pour de nouvelles aventures avec 1.9.2

      Stef

    Répondre à ce message

  • 1

    Comment faire pour mettre en valeur un code(script) en couleurs, gras, comme un peu plus bas dans cette page !?

    • Pour du code, il me semble qu’il faut mettre le script entre [code] et [/code] (remplacer [] par <>). Pour le gras, utiliser les raccourcis typographiques proposés par l’interface ou mettre le texte entre doubles accolades.

    Répondre à ce message

  • 3

    J’essaie d’implémenter cette fonction sur un site en 1.9.1 mais le résultat n’est pas au rendez-vous :

    je mets le fichier mes_fonctions.php dans le dossier squelettes (et pas à la racine) et le fitre (#TEXTE sur le squelette ARTICLE

    et je me retrouve avec cette erreur pour les articles :
    Fatal error : Call to undefined function : survol() in /home/www/monsite/www/ecrire/public/composer.php(48) : eval()’d code on line 887

    je crois qu’il y a un problème de chemin.

    Si je mets mes_fonctions.php à la racine ca ne marche pas non plus -> pas de fonction SURVOL connue
    (là je crois que c’est normal).

    catherine

    • Bonjour,

      C’est effectivement dans le dossier squelettes qu’il faut mettre mes_fonctions.php pour SPIP 1.9 => je vais modifier l’article pour apporter cette correction.

      Pour l’instant je ne comprends pas pourquoi ça ne fonctionne pas chez toi. Dans un 1er temps (ça parait idiot mais on ne sait jamais) vérifie bien l’orthographe de la fonction survol à la fois dans le squelette article.html et dans mes_fonctions.php. Et aussi la syntaxe de ce fichier php (les balises, les accolades de la fonction, etc.) et de l’article ([(#TEXTE|survol)]).
      Si tu le souhaites, envoie-moi un message en utilisant ce lien pour qu’on puisse éventuellement échanger des fichiers par courriel.

    • Ca y est j’ai réussi. Je pense que je n’avais pas bien copié/collé le code de mes_fonctions.php,

      C’est très bien comme résultat (trouve-je) : http://www.stadeleonardkreisker.fr/spip.php?article20

      merci
      dd

    • j’ai parlé trop vite, le survol marche très bien sur Firefox mais avec Explorer 6 l’image « saute » et décale toute la mise en page. (testé sur Linux et Win XP)

      catherine

    Répondre à ce message

Ajouter un commentaire

Qui êtes-vous ?

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

Dernière modification de cette page le 31 mars 2008