UtagCloud

Depuis que j’ai basculé sur Modx, j’avais envie de m’amuser avec les tags. J’ai d’abord utilisé directement le snippet tagcloud, puis ce week-end je me suis dit qu’on pouvait faire mieux, beaucoup mieux, à l’image de zoomclouds par exemple.

J’utilise sur ce site depuis le début le snippet TagCloud, et j’ai décidé de l’améliorer fortement.
Voici quelques unes de ces fonctionnalités :

• Construction automatique, sans besoin de préciser des tags pour chaque page (compte les mots et les range par quantité)
• Recherche récursive
• Exclusion de mots ‘courants’ via des fichiers de langues (pour l’instant seul un fichier français a été réalisé)
• Exclusion des caractères de contrôles via des fichiers de langues
• Detection automatique des pluriels courants des mots et ‘fusion’ des mots singuliers et pluriels dans un même tag (tout au moins fonctionne en français)
• Le rendu est paramétrable par templates (chunks ou fichiers) et css
• Plusieurs tagClouds différents sont possibles sur une même page
• Colorisation des mots, possibilité de nombre de couleurs différentes potentiellement illimité (nécéssite autant de configuration des css)
• Possibilité de paramétrer lors du lancement un certain nombre d’éléments consititutif du nuage :
  • nombre d’occurences minimales des mots à afficher
  • nombre de lettre minimales pour un mot
  • nombre total de mots maximum dans le nuage
  • taille minimale de la police
  • taille maximale de la police

L’installation est classique pour un snippet modx :

• créez un répertoire UtagCloud dans le répertoire assets/snippets/ de votre site
• copiez le contenu de l’archive dans ce UtagCloud
• dans modx, créez un snippet nommé ‘UtagCloud’
• copiez le contenu du fichier UtagCloud_snippet.php.txt dans le contenu du snippet
• Ensuite dans une page, invoquez le snippet comme vous avez l’habitude de le faire (voir les exemples plus bas)

Voici l’explication des paramètres en français. Pour une explication en anglais, veuillez vous référer à l’entête du fichier UtagCloud_snippet.php.txt

• &parent =    liste des répertoires modx contenant des documents, séparés par une virgule. Si vous utilisez le paramètre récusif ci-après, vous pouvez mettre `0` dans parent pour parcourir tout le site.
• &recursive =  [ 0 | 1 ] : Détermine si UtagCloud scanne les répertoires et documents modx récursivement ou non.
• &min =      [ number ] : Nombre minimum d’occurence d’un mot afin qu’il soit affiché dans le nuage.
• &landing =  [ number ] : l’ID de page de résultat de la recherche : chaque clic sur un mot du tag générera une recherche (FlexSearch) et aboutira sur cette page de résultat. Si vous n’avez pas de page de résultat, créez en une avec à l’intérieur :
• &minsize =  [ number ] : Nombre de lettres minimale d’un mot pour qu’il soit affiché dans le nuage.
• &wordsmax = [ number ] : Nombre maximum de mots du nuage. Indiquez zéro (`0`) pour un nombre illimité.
• &fontmin =  [ number ] : Taille minimum de la police de caractère en % (pour les mots avec la plus petite occurence).
• &fontmax =  [ number ] : Taille maximum de la police de caractère en % (pour les mots avec la plus grande occurence).
• &lang =     [ text ] : Paramètre de langue pour lire les fichiers d’exclusion.
• &template =   [ text ] : nom d’un Chunk ou d’un fichier dans templates/ qui sera utilisé pour affiche le contenu du nuage.
• &css =        [ text ] : nom du fichier css qui sera inclus au document. Pratique si vous utilisez styleid, pour séparer les styles différents de vos nuages.
• &styleid =    [ text | number ] : nouvelle instance de style (css) pour votre nuage. Permet d’avoir plusieurs nuages de style différents sur une même page.
• &colors =     [ number ] : nombre de couleurs différentes pour les mots du nuage.
• &plural_letter = [ text ] : définit la lettre qui sert à mettre au pluriel les mots de façon la plus courante (en français c’est le ’s’). Permet de regrouper les mots singuliers et pluriels en un seul mot pour tout compter d’un coup. Si vous ne souhaitez pas utiliser cette fonctionnalité, définisez `#` comme valeur à ce paramètre.

UtagCloud utilise principalement deux classes de style, mais qui sont déclinable en fonction du styleid et du nombre de couleurs définies :

• .Utagcloud_XXX : où XXX est le styleid (par défaut c’est `0`)
• .Utagcloudtext_XXX_CCC : où XXX est toujours le styleid et où CCC est la couleurID

par exemple, si nous avons paramétré 5 couleurs, et que le styleid est celui par défaut, il faudra définir dans la css les styles suivants :

• .UtagCloud_0 {} : pour le div contenant le nuage.
• .UtagCloudtext_0_1 {} : pour le texte de couleur numéro 1
• .UtagCloudtext_0_2 {} : pour le texte de couleur numéro 2
• .UtagCloudtext_0_3 {} : pour le texte de couleur numéro 3
• .UtagCloudtext_0_4 {} : pour le texte de couleur numéro 4
• .UtagCloudtext_0_5 {} : pour le texte de couleur numéro 5

Ensuite, tout dépend du template et de ce que vous avez envie de faire. Vous pouvez par exemple avoir envie de paramétrer les :hover afin de changer le comportement quand on passe la souris.

  UtagCloud_v2.0alpha3.zip (11,5 KiB)