Nuage de tags avec Zend_Tag_Cloud

Publié par Maxence le lun, 29/06/2009 - 09:28
Logo Zend Framework

Zend_Tag_Cloud est un composant qui permet d'afficher un nuage de tags. Son utilisation est très simple. Imaginons que vous tenez un magasin de fruits et légumes et que vous voulez avoir un aperçu rapide des ventes de la journée :

<?php
require_once 'Zend\Tag\Cloud.php';

$tags = array(
    array(
        'title' => 'Choux',
        'weight' => 5,
        'params' => array(
            'url' => '/ventes/choux'
        ),
    ),
    array(
        'title' => 'Salades',
        'weight' => 50,
        'params' => array(
            'url' => '/ventes/salades'
        ),
    ),
    array(
        'title' => 'Tomates',
        'weight' => 40,
        'params' => array(
            'url' => '/ventes/tomates'
        ),
    )
);

$cloud = new Zend_Tag_Cloud(
    array('tags' => $tags)
);

echo $cloud;
?>

weight correspond au poids du tag (ici le nombre de kilos vendu). Vous obtenez alors l'affichage suivant :

Liste de tags

Ça ne ressemble pas vraiment à un nuage, n'est ce pas ? L'auteur de ce composant a utilisé pour une raison qui m'échappe (signification sémantique ?), une liste à puce pour afficher les différents éléments.

Heureusement, on peut personnaliser l'affichage avec... les décorateurs (et oui, encore eux !).

Il y a deux types de décorateurs : les décorateurs de nuage et les décorateurs de tag. Pour les premiers, on peut définir un tableau de balises HTML à utiliser pour entourer l'ensemble des liens. Pour obtenir un nuage de tags classique, on va utiliser un DIV avec le style CSS text-align:justify pour que forcer les lignes de texte à s'étirer jusqu'au bord droit. On indique également qu'on veut séparer chaque lien par un espace. Pour les décorateurs de tags, on va passer un tableau vide à l'option htmlTags pour supprimer les balises LI.

<?php
$cloud = new Zend_Tag_Cloud(
    array(
        'cloudDecorator' => array(
            'decorator' => 'HtmlCloud',
            'options' => array(
                'htmlTags' => array(
                    'div' => array('style' => 'text-align:justify;width: 200px')
                ),
                'separator' => ' '
            )
        ),
        'tagDecorator' => array(
            'decorator' => 'HtmlTag',
            'options' => array(
                'htmlTags' => array()
            )
        ),
        'tags' => $tags
    )
);
?>

On obtient alors le résultat suivant, plus conforme à nos attentes :

Nuage de tags

Etiquettes:

Commentaires

seb (non vérifié)

lun, 29/06/2009 - 12:09

Salut,

Merci pour le petit tuto sur la création d'un nuage de TAG.

Par contre j'ai une question, dans ton exemple lorsque tu utilise le cloudDecorator, tu applique un style a la balise div "un peu a l'arrache" ( dans le sens pas fan du css mélangé dans le code php ), est il possible également de spécifier un id à la div et appliquer le style en css ?

Quelque chose comme :

'div' => array('class' => 'tag')

Merci!

Maxence

lun, 29/06/2009 - 13:51

Bien sur, si j'ai mis le style en ligne, c'est pour simplifier l'exemple. On peut passer n'importe quel attribut en option (class, id...).

seb (non vérifié)

lun, 29/06/2009 - 15:06

oki :-)

Ajouter un commentaire