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>)
fonction survol 1.8.2
Vos commentaires
# Le 7 mars 2007 à 22:37, par Stéf
En réponse à : Vignettes et images de survol
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
# Le 7 mars 2007 à 23:09, par vinzmich
En réponse à : Vignettes et images de survol
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.
# Le 9 mars 2007 à 13:42, par Stéf
En réponse à : Vignettes et images de survol
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
# Le 9 mars 2007 à 18:33, par ?
En réponse à : Vignettes et images de survol
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é.
# Le 13 mars 2007 à 16:51, par stéf
En réponse à : Vignettes et images de survol
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; $i< count($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
# Le 17 mars 2007 à 11:22, par vinzmich
En réponse à : Vignettes et images de survol
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>).# Le 20 mars 2007 à 11:33, par ?
En réponse à : Vignettes et images de survol
En fait j’ai spip 1.9.2, j’ai tout vérifié et tjrs pas de résultat
désolé
# Le 22 mars 2007 à 12:09, par Philippe
En réponse à : Vignettes et images de survol - version 1.9.2
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 :
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.
# Le 22 mars 2007 à 14:36, par stef
En réponse à : Vignettes et images de survol - version 1.9.2
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
# Le 17 mars 2007 à 14:05, par Ben33
En réponse à : Vignettes et images de survol
Comment faire pour mettre en valeur un code(script) en couleurs, gras, comme un peu plus bas dans cette page !?
# Le 17 mars 2007 à 15:03, par ?
En réponse à : Vignettes et images de survol
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
# Le 29 octobre 2006 à 19:42, par DD
En réponse à : Très prometteur mais j’y arrive pas
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
# Le 30 octobre 2006 à 10:18, par vinzmich
En réponse à : Très prometteur mais j’y arrive pas
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.
# Le 30 octobre 2006 à 20:52, par DD
En réponse à : Très prometteur mais j’y arrive pas... finalement si
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
# Le 31 octobre 2006 à 18:14, par DD
En réponse à : Très prometteur mais j’y arrive pas... suite
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