A tag cloud written exclusively in spip

the font size of each tag depends on the number of elements associated with that tag

All contributions published for previous SPIP versions

Displaying a list of all used tags, the font size of each tag depends on the number of elements associated with that tag

A keyword cloud exclusively written in SPIP. The size of each keyword depends on :

  • the number of articles
  • the number of folders
  • the number of sites that are associated with that keyword

Integrating the cloud into a template

The following code can be used in an include, or added to a template. In the case of an include, you can use the class parameter to specify the class to be applied to the <ul> tag.

For example, if you save the loop in a file called inc-keywordcloud.html, you can write the inclusion like this in your template :


Of course in this case you will have to add on the first line of the included file a value for the cache : #CACHE{n}, where n is the lifespan of the list before it is recalculated, measured in seconds. According to the frequency of the changes in the list, choose an appropriate value. #CACHE{3600*24} for example for a daily update of the list.

In the final page, it will result in an unordered list like this :

<div class="tags">
<ul class="your_class">
<div class="tags">
[(#SET{min,100000})][(#SET{max,0})]<B_scoresmots>#SET{ ecart, #GET{max}|moins{#GET{min}} }<BOUCLE_scoresmots (MOTS){type!==^_}>#SET{art,0}#SET{sit,0}#SET{rub,0}<BOUCLE_comptagerub (RUBRIQUES){id_mot}> </BOUCLE_comptagerub>[(#SET{rub,#TOTAL_BOUCLE})]</B_comptagerub><BOUCLE_comptageart (ARTICLES){id_mot}> </BOUCLE_comptageart>[(#SET{art,#TOTAL_BOUCLE})]</B_comptageart><BOUCLE_comptagesite (SITES){id_mot}> </BOUCLE_comptagesite>[(#SET{sit,#TOTAL_BOUCLE})]</B_comptagesite>[(#SET{rub,[(#GET{rub}|mult{2})]})][(#SET{sit,[(#GET{sit}|div{4})]})]#SET{score#ID_MOT,#GET{sit}|plus{#GET{art}}|plus{#GET{rub}}}[(#GET{score#ID_MOT}|>{#GET{max}}|?{#SET{max,#GET{score#ID_MOT}},""})][(#GET{score#ID_MOT}|<{#GET{min}}|?{#SET{min,#GET{score#ID_MOT}},""})]</BOUCLE_scoresmots><B_lesmots><ul[ class='(#ENV{class})']><BOUCLE_lesmots (MOTS){par type, titre}{type!==^_}>#SET{ place, #GET{score#ID_MOT}|moins{#GET{min}} }#SET{coef, #GET{place}|div{#GET{ecart}}|mult{1.5}}
[	(#GET{score#ID_MOT}|>{0}|?{<li><a style='font-size:[(#GET{coef}|plus{0.85}|round{2})]em' href='#URL_MOT'[ title="(#DESCRIPTIF|supprimer_tags)"]>[(#TITRE|replace{" ","&nbsp;"})]</a></li>,''})]</BOUCLE_lesmots>

The first loop scoremots calculates the score of each keyword and stores it in an array (score). It also gets the upper and lower scores.

The second loop lesmots displays the list of all keywords and sizes them according to their score.


Here are the lines you have to add to the css, in order to have a cloud-like list, with centered inline keywords.

.tags {} /* define here the general style of the box */
.tags ul {text-align:center;}
.tags li {display:inline; line-height:1.8em}
.tags li a {padding:4px 8px 4px 0}

Setting the font sizes

You can modify a couple of parameters :


To calculate the score of each tag, a folder gives 2 points, an article 1 point and a site 0.25 point.

You can change these coefficients in the following line :


Smallest and biggest keywords

The default in the given code is 0.85em for the smallest, and a range of 1.5em to the biggest, i.e 2.35em. Change the values in the following lines to get different sizes and range.

#SET{coef, #GET{place}|div{#GET{ecart}}|mult{1.5}}
[        (#GET{score#ID_MOT}|>{0}|?{<li><a style='font-size:[(#GET{coef}|plus{0.85}...

You can also choose not to display keywords with a score under a chosen minimum value (zero in the given code, which means all tags will be displayed, you can change it in the same above line)


The loop excludes all keywords when their group name starts with «_», so that you can easily exclude non semantic groups as long as you use an underscore as the first letter of the group name.

Default order is by group, then alphabetically within each group.

Terms of use


This software is licensed under the CC-GNU GPL version 2.0 or later.


No discussion

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite / PostgreSQL
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparait.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom