Smileys II, génération automatique

Ce filtre automatise l’affichage des smileys à partir du contenus du répertoire /smileys.

Si comme moi vous utilisez le filtre de spip-o-japanim adapté par titeuf pour afficher des smileys sur vos publications, vous serez sans doute intéresé par ceci.

Le principe

Comment faire pour ne pas avoir à réécrire son filtre smileys à chaque fois qu’on souhaite enrichir ou modifier la liste de smileys que l’on propose dans un forum ?

C’est en réfléchissant à un système pratique que j’ai pensé à celui là :

Pourquoi ne pas générer automatiquement un liste de smileys grâce à ceux qui sont contenus dans le repertoire /smileys ?

Du coup il suffirait d’ajouter ou de supprimer des smileys dans le repertoire /smileys par ftp pour gérer en direct sa liste de smileys.

Vous pouvez voir ce filtre en action sur les forums de bloOg

Cette contrib vous propose :
-  un tableau généré automatiquement qui récapitule les smileys disponibles dans votre dosier /smileys
-  le filtre qui permet de les interpréter dans un texte.

Une fois ce filtre mis en place, vous n’aurez plus qu’à écrire les smileys « en texte » ou les glisser-déposer à partir du tableau récapitulatif, ils seront automatiquement remplacés par l’image correspondante.

La syntaxe utilisée pour écrire un smiley en texte est :nom pour chaque fichier nom.ext situé dans le répertoire /smileys.

Mise en place

Tout d’abord récupérez des smileys (formats de votre choix) et placez les dans un dossier « smileys/ » à la racine de votre site SPIP. Je vous conseille des images pas trop grandes, du style 15x15 px.

Ensuite copiez_collez dans mes_fonctions.php3 le filtre suivant : (si vous avez déjà au moins un filtre, et donc une page mes_fonctions.php3, supprimez les balises <?php et ?> dans ce morceau de code)

<?php

/*
 *   +----------------------------------+
 *    Nom du Filtre :    smileys II
 *   +----------------------------------+
 *    Date : mercredi 14 octobre 2003
 *    Auteur :  BoOz (booz.bloog@laposte.net)
 *   +-------------------------------------+
 *    Fonctions de ce filtre :
 *    Dans un texte, génère automatiquement le smiley 
 *    approprié à la place d'une chaine :nom.
 *    Ce filtre utilise les smileys disponibles dans       
 *    le répertoire smileys/
 *    Exemple d'application :
 *    [(#TEXTE|smileys)]
 *   +-------------------------------------+ 
 *  
 * Pour toute suggestion, remarque, proposition d'ajout
 * reportez-vous au forum de l'article :
 * http://www.uzine.net/spip_contrib/article.php3?id_article=261
*/

function smileys($chaine) {

$listimag=array();
$rep1="smileys/";
$listfich=opendir($rep1);
while ($fich=readdir($listfich))
{ 	if(($fich !='..') and ($fich !='.') and ($fich !='.test'))
	{ 
$nomfich=substr($fich,0,strrpos($fich, "."));
$listimag[$nomfich]="<img ALT=\"smiley\" src=\"smileys/".$fich."\">";
	}
}


ksort($listimag);
reset($listimag);

while (list($nom,$chem) = each($listimag))
{ 
  $chaine = str_replace(":".$nom, $chem , $chaine);
}

        return $chaine;
}
?>

Utiliser le filtre dans les squelettes

Maintenant que le filtre est en place il vous faut modifier les squelettes qui doivent prendre en compte ce filtre. Plus précisément ce sont sur les balises spip, affichant du texte (pouvant contenir des smileys), que vous devez appliquer ce filtre, par exemple dans vos squelettes de forums utilisez :

(#TEXTE

on peut également utiliser d’autres filtres en même temps que celui là, par exemple :

[(#TEXTE|justifier|smileys|autres_filtres)]

Pour plus de détails sur l’utilisation des filtres, voir : Les filtres de SPIP (dans la documentation officielle).

Tableau récapitulatif

Il faut aussi penser à montrer à vos rédacteurs ou visiteurs les smileys qui seront filtrés, et qu’ils peuvent utiliser. Par exemple, dans le squelette « forum.html » qui permet d’écrire un nouveau message, ajoutez le tableau récapitulatif ci-dessous.

Utilisez la commande

<br>
<INCLURE(inc_tableau_smileys.php3)>
<br>

Ce fichier appelle le fichier inc_tableau_smiley.html qui affiche la liste des smileys disponibles dans un tableau transparent.

Pour finir votre installation, téléchargez le fichier inc_tableau_smileys.html et son compère inc_tableau_smileys.php3 et placez les à la racine de votre site spip.

Pour les amateurs voici le code de inc_tableau_smileys.html :

<center>
  <H3>Smileys</H3>
(glisser-déposer)
<?php
$listimag=array();
$rep1="smileys/";
$listfich=opendir($rep1);
while ($fich=readdir($listfich))
{ 	if(($fich !='..') and ($fich !='.') and ($fich !='.test'))
	{ 
$nomfich=substr($fich,0,strrpos($fich, "."));
$listimag[$nomfich]=$rep1.$fich;
	}
}


ksort($listimag);
reset($listimag);
$compte=0;

// changer ci-dessous le nombre de colonnes (2 par défaut) //////////
$nbcol=3;

echo "<TABLE cellspacing=0
cellpadding=1><TR>\n";
while (list($nom,$chem) = each($listimag))
{ 
echo "<TD valign=bottom align=center class=\"t1\"><IMG
SRC=\"".$chem."\"><br>:".$nom."</TD>\n";
$compte++; 
	if ($compte % $nbcol == 0)
	{
	echo"</TR><TR>\n";}
	}
echo "</TR></TABLE>";
?>

</center>

Dernière modification de cette page le 11 février 2007

Discussion

7 discussions

  • Petite info : Tweak-Spip donne à son tour la possibilité de remplacer les raccourcis :toto par l’image toto.png (ou gif ou jpg) correspondante.

    Répondre à ce message

  • 1

    Il y a deux petits bugs :

    -  au niveau du parcours du répertoire : si on a un fichier ou un sous-répertoire dans emoticones/, mais qui n’a rien à voir avec des smileys, ça peut faire exploser le système. Je pense qu’on peut ajouter un test :

    if(($fich !='..') and ($fich !='.') and ($fich !='.test')
    AND preg_match(',\.(gif|jpg|png)$,', $fich)
    )

    -  au niveau du remplacement, si par hasard on a l’expression :-) à l’intérieur d’un tag (dans un title par exemple), ça va remplacer et éclater le tag. Pour corriger ça c’est un petit peu plus difficile : il faut d’abord « échapper » les tags, faire les remplacements, puis rétablir les tags.

    • J’ai testé le patch de Fil pour le premier point, ça marche nickel.

      En fait, c’est surtout très utile si vous développer votre site avec « SVN », car ce dernier créer des répertoires cachés « .svn » et cela plante en effet l’affichage des smileys dans ce cas là.

      Concernant le second point, j’ai pas vraiment compris, mais pour éviter que cela bloque, il suffira de ne pas mettre «  ;-) » dans vos titre d’article (et donc probablement dans votre balise html « title »

      A suivre donc !

    Répondre à ce message

  • 1

    Qui saurait comment gérer l’espace autour des smileys ? j’ajoute des &nbsp; quelquepart dans la fonction ou je trouve le style qui va bien pour avoir quelques pixels de libres autours de mes « emoticones » ? -Merci-

    • Il suffit de rajouter des marges dans le tableau html de inc-tableau-smiley je suppose.

      D’ailleurs il est assez vilain ce tableau, il faudrait des css pour bien faire.

    Répondre à ce message

  • 1

    Du haut de ma grande inculture, j’arrive pas à utiliser cette contrib !

    J’ai cru comprendre qu’il fallait mettre le tandem inc_tableau_smileys dans le répertoire ecrire du site et modifier le « forum.html » dans le même répertoire, puis modifier « mes_fonctions.html » pour permettre la saisie des smileys, ma j’ai du rater un truc quelque part.

    Je suis en 1.7.2...
    Merci pour votre aide.
    Alain

    • Salut,

      J’ai cru comprendre qu’il fallait mettre le tandem inc_tableau_smileys dans le répertoire ecrire du site

      Non pas du tout, il n’y a rien a modifier dans le répertoire ecrire.

      Les adapatations sont à apporter dans les pages du site public (les squelettes)

      @+

    Répondre à ce message

  • 4
    asso.bachant

    le glisser déposer ne fonctionne pas et je ne vois pas pourquoi.

    voir : http://www.bachant.net

    • il faut copier coller dans le texte le nom du smiley

      :monsmiley

      ca marche, meme chez toi je viens d’essayer

    • asso.bachant

      ça ne fonctionne toujours pas, ou est ce que je fais une mauvaise manip ?
      VOIR ICI

    • salut,

      as tu bien mis (#TEXTE dans tes boucles forums en bas des articles forums ?

      j’ai l’impression que ca marche au moins dans la page forum.php3/html, non ?

      @+

    • Maxime Ritter

      Chez moi non plus le glisser-déposer ne fonctionne plus, cela est soit lié au navigateur, soit il fallait comprendre « glisser déposer le texte en dessous, et non l’image ».

      Mais j’ai refait la chose avec du javascript, qui est normalement compatible avec plus de navigateurs (cf URL).

    Répondre à ce message

  • parfaitement genial
    Merci

    Répondre à ce message

  • 2
    asso.bachant

    attention revoir la zone telechargement.

    sinon faire du c/c ou de l’affichage code source.

    merci pour la fonction car trés pratique.

    • > il faut revoir la zone de téléchargement

      Que veux tu dire ?

      Tu es sur que ce n’est pas toi qui doit revoir ta méthode de récupération de fichiers ???

      Clic droit, enregistrer la cible sous ...

    • heure tardive !!!!!!!!!!!!!!!!!! scuse mi

    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