Joooklabs - Joooklabs

Tutoriel Pligg : Colored tags, mots-clés en couleur

Votre nuage de tag en couleurs aléatoires, c'est pas dur, c'est mignon, ça prend 10 minutes :)

La fonction qu'elle est bien pour mettre de la couleur

commencez par chercher le fichiers libs/tags.php

Le calcul de la taille des tags, entre autres, se fait à l'aide de la classe TagCloud {}, aux environ de la ligne 75. Vers la ligne 130, on va déclarer un nouveau tableau ici

    $tag_number = array();
    $tag_name = array();
    $tag_count = array();
    $tag_size = array();
    $tag_url = array();

en ajoutant juste après la dernière ligne :

$tag_color = array();

Pour chaque Tags, maintenant, on va définir aléatoirement une couleur, ici

foreach (array_keys($words) as $theword) {

    $tag_number[$tagnumber] = tagnumber;
    $tag_name[$tagnumber] = $theword;
    $tag_count[$tagnumber] = $words[$theword];
    $tag_size[$tagnumber] = $tags_min_pts + ($tag_count[$tagnumber] - 1) * $coef;

en ajoutant juste après la dernière ligne :

$sColor = "rgb(";
srand((double)microtime()*1000003);
$sColor .= rand(0,255).",";
srand((double)microtime()*1000003);
$sColor .= rand(0,255).",";
$sColor .= rand(0,255).")";
$tag_color[$tagnumber] = $sColor;

Il ne faut pas oublier, un peu plus loin dans le fichier tags.php, d'assigner la nouvelle variable de coulauer à une variable smarty

// Set the smarty variables
if(isset($words)){$this->smarty_variable->assign('words', $words);}
if(isset($tag_number)){$this->smarty_variable->assign('tag_number', $tag_number);}else{$this->smarty_variable->assign('tag_number', 0);}
if(isset($tag_name)){$this->smarty_variable->assign('tag_name', $tag_name);}
if(isset($tag_count)){$this->smarty_variable->assign('tag_count', $tag_count);}
if(isset($tag_size)){$this->smarty_variable->assign('tag_size', $tag_size);}
if(isset($tag_url)){$this->smarty_variable->assign('tag_url', $tag_url);}

en rajoutant derière cette ligne :

if(isset($tag_url)){$this->smarty_variable->assign('tag_color', $tag_color);}

templates à modifier

Une fois fait, il ne reste qu'à insérer la nouvelle valeur de votre variable de couleur à l'intérieur d'un <span> dans le fichier tag_cloud_center.tpl

cherchez la ligne :

<span style="font-size: {$tag_size[customer]}pt">
<a href="{$tag_url[customer]}">{$tag_name[customer]}</a> </span>

et remplacez là par

<a href="{$tag_url[customer]}"><span style="font-size: {$tag_size[customer]}pt; color: {$tag_color[customer]};">{$tag_name[customer]}</span></a>

Pour ne pas avoir de problème avec les css, mieux vaux définir le span à l'intérieur du lien.
Personnalisation

Si vous souhaitez personnaliser un peu, passez par la css et définissez un identifiant pour le div qui conteint l'ensemble des tags, comme en voici un exemple :

transformez avec l'identifiant que vous souhaitez, dans votre template :

<div style="line-height: {$tags_max_pts}pt;">

<div id="cloudyJoOok" style="line-height: {$tags_max_pts}pt;">

puis définissez simplement des attributs pour ce div dans votre feuille main.css

#cloudyJoOok {

}
#cloudyJoOok a:link{
        border-bottom : none;
        margin : 0px 3px;
        font-weight : bold;
}

#cloudyJoOok a:hover{
        border-bottom: 1px solid #ececec;
}

< Précédent		Suivant >

Navigation

Syndication

Dernières vidéos