[5.0] Affichage des mots-clés en tagcloud

PPmarcel · juillet 2010

Bonjour.

Comme certains, j'attendais la gestion des tags avec PluXML, et c'est maintenant chose faite. Mais la chose qui me conviens moins est l'affichage de ces mots-clés sous forme d'une liste dans le sidebar, qui devient vite problématique si nous utilisons plusieurs dizaines de tags.

Pour remédier à ça, je vous propose de créer un système de tagcloud qui prends en compte la récurrence des tags avec un système de polices variables, un peu comme Dotclear ou Wordpress.

Création d'un nouvelle fonction
Nous allons éditer la classe plx.show

vi core/lib/class.plx.show.php

Puis nous allons ajouter ce code à la fin du fichier (avant les éléments " } ?>") :

    /** 
     * Méthode qui affiche un nuage de tags.
     * (inspiré de http://www.bytemycode.com/snippets/snippet/415/ )
     * @param   max     nombre maxi de tags à afficher
     * @author  PPmarcel
     **/ 
     public function tagCloud($max) {

        $time = @date('YmdHi');
        $array=array();
        # On verifie qu'il y a des tags
        if($this->plxMotor->aTags) {
            # On liste les tags sans créer de doublon
            foreach($this->plxMotor->aTags as $tag) {
                if($tag['date']<=$time AND $tag['active']) {
                    if($tags = array_map('trim', explode(',', $tag['tags']))) {
                        foreach($tags as $tag) {
                            if($tag!='') {
                                if(!isset($array[$tag]))
                                    $array[$tag]=1;
                                else
                                    $array[$tag]++;
                            }   
                        }   
                    }   
                }   
            }   
        }   
        uksort($array, create_function('$a, $b', 'return strcasecmp($a,$b);'));
        if(intval($max)>0) $array=array_slice($array, 0, $max);
    
        $font_max_size = 32; 
        $font_min_size = 12; 
        $tags_max_qty = max(array_values($array));
        $tags_min_qty = min(array_values($array));  

        $tags_spread = $tags_max_qty - $tags_min_qty;
        if ($tags_spread == 0) { // Evitons la division par 0
        $tags_spread = 1;
        }   

        // Parametrage de l'incrementation
        $tags_step = ($font_max_size - $font_min_size) / ($tags_spread);

        foreach($array as $tagname => $nbtags) {

            $tags_font_size = round($font_min_size + (($nbtags - $tags_min_qty) * $tags_step));
            $t = plxUtils::title2url($tagname);
            $tag_url = $this->plxMotor->urlRewrite('?tag/'.$t);
            $tag_status =  $this->plxMotor->cible==$t?'active':'noactive';
            $tag_name = plxUtils::strCheck($tagname);
            $nb_art = $nbtags;
            echo "<a class=\"$tag_status\" href=\"$tag_url\" style=\"font-size:${tags_font_size}px\" title=\"$nb_art articles avec le tag $tag_name\"> $tag_name </a>;";
        }
    }

Lister tous les tags en page statique
Dans votre panneau d'administration, créez une nouvelle page statique ayant ces propriétés:

Glissez ces 2 lignes dans le fichier obtenu:

<?php global $plxShow;
$plxShow->tagCloud($max='300'); ?>

Intégrer le tagCloud dans le sidebar
Il vous faut éditer le fichier sidebar.php de votre thème et y ajouter ceci:

<h2>Mots cl&eacute</h2>
    <p><?php $plxShow->tagCloud($max='25'); ?><br><br>
    <center><a href="index?static3/alltags" title="Tous les tags"><em>[ Tous les tags ]</em></a></center></p>

Comme vous pouvez le deviner, la variable $max correspond au nombre de tags à afficher. Si vous devez en limiter le nombre, la troisième ligne vous donne un lien vers la page statique listant tous les tags. Editez ce lien en fonction des numéros et nom de la page statique précédement créé.

Le résultat final devrait ressembler à ça:

La mise en application est visible ici.

Edit (25/08/10) : ajout du tri par ordre alphabetique

super_g2 · juillet 2010

excellent ça!!

il manque juste un symbole "$" dans la dernière ligne pour le $nb_art = nbtags;
il faudrait mettre $nb_art = $nbtags;

PPmarcel · juillet 2010

Merci, c'est corrigé. Tu es rapide

super_g2 · juillet 2010

comme buzz l'éclair, vers l'infini et au-delà !

par contre, pas corrigé sur ton site semble-t-il

Stéphane · juillet 2010

Ha ben tu me coupes l'herbe sous le pied. J'ai prevu le nuage de tag dans la prochaine release de pluxml, mais je n'ai pas fait comme toi coté programmtion (une approche un peu différente, peut etre plus simple dans le coding). Le temps de rassembler mon code et je le mettrai ici, pour avoir un avis sur les 2 solutions.

PPmarcel · juillet 2010

super_g2 a écrit:

comme buzz l'éclair, vers l'infini et au-delà !

par contre, pas corrigé sur ton site semble-t-il

C'est fait.

PPmarcel · juillet 2010

Stephane: Bonne nouvelle alors. Une solution proprement pensée sera très certainement mieux que mon copié/collé/réajusté.

Il ne s'agissait là que d'une solution "en attendant". L'utilisation d'une page statique pour tout le cloud fait un peu bricolage aussi

Stéphane · juillet 2010

Donc voilà mon code

Tout d'abord la fonction tagList (à remplacer dans le fichier class.plx.show.php

/**
	 * Méthode qui affiche la liste de tous les tags.
	 *
	 * @param	format	format du texte pour chaque tag (variable : #tag_status, #tag_url, #tag_name, #nb_art)
	 * @param	max		nombre maxi de tags à afficher
	 * @param	cloud	mets en place le nuage de tags si à vrai
	 * @return	stdout
	 * @scope	global
	 * @author	Stephane F
	 **/
	public function tagList($format='<li><a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name</a></li>', $max='5', $cloud=false) {

		$time = @date('YmdHi');
		$array=array();
		$maximum = 0;
		# On verifie qu'il y a des tags
		if($this->plxMotor->aTags) {
			# On liste les tags sans créer de doublon
			foreach($this->plxMotor->aTags as $tag) {
				if($tag['date']<=$time AND $tag['active']) {
					if($tags = array_map('trim', explode(',', $tag['tags']))) {
						foreach($tags as $tag) {
							if($tag!='') {
								if(!isset($array[$tag]))
									$array[$tag]=1;
								else
									$array[$tag]++;
								if($array[$tag]>$maximum) 
									$maximum = $array[$tag];
							}
						}
					}
				}
			}
		}
		natsort($array);		
		if(intval($max)>0) $array=array_slice($array, 0, $max, true);
		# On affiche la liste
		$size=0;
		foreach($array as $tagname => $nbtags) {
			$t = plxUtils::title2url($tagname);		
			$class = (($this->plxMotor->mode=='tags' AND $this->plxMotor->cible==$t)?'active':'noactive');
			if($cloud) {
				$percent = floor(($nbtags/$maximum)*100);
			    if ($percent <20)
					$class_tag = 'tag-smallest';
				elseif ($percent>= 20 and $percent <40)
					$class_tag = 'tag-small';
				elseif ($percent>= 40 and $percent <60)
					$class_tag = 'tag-medium';
				elseif ($percent>= 60 and $percent <80)
					$class_tag = 'tag-large';
				else
					$class_tag = 'tag-largest';
				$class = $class_tag.' '.$class;
			}
			$name = str_replace('#tag_id','tag-'.$size++,$format);
			$name = str_replace('#tag_url',$this->plxMotor->urlRewrite('?tag/'.$t),$name);
			$name = str_replace('#tag_name',plxUtils::strCheck($tagname),$name);
			$name = str_replace('#nb_art',$nbtags,$name);			
			$name = str_replace('#tag_status',$class,$name);			
			echo $name;
		}
	}

le bout de css à mettre dans le fichier style.css de son thème

.tag-smallest {
    font-size: 8px;
}
.tag-small {
    font-size: 10px;
}
.tag-medium {
    font-size: 12px;
}
.tag-large {
    font-size: 14px;
}
.tag-largest {
    font-size: 16px;
}

Donc pour afficher le nuage de tag, l'appel de la fonction tagList se fait de cette façon

<?php $plxShow->tagList('<li class="#tag_status"><a href="#tag_url" title="#tag_name">#tag_name</a></li>', 20, true); ?>

Il faut mettre le 3ieme paramètre à true.

Pour personnaliser la taille des tags, il suffit de modifier les valeurs font-size dans le css

Je n'ai pas encore pousser les tests avec un jeu d'essai ayant beaucoup de tags. Si quelqu'un peut s'en charger et me faire un retour. Merci d'avance

Stéphane · juillet 2010

On devrait pour utiliser tout ça à partir d'une page statique de cette façon

<?php
global $plxShow;

		<h2>Mots clés</h2>
		<ul>
			<?php $plxShow->tagList('<li class="#tag_status"><a href="#tag_url" title="#tag_name">#tag_name</a></li>', 20, true); ?>
			<li class="last_li"> </li>
		</ul>
?>

(à valider également)

PPmarcel · juillet 2010

Je n'ai pas compris tout le code pour l'affichage des tags (en général). Si tu limites le nombre de tags en sidebar, lesquels seront affichés?

Est-ce que ce sera ceux qui ont le plus grand nombre d'articles associés, ou bien est-ce aléatoire? (je ne parle pas du classement alphabetique que tu as proposé sur un des forums)

(La première option serait le meilleure bien sûr).

Stéphane · juillet 2010

au passage dans le code de la fonction tagList, il y a le tri par ordre alphabétique des tags et 2 bugs corrigés

Stéphane · juillet 2010

Je t'avoue que je trouve pas très utile le fait de limiter le nombre de tags à afficher. Au départ c'était pour éviter d'avoir une liste très longue dans la sidebar. La sélection se fait du 1er tag au nième. Donc maintenant comme ils sont triés par ordre alpha, ça prendra du tag commençant par la lettre a, jusqu'au nième.

super_g2 · juillet 2010

pas mal tout ça, je sens que la v5.1 sera du tonnerre de zeus !

sinon, pour votre interrogation, la version de Stéphane me parait plus intéressante, car un poil plus configurable. seule ombre au tableau : l'affichage non aléatoire des tags.

je vais tester ça avant les vacs jspr

PPmarcel · juillet 2010

Il faudrait déplacer la balise de fermeture php dans la page statique:

<?php
global $plxShow; ?>

        <h2>Mots clés</h2>
        <ul>
            <?php $plxShow->tagList('<li class="#tag_status"><a href="#tag_url" title="#tag_name">#tag_name</a></li>', 20, true); ?>
            <li class="last_li"> </li>
        </ul>

Aussi, la dernière puce est-elle censée être centrée en dessous de la liste? Moi elle est décalée vers la gauche.

En ce qui concerne le cloud, il ne marche pas chez moi. Si je mets $cloud=false, j'ai bien une liste. Si il est sur true, j'ai la même liste avec les éléments triés du moins important au plus important.

link image.

Stéphane · juillet 2010

Ma solution n'est peut etre pas concluante. La tienne a l'air de bien marcher. S'il le faut elle sera retenue

En effet pour le code de la page statique, j'ai un peu été vite dans le copier coller. tu as bien corrigé

super_g2 · juillet 2010

je viens de tester en local, ton code stéphane est "trop propre", le nuage en sidebar est trop "aligné", cf. ma photo ci-dessous.
on peut y voir que les tags sont classés par ordre de "force", et non en aléatoire..

EDIT : j'ai comparé les 2 sur une installation propre, voici le screen :

on peut voir qu'il y a des bugs d'affichage sur la version de PPmarcel, mais qu'elle est plus "belle" dans son caractère aléatoire.

d'ailleurs, tu as une faute de syntaxe dans ta fonction (le dernier "echo", ne pas écrire "echo =")

echo "<a class=\"$tag_status\" href=\"$tag_url\" style=\"font-size:${tags_font_size}px\" title=\"$nb_art articles avec le tag $tag_name\"> $tag_name </a>";

j'ai viré aussi el symbole ";" de trop dans cette ligne echo

PPmarcel · juillet 2010

super_g2 a écrit:

on peut y voir que les tags sont classés par ordre de "force", et non en aléatoire..

Ca doit être à cause du format de sortie, ordonné par les balises "li". Personellement je l'avais contourné en affichant 2 espaces après #tag_name du sidebar et puis c'est tout. Ex:

<?php $plxShow->tagList('<li class="#tag_status"><a href="#tag_url" title="#tag_name">#tag_name</a></li>', 20, true); ?>

deviendrait:

<?php $plxShow->tagList('<a href="#tag_url" title="#tag_name">#tag_name  </a>', 20, true); ?>

En ce qui concerne mon essai, j'ai dû louper quelque chose, pour ne même pas parvenir à avoir le cloud.

super_g2 · juillet 2010

pour l'histoire du fond pas blanc,
juste mettre ça (même si d'un point de vue html, c'est "moche.... non strict"....) :

<h2>Mots clés PPMarcel</h2>
		    <p style="background-color:white;border-bottom-left-radius: 4px 4px;border-bottom-left-radius: 4px 4px;border-bottom-left-radius: 4px 4px;border-bottom-right-radius: 4px 4px;border-bottom-right-radius: 4px 4px;border-bottom-right-radius: 4px 4px;border-top-left-radius: 0px 0px;border-top-left-radius: 0px 0px;border-top-left-radius: 0px 0px;border-top-right-radius: 0px 0px;border-top-right-radius: 0px 0px;border-top-right-radius: 0px 0px;border-right-width: 1px;border-bottom-width: 1px;border-left-width: 1px;border-right-style: solid;border-bottom-style: solid;border-left-style: solid;border-right-color: #CBCBCB;border-bottom-color: #CBCBCB;border-left-color: #CBCBCB;text-align:center">
		        <br /><?php $plxShow->tagCloud($max='25'); ?><br /><br />
		    	<a href="index?static3/alltags" title="Tous les tags"><em>[ Tous les tags ]</em></a>
		    </p>

PPmarcel · juillet 2010

En supprimant le "li"comme j'ai (mal) conseillé, on perd le #tag_status, qui gère la taille des polices. Il faudrait le replacer dans le herf:

<?php $plxShow->tagList('<a href="#tag_url" title="#tag_name">#tag_name  </a>', 20, true); ?>

deviendrait:

<?php $plxShow->tagList('<a class="#tag_status" href="#tag_url" title="#tag_name">#tag_name  </a>', 20, true); ?>

PPmarcel · juillet 2010

Super_g2: Essayes des polices de 12, 16, 20, 24, 28. Ca te décalera beaucoup plus les tags, et ca donnera un aspect plus aléatoire avec la version de Stephane.

super_g2 · juillet 2010

je confirme, c'est très "casse-sensitive" ! mais ca reste trop "propre" et bien rangé par ordre de font-size.

tiens, je pensai à un truc : Stéphane, tu avais fait un addons pour Ti_Pierre pour l'ancienne version de PXL.. avec le réel aspect d'un tag cloud, bougeant toussa...
c'est encore possible d'implémenter ce dispositif? c'était un javascript??

bg62 · juillet 2010

bonjour
j'voudrais bien ... mais j'peux point ... installer ce sytème de 'tags', avec, si possible quelques effets 'visuels', en fonction du nombre de fois que le mot est cité par exemple,mais là, j'avoue, je m'y perds en (gros) peu ...
serait-il possible d'avoir un récapitulatif ?
@+

Stéphane · juillet 2010

super_g2 a écrit:

tiens, je pensai à un truc : Stéphane, tu avais fait un addons pour Ti_Pierre pour l'ancienne version de PXL.. avec le réel aspect d'un tag cloud, bougeant toussa...
c'est encore possible d'implémenter ce dispositif? c'était un javascript??

Non je n'avais pas fait d'addon de ce genre. A voir avec Ti-Pierre directement alors

Stéphane · juillet 2010

super_g2 a écrit:

je viens de tester en local, ton code stéphane est "trop propre", le nuage en sidebar est trop "aligné", cf. ma photo ci-dessous.
on peut y voir que les tags sont classés par ordre de "force", et non en aléatoire..

as-tu essayé de modifier les tailles dans le fichier css de manière à avoir une différence plus visible entre un tag peu utilisé et celui beaucoup. Ce n'est peut être qu'une question de réglage à ce niveau.

du coup le tri par ordre alphabétique des tags ne me semble peut etre pas judicieux pour avoir quelque chose de sympa à l'écran

fightsoul · juillet 2010

Bonjour,
@super_g2 : c'est un plugin jQuery qui gère ça et si mes souvenirs sont bon, il s'appel tagSphere.
t'as un tuto ici si tu veux http://bidouilleur.com/nuage-de-tags-mots-cles-3d-dynamique-en-jquery/

Frédéric · juillet 2010

fightsoul a écrit:

Bonjour,
@super_g2 : c'est un plugin jQuery qui gère ça et si mes souvenirs sont bon, il s'appel tagSphere.
t'as un tuto ici si tu veux http://bidouilleur.com/nuage-de-tags-mots-cles-3d-dynamique-en-jquery/

Je confirme que c' étais par Jquery tagSphere

super_g2 · août 2010

re all, retour de vacs, merci pour ces dernières précisions

je testerai une fois les vacs réellement finies xD (2 semaines encore mouhahaha)

benpro · août 2010

Bonjour,

vous penserez que cette fonctionnalité sera ajouté quand dans une prochaine version ? Étant donnée que je n'aime pas trop bidouiller les CMS/Blogs/... Je préfère attendre que les fonctionnalités soit ajoutés officiellement

PPmarcel · août 2010

Stéphane a écrit:

J'ai prevu le nuage de tag dans la prochaine release de pluxml

Apparement oui ^_^

habsblog.tk · août 2010

Alors à quand la prochaine release ????

joebart · août 2010

habsblog.tk a écrit:

Alors à quand la prochaine release ????

Je plussoie, c'est très style ce nuage de tags ^^

[5.0] Affichage des mots-clés en tagcloud

Réponses