Dotclear 2 : des images à la place des liens dans le blogrollL'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.

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 :note:

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>';


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="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.