Opinionz mais en blog - Balise - plugin

DotClear 2 : remplacer les liens du plugin Menu Freshy par des images

Benjamin — Wed, 26 Mar 2008 20:41:00 +0100

Suite à la publication de la modification pour afficher des images à la place des liens dans le blogroll sous DotClear 2, Francis T. m'a demandé sur le forum DotClear si ladite modification pourrait fonctionner avec le plugin "Menu Freshy". Oui Francis, c'est possible. Voici comment.

L'idée est donc de modifier le plugin Menu Freshy pour permettre l'utilisation d'images à la place des liens dans le menu généré par le plugin.

Pour ce faire, on va indiquer le chemin vers l'image à la fin du champ "Titre", après le caractère "|" utilisé pour la séparation des 2 valeurs. On vérifiera par la suite si le titre contient ce caractère et on s'emploiera à séparer le titre du chemin vers l'image.

Dans cet exemple pris tout à fait au hasard, j'ai modifié le lien vers le site WebCiné, l'annuaire des sites de cinéma belges francophones

J'ai tout d'abord sauvegardé le fichier original plugins/menuFreshy/_public.php.

Voici ensuite les modifications que j'ai apportées à la méthode "getLinksList()", à la ligne 87.

On remplace :

default:  // Les themes studiopress et freshy et les autres

foreach ($links as $v)

{

        $title = $v['link_title'];

        

        // [images dans le menu freshy]

        // on tente d'extraire l'url de l'image dans le titre

        // on vérifie si la fin du titre contient un "|" suivi par l'url d'une image

        $titleContainsImgUrl_b = preg_match("`^(.+)\|(.+(gif|jpe?g|png))$`i", $title, $result_at);

        // on récupère l'url de l'image

        $img = ($titleContainsImgUrl_b) ? $result_at[2] : "";

        // on supprime l'url du titre

        $title = ($titleContainsImgUrl_b) ? $result_at[1] : $title;

        // [/images dans le menu freshy]

        

        $href  = $v['link_href'];

        $desc = $v['link_desc'];

        $lang  = $v['link_lang'];

        $xfn = $v['link_xfn'];

        



        // Si c'est le premier on lui met une classlien

        if ($first==true){

                $classlien=" class=\"first_menu\" ";

                $first=false;

        } else {

                $classlien="";

        }       

        

        // Si ce doit être le dernier

        if ($xfn=="me"){

                $classlast=" last_menu";

                $classlienlast=" class=\"last_menu\""; 

                $classitem=$classlast;

        } else {

                $classlast="";

                $classlienlast="";

                $classitem="page_item";

        }       

        

        $link =

        '<a href="'.html::escapeHTML($href).'"'.

        ((!$lang) ? '' : ' hreflang="'.html::escapeHTML($lang).'"').

        ((!$desc) ? '' : ' title="'.html::escapeHTML($desc).'"').

        ((!$xfn) ? '' : ' rel="'.html::escapeHTML($xfn).'"').

        

        // [images dans le menu freshy]

        ((!$img) ? '' : ' class="menufreshyLinkImg" style="background-image: url('.html::escapeHTML($img).')"').

        // [/images dans le menu freshy]

        

        $classlien.$classlienlast.

        '><span>'.

        html::escapeHTML($title).

        '</span></a>';

par :

default:  // Les themes studiopress et freshy et les autres

foreach ($links as $v)

{

        $title = $v['link_title'];

        

        // [images dans le menu freshy]

        // on tente d'extraire l'url de l'image dans le titre

        // on vérifie si la fin du titre contient un "|" suivi par l'url d'une image

        $titleContainsImgUrl_b = preg_match("`^(.+)\|(.+(gif|jpe?g|png))$`i", $title, $result_at);

        // on récupère l'url de l'image

        $img = ($titleContainsImgUrl_b) ? $result_at[2] : "";

        // on supprime l'url du titre

        $title = ($titleContainsImgUrl_b) ? $result_at[1] : $title;

        // [/images dans le menu freshy]

        

        $href  = $v['link_href'];

        $desc = $v['link_desc'];

        $lang  = $v['link_lang'];

        $xfn = $v['link_xfn'];

        



        // Si c'est le premier on lui met une classlien

        if ($first==true){

                $classlien=" class=\"first_menu\" ";

                $first=false;

        } else {

                $classlien="";

        }       

        

        // Si ce doit être le dernier

        if ($xfn=="me"){

                $classlast=" last_menu";

                $classlienlast=" class=\"last_menu\""; 

                $classitem=$classlast;

        } else {

                $classlast="";

                $classlienlast="";

                $classitem="page_item";

        }       

        

        $link =

        '<a href="'.html::escapeHTML($href).'"'.

        ((!$lang) ? '' : ' hreflang="'.html::escapeHTML($lang).'"').

        ((!$desc) ? '' : ' title="'.html::escapeHTML($desc).'"').

        ((!$xfn) ? '' : ' rel="'.html::escapeHTML($xfn).'"').

        

        // [images dans le menu freshy]

        ((!$img) ? '' : ' class="menufreshyLinkImg" style="background-image: url('.html::escapeHTML($img).')"').

        // [/images dans le menu freshy]

        

        $classlien.$classlienlast.

        '><span>'.

        html::escapeHTML($title).

        '</span></a>';

Pour éviter de devoir indiquer le chemin complet depuis la racine dans chaque titre, on peut bien sûr ajouter le chemin de base vers les images dans le "background-image" comme suit, on n'aura plus alors qu'à indiquer le nom de l'image après le "|" dans les titres :

((!$img) ? '' : ' class="menufreshyLinkImg" style="background-image: url(/chemin/de/base/vers/les/images/'.html::escapeHTML($img).')"').

On ajoute ensuite dans le fichier "style.css" du thème utilisé :

/* images des le menu freshy */

li.page_item {

        list-style: none;

}

a.menufreshyLinkImg {

        display: block;

        float: left;

        width: 80px;

        height: 15px;

        background-repeat: no-repeat;

        background-position: left top;

}

a.menufreshyLinkImg[hreflang]:after {

        content: "";

}

a.menufreshyLinkImg span {

        position: absolute;

        left: -9999px;

        top: -9999px;

}

Vous êtes libres de modifier la CSS comme bon vous semble, cela va de soi.

Lors de l'affichage des liens dans le Menu Freshy, si le chemin vers une image est défini, le titre du lien sera masqué (la technique pour masquer l'élément est libre, celle que je donne ici n'est qu'un exemple) et c'est l'image qui sera affichée à la place, aux dimensions définies dans la CSS. Si vos images ont des tailles différentes, définissez la taille dans le PHP.

DotClear 2 : remplacer les liens par des images dans le blogroll

Benjamin — Mon, 17 Mar 2008 13:42:00 +0100

Simon H., fidèle lecteur de ce blog (ou individu uniquement intéressé par la réponse à son message, allez savoir) m'a demandé dans un courriel envoyé il y a peu si ma technique de remplacement des liens par des images dans le blogroll fonctionnait avec DotClear 2. J'ai donc adapté ce bon vieux code et, 3 ans, 3 mois et presque 3 jours (c'est ballot, j'aurais pu attendre encore un peu) après la publication sur ce blog extraordinaire de cette astuce, je vous donne la même chose mais en mieux et fonctionnant avec DotClear 2.

L'idée est donc de modifier le plugin qui gère le blogroll pour permettre l'utilisation d'images à la place des liens dans le blogroll.

Dans cet exemple pris tout à fait au hasard, j'ai modifié le lien vers le site WebCiné, l'annuaire des sites de cinéma belges francophones

J'ai tout d'abord sauvegardé le fichier original plugins/blogroll/_public.php.

Voici ensuite les modifications que j'ai apportées à la méthode "getLinksList()", à la ligne 89.

On remplace :

$title = $v['link_title'];

$href  = $v['link_href'];

$desc = $v['link_desc'];

$lang  = $v['link_lang'];

$xfn = $v['link_xfn'];



$link =

'<a href="'.html::escapeHTML($href).'"'.

((!$lang) ? '' : ' hreflang="'.html::escapeHTML($lang).'"').

((!$desc) ? '' : ' title="'.html::escapeHTML($desc).'"').

((!$xfn) ? '' : ' rel="'.html::escapeHTML($xfn).'"').

'>'.

html::escapeHTML($title).

'</a>';

par :

$title = $v['link_title'];



// [images dans le blogroll]

// on tente d'extraire l'url de l'image dans le titre

// on vérifie si la fin du titre contient un "|" suivi par l'url d'une image

$titleContainsImgUrl_b = preg_match("`^(.+)\|(.+(gif|jpe?g|png))$`i", $title, $result_at);

// on récupère l'url de l'image

$img = ($titleContainsImgUrl_b) ? $result_at[2] : "";

// on supprime l'url du titre

$title = ($titleContainsImgUrl_b) ? $result_at[1] : $title;

// [/images dans le blogroll]



$href  = $v['link_href'];

$desc = $v['link_desc'];

$lang  = $v['link_lang'];

$xfn = $v['link_xfn'];



$link =

'<a href="'.html::escapeHTML($href).'"'.

((!$lang) ? '' : ' hreflang="'.html::escapeHTML($lang).'"').

((!$desc) ? '' : ' title="'.html::escapeHTML($desc).'"').

((!$xfn) ? '' : ' rel="'.html::escapeHTML($xfn).'"').



// [images dans le blogroll]

((!$img) ? '' : ' class="blogrollLinkImg" style="background-image: url('.html::escapeHTML($img).')"').

// [/images dans le blogroll]



'>'.



// [images dans le blogroll]

//html::escapeHTML($title).

((!$img) ? html::escapeHTML($title) : '<span>'.html::escapeHTML($title).'</span>').

// [/images dans le blogroll]



'</a>';

((!$img) ? '' : ' class="blogrollLinkImg" style="background-image: url(/chemin/de/base/vers/les/images/'.html::escapeHTML($img).')"').

On ajoute ensuite dans le fichier "style.css" du thème utilisé :

/* images des le blogroll */

a.blogrollLinkImg {

        display: block;

        width: 80px;

        height: 15px;

        background-repeat: no-repeat;

        background-position: left top;

}

a.blogrollLinkImg[hreflang]:after {

        content: "";

}

a.blogrollLinkImg span {

        position: absolute;

        left: -9999px;

        top: -9999px;

}

Vous êtes libres de modifier la CSS comme bon vous semble, cela va de soi.

Lors de l'affichage des liens dans le blogroll, si le chemin vers une image est défini, le titre du lien sera masqué (la technique pour masquer l'élément est libre, celle que je donne ici n'est qu'un exemple) et c'est l'image qui sera affichée à la place, aux dimensions définies dans la CSS. Si vos images ont des tailles différentes, définissez la taille dans le PHP.

Voilà Simon H., j'espère que cette astuce te sera utile.

Opinionz revient et ça c'est bien

Benjamin — Sun, 07 Jan 2007 15:44:00 +0100

Une nouvelle année commence et c'est l'occasion pour Opinionz de se réveiller. Après le nouvel an, il se lève tardivement et ouvre les rideaux. Il reconnait sa chambre mais il a l'impression que certaines choses ont changées. Il ne sait pas encore quoi mais quelques détails le taraudent. Le contenu de ses tiroirs n'a pas changé mais il semblerait que la commode elle, soit bien différente. Opinionz devine un changement et se demande si une mise à jour de son mobilier n'aurait pas eu lieu pendant le passage à l'an neuf.

Il a entendu parlé de Dotclear2 et il avait besoin d'un bon coup de fouet avec une fin d'année assez (très voire très très) calme comme beaucoup l'auront constaté. Il se dit qu'au vu de sa reprise latente, c'était l'occasion de tester la nouvelle mouture de cet outil qu'on lui avait installé à l'époque de son arrivée sur la toile. Seul petit hic — après le champagne du réveillon c'est normal haha — à cette mise à jour : plus rien n'est pareil, je dirais même plus que tout a changé ! D'une version à l'autre, aucune (j'abuse avec aucune, mais j'y reviendrai) rétrocompatibilité ne semble possible. Un petit temps d'apprentissage pour dompter la bête et voilà qu'Opinionz se réveille avec un blog propulsé par un moteur neuf et encore plus performant. L'année commence sur les chapeaux de roues !

Le passage à Dotclear2 était l'occasion pour Opinionz de reprendre du poil (bien utile par ce temps hivernal). La migration du contenu s'est très bien déroulée grâce au plugin flatExport qui a permis un passage tout en douceur d'une version à l'autre. Super. Oui mais le reste ? La gestion des urls est différente, la gestion des médias elle aussi a changée. Pourquoi la recherche ne donne rien ? Après moultes questions et quelques heurs passées à apprendre le nouveau langage de l'animal, on se rend compte qu'il faut "Indexer les billets" pour la recherche. On avance. La redirection des anciennes urls vers les nouvelles a été mises en place pour éviter les bonnes vieilles erreurs 404.

Bien sûr, il doit rester ça et là diverses subtilités qu'il sera bon de corriger au fur et à mesure qu'on met le doigt dessus. En attendant, Opinionz est prêt à entamer l'année avec le sourire. On ne peut pas (trop) en vouloir à toute l'équipe de Dotclear2 puisqu'ils clament bien haut que cette version n'est qu'une bêta et qu'on y passe à nos risques et périls. Depuis peu, la documentation de l'engin a même son site dédié ! Bravo et merci à tous les gens impliqués de près ou de loin dans l'aventure.

DotClear : le plugin Billets Connexes complète le plugin Tags

Benjamin — Thu, 08 Dec 2005 00:45:00 +0000

Non pas que j'oublie le plugin Nombre de Lectures, mais je l'ai mis sur pause pour un temps quand une idée fulgurante m'a traversé l'esprit. Bon d'accord, l'idée n'était pas neuve mais je n'avais jusqu'alors pas la possibilité de la réaliser. Jusqu'au jour où je tombe sur le plugin Tags (se basant lui-même sur le plugin Métadonnées de billet) qui permet d'assigner des mots-clés à chacun des billets.

Présentation

Cette idée qui me trotte dans la tête vient donc de voir le jour : il est désormais possible d'afficher une liste de billets connexes à un billet source. Super ! Oui en effet. Le principe est simple : on récupère les mots-clés du billet source et on les compare à ceux de la base de données à la recherche d'autres billets. Facile, sympa, sexy.

C'est la classe

Oui on peut le dire, c'est de la POO. Mais là n'est pas la question. Point suivant.

En pratique

Le plugin est utilisable dans le fichier post de votre template, mais aussi dans la sidebar ou dans les pages utilisant le plugin Related.

Voici trois exemples d'utilisation de la classe :

geshi php
<?php
/**
pertinence de 2 mots-clés, pas de limite, id auto et clé de tri définie
*/
$bc = new dcBilletsConnexes(2,0,0,'´post_dt´ ASC');
/**
tous les paramètres par défaut
*/
$bc->show();
?>

<?php
/**
pertinence de 1 mot-clé, 5 résultats maximum, id auto et classement par défaut
*/
$bc = new dcBilletsConnexes(1,5);
/**
personnalisation du bloc et du titre, formatage par défaut des éléments de la liste
et séparation des mots-clés avec '/'
*/
$bc->show('<div>%1$s<ul>%2$s</ul></div>',
	'<h3>Billet(s) connexe(s)</h3>','*',', ');
?>

<?php
/**
pertinence de 3 mots-clés, pas de limite de résultat, id du billet source spécifié,
classement par défaut
*/
$bc = new dcBilletsConnexes(3,0,53);
/**
bloc et titre par défaut, formatage personnalisé des éléments de la liste
et séparation des mots-clés par défaut
*/
$bc->show('*','*','<li><a href="%2$s" title="Mot(s)-clé(s) : %3$s">%1$s</a></li>');
?>

Explication

Instanciation

Lors de l'instanciation de la classe, il est possible de définir 4 paramètres :

niveau : nombre qui définit le nombre de mots-clés minimum à avoir en commun avec le billet source
limite : nombre de résultats maximum à afficher, utile si vous avez 7000 billets connexes
id : le système est malin, il récupère l'id du billet source tout seul, mais il est aussi possible de lui donner
ordre : clé de tri des résultats (pour classer les billets par date, par nom et toutes ces choses)

Ces paramètres sont tous optionnels et gardent alors leurs valeurs par défaut qui sont respectivement :

1 (un seul mot-clé à avoir en commun, augmenter pour affiner les résultats)
0 (mettre zéro pour aucune limite, sinon mettre ce que bon vous semble)
0 (par défaut, à zéro donc, l'id est récupéré de façon automatique)
'`post_dt` DESC' (le classement par défaut est par date, du plus récent ou plus vieux)

Affichage des résultats

La méthode show accepte elle-aussi 4 paramètres :

bloc : chaîne de formatage du bloc à afficher sur le blog
titre : titre du bloc (avec gestion intelligente du pluriel)
item : chaîne de formatage des éléments de la liste
séparateur : définit le séparateur des tags pour l'affichage

Ces paramètres sont aussi tous optionnels, vous pouvez voir les valeurs par défaut dans l'exemple vu plus haut.

La chaîne bloc reçoit deux valeurs : le titre du bloc et les éléments de la liste :

geshi html4strict
<div class="billets-connexes">%1$s<ul>%2$s</ul></div>

La chaîne des éléments de la liste reçoit quant à elle le titre du billet, son url et les mots-clés récupérés :

geshi html4strict
<li><a href="%2$s" title="Mot(s)-clé(s) : %3$s">%1$s</a></li>

Gestion des pluriels

Le titre du bloc et la balise title des liens dans les résultats gèrent leur pluriel de façon intelligente. En effet, si vous utilisez "Billet(s) Connexe(s)" ou 'Mot(s)-clé(s)", la classe affichera automatiquement le sigulier ou le pluriel suivant le nombre de résultats. Stupéfiant !

Pour les pluriels complexes, ça marche aussi :

"Voici (une|des) beau(x) soulier(s) pour l'oncle Henri !"

Personnalisation

Si l'envie vous prend de vouloir récupérer les résultats sans affichage, la méthode getinfo est là pour vous.

Ainsi, avec le code suivant :

geshi php
<?php
$bc = new dcBilletsConnexes(2);
$billets = $bc->getinfo();
?>

On récupère les données sous la forme d'un tableau associatif et on peut alors traiter les infos comme on veut.

L'id des billets est utilisé comme index, le titre, l'url et les tags sont donc utilisables comme ceci :

geshi php
<?php
/**
suite du code vu juste avant donc
*/
foreach ($billets as $id => $billet)
{
	echo '<p><a href="'.$billet['url'].'" title="'.$billet['tags'].'">'.$billet['titre'].'</a></p>';
}
?>

Installation

Pour l'installateur et l'archive, direction le grenier