Ajouter de jolies Smileys dans ses commentaires

• Publié le 02 Janvier 2009
• 6 commentaire(s)
• Catégorie : Technologies Web

Généralement les systèmes de Blogs (ou sites Web 2.0) proposent d'ajouter des commentaires sur les billets ou les articles. La création de ces commentaires sont parfois en texte brut, ou parfois accompagnés d'un mini éditeur WYSIWYG, toujours assez grossier pour limiter les effets incontrôlables d'une libre contribution trop avancée. J'ai donc opté pour une transformation automatique des sauts de lignes, des liens et des Smileys.

Mécanismes par défaut

eZ Publish propose pour cela, et de façon native plusieurs opérateurs, dont :

• autolink : génération automatique des liens autour des saisies http://domaine.com
• wash : nettoyage des balises XHTML : wash(xhtml)
• break : ajout des balises XHTML de saut de ligne <br />
• wordtoimage : remplacement automatique des :) en images de Smileys.

Exemple de code :

 <p>{$node.data_map.text.content|wash(xhtml)|break|wordtoimage|autolink}</p>
 

Problème

Ce dernier wordtoimage opérateur fait l'affaire dans la plupart des cas, mais si on est un vrai Geek, il n'est pas concevable de laisser la situation en l'état, pour plusieurs raisons :

• Les images "bleus" par défaut ne sont pas terribles, et il n'est pas évident de les redéfinir de façon élégante (le chemin vers le répertoire d'image est fixé en dur /share/icons/ dans un fichier de settings)
• Le code généré n'est pas valide (absence des ALT), et il n'est pas possible de surcharger cet aspect (le code XHTML est fixé en dur dans le code PHP de l'opérateur...)

Solution

Choisir son package

Voici la solution que j'ai appliqué pour ce site, mais il existe de nombreuses autres façon de procéder. Tout d'abord il faut choisir le package de Smileys à votre goût. Pour ma part, il s'agit d'un package Tango pour Kopete.

Créer son opérateur de template

Ensuite, il faut créer son opérateur de template, qui reprend en gros le principe très simple de wordtoimage, à savoir remplacer les textes par des images, en fonction d'un fichier de correspondance. Par contre j'y ai ajouté la gestion des ALT, et le stockage des images dans le répertoire design du siteaccess.

• Le chemin pour stocker les images est donc : extension/monextension/design/monsiteaccess/images/ezsmileys/ (voir le paramètre imagedir dans le fichier de configuration)
• Le chemin pour stocker mon opérateur de template est donc : extension/monextension/autoloads/ezsmileys.php (ne pas oublier de le déclarer dans eztemplateautoload.php, voir la documentation
• Le chemin pour stocker mes paramètres : extension/monextension/settings/ezsmileys.ini.append.php

Bien sur, il faut modifier son template de la sorte :

 <p>{$node.data_map.text.content|wash(xhtml)|break|ezsmileys|autolink}</p>
 
 

Rendre le PNG transparent avec Internet Explorer

Le format PNG est idéal dans mon cas de figure, puisque l'on peut modifier le design du site, et passer du fond blanc au fond noir. Par contre Internet Explorer 6 (et 5.5) n'affichent pas la transparence des PNG, il est donc nécessaire de bricoler un peu. Ce site explique tout ce qu'il faut savoir : http://homepage.ntlworld.com/bobosola/index.htm

Cela explique l'utilisation des balises width et height dans le code XHTML produit par l'opérateur.

Résultat

Extrait de code

Code de l'opérateur : /monextension/autoloads/ezsmileys.php

<?php
 
class eZSmileys
{
    function eZSmileys()
    {
    }
 
    function operatorList()
    {
        return array( 'ezsmileys' );
    }
 
    function namedParameterPerOperator()
    {
        return true;
    }
    
    function namedParameterList()
    {
        return array( 'ezsmileys' => array( true ));
    }
    
    function modify( $tpl, $operatorName, $operatorParameters, &$rootNamespace, &$currentNamespace, &$operatorValue, &$namedParameters )
    {
      $ini = eZINI::instance("ezsmileys.ini");
                $imagedir = $ini->variable( 'eZSmileysSettings', 'imagedir' );
  
                $replaceText = $ini->variable( 'eZSmileysSettings', 'ReplaceText' );
                $replaceIcon = $ini->variable( 'eZSmileysSettings', 'ReplaceIcon' );
  $replaceAlt = $ini->variable( 'eZSmileysSettings', 'ReplaceAlt' );
  
  $imagewidth = $ini->variable( 'eZSmileysSettings', 'imagewidth' );
  $imageheight = $ini->variable( 'eZSmileysSettings', 'imageheight' );
  
  $designURI = $siteBase = eZURLOperator::eZImage( $tpl, $imagedir, $operatorName, false );
 
                foreach( $replaceIcon as $key => $icon )
                {
                    $icons[] =  '<img width="'.$imagewidth.'" height="'.$imageheight.'" alt="'. $replaceAlt[ $key ] .'" src="' . $designURI  . '/' . $icon . '"/>';
                }
 
                $operatorValue = str_replace( $replaceText, $icons, $operatorValue );
    }
}
 
?>
 

Code des paramètres : /extension/monextension/settings/ezsmileys.ini.append.php

 <?php /*
 
[eZSmileysSettings]
 
imagedir=ezsmileys
imagewidth=16
imageheight=16
 
ReplaceText[]=:)
ReplaceIcon[]=1.png
ReplaceAlt[]=Smiling
ReplaceText[]=:-)
ReplaceIcon[]=1.png
ReplaceAlt[]=Smiling
 
ReplaceText[]=:-(
ReplaceIcon[]=2.png
ReplaceAlt[]=Sad
ReplaceText[]=:(
ReplaceIcon[]=2.png
ReplaceAlt[]=Sad
 
ReplaceText[]=;-)
ReplaceIcon[]=3.png
ReplaceAlt[]=Wink
ReplaceText[]=;)
ReplaceIcon[]=3.png
ReplaceAlt[]=Wink
 
ReplaceText[]=8)
ReplaceIcon[]=4.png
ReplaceAlt[]=Big Eyes
 
ReplaceText[]=:D
ReplaceIcon[]=5.png
ReplaceAlt[]=Laughing
ReplaceText[]=:-D
ReplaceIcon[]=5.png
ReplaceAlt[]=Laughing
 
ReplaceText[]=:'(
ReplaceIcon[]=6.png
ReplaceAlt[]=Crying
ReplaceText[]=:-|
ReplaceIcon[]=6.png
ReplaceAlt[]=Crying
 
ReplaceText[]=:|
ReplaceIcon[]=7.png
ReplaceAlt[]=Suspicious
ReplaceText[]=:-/
ReplaceIcon[]=7.png
ReplaceAlt[]=Suspicious
 
ReplaceText[]=:-*
ReplaceIcon[]=8.png
ReplaceAlt[]=Kiss
 
ReplaceText[]=:O
ReplaceIcon[]=12.png
ReplaceAlt[]=Surprising
ReplaceText[]=:o
ReplaceIcon[]=12.png
ReplaceAlt[]=Surprising
ReplaceText[]=:-O
ReplaceIcon[]=12.png
ReplaceAlt[]=Surprising
ReplaceText[]=:-o
ReplaceIcon[]=12.png
ReplaceAlt[]=Surprising
 
*/ ?>
 

Inclusion du FIX pour le support du PNG dans IE6 :

<!--[if lt IE 7.]>
<script defer type="text/javascript" src={'javascript/pngfix.js'|ezdesign}></script>
<![endif]-->
 

• Tags :
• Template Operators
• PNG
• Smileys
• eZ Publish