20 août 2010 Une bannière intelligente
Catégorie : Présentation  | Tags : ,

Avec l’aide de VDigital, j’ai réussi à paramétrer ma bannière de manière un peu futée, de manière à ce qu’elle soit cliquable et affiche l’infobulle de mon choix, comme ceci :

… sans pour autant que j’ai à renseigner autre chose qu’un simple titre dans les paramètres de ma galerie :

En standard, Piwigo ne vous affichera que le contenu « brut » du champ Bannière des pages, sous forme de texte et sans lien.

Voyons comment améliorer les choses avec un simple template-extension.

Avec le plugin LocalFiles Editor, commencez par créer un nouveau fichier template :

Son nom et son emplacement importent peu, à condition qu’il soit dans /template-extension ou l’un de ses sous-répertoires ; moi, j’ai choisi de l’appeler header.tpl pour me rappeler qu’il va modifier le template standard du même nom, et l’ai mis dans le sous-répertoire /template-extension/yoga/local. Choisissez de le créer à partir d’une page vierge …

…puis copiez dedans le code suivant1 :

{* sauvegarde de PAGE_BANNER standard *}
{assign var=TEXT_BANNER value=$PAGE_BANNER}

{* affectation du nouveau contenu de la bannière *}
{capture assign=PAGE_BANNER}<h1><a href="{$U_HOME}" title="{$PAGE_BANNER}">{$PAGE_BANNER}</a></h1>{/capture}

{* exécution du template standard *}
{include file="../../default/template/header.tpl"}

Analysons un peu :

  • {assign var=TEXT_BANNER value=$PAGE_BANNER} : en standard,  la variable PAGE_BANNER contient ce que vous avez renseigné dans le champ Bannière des pages de l’écran Configuration -> Options ; nous copions (sauvegardons) cette valeur dans une autre variable, que nous appelons TEXT_BANNER
  • construction d’un nouveau contenu pour la variable PAGE_BANNER :
    1. {capture assign=PAGE_BANNER} ... {/capture} : cette commande permet de stocker dans la variable PAGE_BANNER tout ce qui se trouve entre les balises, au lieu de l’afficher directement à l’écran
    2. <h1> ... </h1> : ces balises HTML définissent comme titre de niveau 1 tout ce qui se trouve entre elles
    3. <a ...>...</a> : balises HTML de définition d’un lien hypertexte, dont le contenu textuel se trouve entre <a ...> et </a>2.
    4. href="..." : contient le lien hypertexte cliquable
    5. title="...": contient le titre qui s’affiche en infobulle au survol du lien avec la souris,
    6. {$U_HOME} : affiche la variable U_HOME, qui contient l’URL de la page d’accueil de la galerie
    7. {$PAGE_BANNER} : affiche la variable PAGE_BANNER, qui correspond au champ Bannière des pages
  • {include file="../../default/template/header.tpl"} : appel du ficher template header.tpl, qui va s’exécuter tout à fait normalement avec le nouveau contenu de PAGE_BANNER que nous avons constitué

N’oubliez pas d’enregistrer votre fichier template-extension, qu’il faut ensuite aller déclarer par Configuration -> Templates (modèles) afin qu’il soit exécuté à la place du template standard  :

Sur la ligne correspondant au fichier que vous venez de créer :

  • sélectionnez header.tpl dans la colonne Templates d’origine,
  • ne mettez rien dans la colonne Paramètre facultatif de l’URL3.
  • dans la dernière colonne, Thème rattaché, vous pouvez soit choisir l’un des thèmes installés sur votre galerie, ou ne rien sélectionner si vous souhaitez que la modification soit appliquée quel que soit le thème utilisé.

C’est fini : en l’état, un lien cliquable vers la page d’accueil doit désormais figurer sur toutes les pages de votre galerie. Vous avez tout le loisir de modifier sa présentation comme vous le souhaitez, notamment si préférez afficher une de vos belles photos à la place du lien textuel.

  1. Les fichiers templates sont codés en langage Smarty, qui est le moteur de template de Piwigo. []
  2. Dans mon exemple, ce texte ne sera pas affiché, car la feuille de style lui substituera l’affichage d’une image de fond. Voir exemple dans cet article. []
  3. Nous voulons en effet que la modification soit effective sur toutes les pages. []
Vous pouvez suivre les commentaires sur cet article grâce à son flux RSS 2.0. Les commentaires et les pings sont fermés. // ajout MNA pour les posts liés //
Articles liés

2 réactions

  1. 1
    VDigital 

    « Avec l’aide de VDigital, j’ai réussi à paramétrer », je dirai plutôt avec l’aide de Smarty.
    L’astuce que tu présentes permet de disposer d’un titre (texte incorporé dans l’image en arrière-plan) et de l’info-bulle avec un slogan différent.
    Comme tu utilises le même dans ton billet, le visiteur a du mal à percevoir l’intérêt.
    Nous devons retenir que la mise en forme de la bannière proposée par Piwigo n’est pas indispensable et n’est là que pour l’exemple. Un exemple qui au fil du temps est devenu une habitude qu’on retrouve sur presque tous les sites.

  2. 2
    tosca 

    A l’aide de Smarty … mais avec ton aide :)

    Pour le contenu de l’infobulle, tu fais bien de soulever la question, que je me suis d’ailleurs posée aussi en préparant le billet ; mais mon objectif est de montrer des exemples réels de mise oeuvre, pas des cas d’école dont des webmasters peu aguerris ne saisiraient peut-être pas toutes les subtilités. Je répondrai aux éventuelles questions, et ça me donnera aussi l’occasion de faire un autre billet sur les manières d’ajouter du texte dans une bannière par opposition à ce qui apparaît dans l’infobulle.

    Et d’ailleurs, n’as-tu pas lu un peu vite ? Il me semble que le contenu de l’infobulle n’est pas exactement celui de la photo … :p