Accueil Boite à Outils Aide SPIP Astuce pour les images fréquemment utilisées

Publié le : 1er décembre 2004
Imprimer Imprimer cet article

Auteur :
Alain Sichel

Alain Sichel
Astuce pour les images fréquemment utilisées

Cet article propose d’utiliser un filtre destiné à l’origine à insérer des smileys afin d’afficher des images ou motifs fréquemment utilisés dans les articles [1].

 

 Comment afficher les smileys

Vous connaissez les smileys utilisés dans les messages, forums et parfois aussi dans nos articles, par exemple ;-) ou B-)

Japanim présente une astuce pour les afficher sur un site Spip sous formes d’images, ainsi, notre exemple devient smiley ou smiley

Il s’agit d’un filtre qui peut être appliqué aux boucles :

<BOUCLE_pr (BREVES) {id_breve}>
[(#TEXTE|justifier|smileys)]
</BOUCLE_pr>

Pour que cela fonctionne, il suffit d’inclure la fonction smileys dans le fichier "mes_fonctions.php3" (s’il n’existe pas, créez-le à la racine du site) [2]. Dans la fonction se trouvent les correspondances entre les chaînes de caractères :-p et les images smiley :

$chaine = str_replace("smiley texte à filtrer",$chemin . "smiley-image\">",$chaine);

D’autres articles ont repris cette astuce, en particulier Titeuf sur SPIP contrib et Cyberpatrouille, avec surtout des modifications concernant les images des smileys. Ensuite Smileys II, génération automatique puis Des smileys dans SPIP ont perfectionné le fonctionnement, surtout pour des forums utilisant les smileys.

 Application à d’autres images

J’ai pensé à appliquer cette astuce à d’autres images que j’utilise fréquemment dans les pages du site du CYES [3].

Voici un exemple de fragment de page :

Liens :

Haut de la page
  • FrançaisAnglaisMedHunt : Base de données de ressources médicales sur le site Health On the Net
  • FrançaisMediamed : Promouvoir la connaissance, la recherche et la communication en médecine et santé Médecin Maître-Toile Francophone Dr Henri Gracies

Catalogues :

Haut de la page

Pour toutes les images affichées ci-dessus, j’utilise l’astuce des smileys [4]. J’ai tout simplement ajouté dans la fonction smileys dans le fichier "mes_fonctions.php3" :

$chaine = str_replace("<fr>", '<img src="/images/drapeau/fr.gif" alt="Français" title="Site en Français" align="middle" width="16" height="16" />', $chaine);

$chaine = str_replace("<en>", '<img src="/images/drapeau/gb.gif" alt="Anglais" title="Site en Anglais" align="middle" width="16" height="16" />', $chaine);
etc...

Et on peut aller plus loin : comme vous pouvez le constater, les symboles pdf, zip, toucan ne sont pas une simple image, mais une chaîne de caractères associant lien, image et code HTML : [5]

$chaine = str_replace("<pdf>", '<a href="/aide/acrobat.php" target="_blank" class="int"><img src="/images/logos/pdf.gif" title="pdf" alt="pdf" width="16" height="16" border="0" align="middle" /></a>', $chaine);

$chaine = str_replace("<zip>", '<a href="/aide/pop_zip.php" class="int" target="_blank" onclick="ouvreWindow(this.href,\'\',\'toolbar=no,scrollbars=yes,resizable=yes\',600,80); return false" onmouseover="window.status=\'Signification de ce symbole\'; return true"><img src="/images/logos/zip.gif" title="zip" alt="zip" width="16" height="16" border="0" align="middle" /></a>', $chaine);

$chaine = str_replace("<toucan>", '<a href="/liens/pop_toucan.php" class="int" target="_blank"  onclick="ouvreWindow(this.href,\'\',\'toolbar=no,resizable=yes\',660,50); return false" onmouseover="window.status=\'Signification de ce symbole\'; return true"><img src="/images/logos/tc.gif" width="35" height="15" align="middle" border="0" alt="Médecin Maître-Toile Francophone" /></a>', $chaine);

Ainsi, en écrivant dans un article les quelques caractères choisis (dans mon exemple : <fr> <en> <pdf> <zip> ou <toucan>), j’obtiens la page les éléments que j’ai indiqués dans "mes_fonctions.php3".

J’ai choisi < > pour encadrer les caractères car "fr, en, pdf, zip, ou toucan" peuvent se retrouver dans le texte des pages, il ne faut pas que la chaîne de caractères les remplace si ce n’est pas vraiment ce que l’on veut. On aurait pu prendre d’autres caractères, mais j’ai évité { } et [ ] qui sont déjà utilisés dans le code de Spip.

Evidemment, si je décide de changer une image ou un lien, cette modification effectuée une fois dans "mes_fonctions.php3" ce répercutera pour toutes les pages.

 Les sous-titres :

Pour les sous-titres de séparation utilisés dans mon exemple de fragment de page, le principe est le même, car étant utilisés dans toutes les pages du site, il est plus simple de taper quelques caractères que tout le code. Il faut simplement le séparer en 2 parties entre lesquelles on note le sous-titre :

$chaine = str_replace("<sous-titre>", '<table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td class="soustitre" width="93%"><h3>', $chaine);

$chaine = str_replace("<sous-titre-fin>", '</h3></td><td nowrap="nowrap"><div align="right"><a href="#top"><img src="/modele/fl_ht.gif" alt="Haut de la page" width="16" height="16" border="1" title="Retour en haut de la page" /></a></div></td></tr></table>', $chaine);

Ainsi, je n’ai plus qu’à taper par exemple <sous-titre>Liens :<sous-titre-fin> dans mon article.

Ceci n’est qu’un exemple, car si vous voulez changer les intertitres de Spip créés par {{{ et }}}, il y a plus simple à faire : l’astuce est indiquée ici.

- pour tout le site : Ecrivez dans le fichier "mes_fonctions.php3" placé à la racine du site :

<?php
$debut_intertitre='<table width="100%" border="0" cellspacing="0" cellpadding="3"><tr><td class="soustitre" width="93%"><h3>';
$fin_intertitre='</h3></td><td nowrap="nowrap"><div align="right"><a href="#top"><img src="/modele/fl_ht.gif" alt="Haut de la page" width="16" height="16" border="1" title="Retour en haut de la page" /></a></div></td></tr></table>';
?>

- seulement pour vos articles : Ecrivez dans le fichier "article.php3" les variables $debut_intertitre et $fin_intertitre modifiées comme ci-dessus, à côté des variables obligatoires $fond et $delais.

 Autre utilisation

On peut sur le même principe utiliser une chaîne de caractères qui sera remplacée par une autre après l’avoir indiquée dans "mes_fonctions.php3".

Ainsi j’ai pu faire fonctionner le raccourci typographique "
" (undercose suivi d’une espace), théoriquement installé dans SPIP, mais qui ne marchait pas. Pour cela, j’ai ajouté à la fonction smileys($chaine) la ligne :

$chaine = str_replace("
", "<br />", $chaine);

 Pensez aux rédacteurs

Si vous utilisez cette astuce, il est souhaitable de préciser (par exemple dans un article ou une page particulière) à vos rédacteurs la liste des éléments utilisables par ce filtre "smileys".


 

[1] Cet article a été modifié le 24/11/2005 pour ajouter la partie "Autre utilisation".

[2] L’article de Titeuf sur SPIP contrib propose le fichier "mes_fonctions.php3" à enregistrer (Texte, 1,8 Ko) puis à placer à la racine de votre site sous le nom "mes_fonctions.php3", ainsi que les images smileys à télécharger (Zip, 17,1 Ko).

[3] Le site du CYES n’est pas encore sous Spip. J’en suis encore à la recherche de solutions pour permettre le passage prochain du site sous Spip, sans perte de son contenu actuel.

[4] Pour le moment uniquement sur les pages d’essais, mais cette astuce sera appliqué à tout le site du CYES à son passage sous Spip.

[5] Je ne rentre pas dans le détail du code car cela ne concerne pas le sujet de cet article, mais j’utilise une fonction javascript ouvreWindow() écrite dans un fichier externe et l’astuce d’Openweb pour ceux qui ont désactivé Javascript.




Imprimer Imprimer cet article


Réactions à l'article :