Introduction
Cet outil est une fonctionnalité du plugin Le Couteau Suisse que vous pouvez trouver ici : Le Couteau Suisse. Pour avoir accès à la traduction des smileys, il vous faut donc avoir préalablement installé ce plugin.
Ensuite, une fois l’outil Smileys activé sur la page d’administration du plugin en espace privé, vous n’aurez plus qu’à écrire les smileys "en texte" pour qu’ils soient remplacés par la jolie frimousse correspondante dans tous vos textes.
Cette fonctionnalité est aussi très utile dans les forums. Lorsque le message est prévisualisé, tous les smileys sont traduits et l’auteur peut voir et vérifier aussitôt les images de remplacement dans son texte.
Notes
tous les textes de SPIP sont examinés pour trouver des racourcis de smileys (titres, articles, brèves, forums, etc.).
Pour les spécialistes
Le pipeline utilisé est : pre_typo
Le fichier inclus est : outils/smileys.php
Le dossier des images est : img/smileys
Un petit exemple de code obtenu pour le remplacement de " :->" (le petit diablotin) et qui peut ressembler à la forme suivante :
<img width="21" height="20" src="/plugins/couteau_suisse/img/smileys/diable.png" class="no_image_filtrer" title=":->" alt=":->"/>
le texte situé entre les balises <html> et </html>, <code> et </code>, <cadre> et </cadre>, <frame> et </frame>, <script> et </script>, <acronym> et </acronym> ou <cite> et </cite> est protégé : aucune frimousse n’y sera insérée.
La précaution "no_image_filtrer" empêche Spip de faire une quelconque modification à cette image. Le Couteau Suisse ajoute automatiquement les attributs width et height, et par soucis d’accessibilité, Les attributs alt et title ont été remplis par l’équivalent en texte de la petite frimousse.
Le calcul des frimousses est effectué en paralèlle du calcul de la page par Spip. Par exemple, un appel avec var_mode=calcul ou var_mode=recalcul provoque une réinitialisation complète des images.
Visualisation
Il vous est possible de visualiser les images en place en tapant l’adresse suivante [1] :
http://www.monsite.example/plugins/couteau_suisse/img/smileys
Mais voici pour vous un tableau récapitulatif :
Conseil : il vaut peut-être mieux de préciser à vos rédacteurs ou visiteurs les codes qu’ils peuvent utiliser dans leurs messages pour faciliter ensuite le filtrage des smileys. Par exemple, pour l’utilisation sur un forum, dans le squelette "forum.html" ajoutez le tableau récapitulatif ci-dessus.
La balise #SMILEYS
Lorsque les Smileys sont activés, vous disposez d’un autre système pour montrer à vos rédacteurs les raccourcis disponibles : la balise #SMILEYS. Cette balise se place dans vos squelettes à proximité des champs de rédaction des messages de forum par exemple.
La syntaxe est simple, la balise accepte 3 arguments (tous facultatifs, et dans l’ordre que vous voulez) :
un chiffre, représentant le nombre de colonnes du tableau produit
’titre’, indiquant que l’on veut un titre au tableau. En français ce titre est : "Frimousses disponibles :"
’liens’, indiquant que l’on veut des liens insérant les smileys dans l’éditeur de texte (id="textarea_1").
Exemples :
[(#SMILEYS)] : construit un tableau de 8 colonnes (8 est le chiffre par défaut), sans titre et sans liens.
[(#SMILEYS{15})] : construit un tableau de 15 colonnes, sans titre et sans liens.
[(#SMILEYS{1, liens})] : construit une colonne sans titre de smileys cliquables.
[(#SMILEYS{8, titre})] : construit un tableau de 8 colonnes et ajoute un titre [2].
[(#SMILEYS{0, titre, liens})] : construit une ligne de smileys cliquables, surmontée d’un titre.
Par défaut, voici l’aspect du tableau rendu par la balise #SMILEYS sans arguments :
Avec la syntaxe #SMILEYS{16, titre} :
Avec la syntaxe #SMILEYS{0, liens} :
Notez que sur l’exemple ci-dessus, une seule occurence de chaque frimousse a été représentée : même si tous les raccourcis restent disponibles, l’utilisateur n’a plus le choix dans celui qui est inséré dans son texte, il choisit simplement une image.
Les styles css vous permettent de modifier facilement l’aspect de ce tableau afin de l’adapter au style de vos page. Le tableau est de style "table class="spip cs_smileys smileys"", la ligne de titre : "tr class="row_first"", les lignes impaires : "tr class="row_even"" et les lignes paires : "tr class="row_odd"".
remplacer les images d’origine (img/smileys)
RSS 2.0