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

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.