Concevoir des templates évolutifs

Piwigo utilise un système de templates pour générer des pages web. Un template est un morceau de code HTML dans lequel seuls quelques éléments d’information seront modifiés d’une utilisation à l’autre. Un template simplifie la plupart des adaptations.
Par contre, ce système pourrait vous priver d’une partie des évolutions de Piwigo. Si vous adaptez une partie d’une page web, et si celle-ci a besoin d’être complétée ou transformée par l’équipe de conception, alors votre adaptation pourrait masquer les nouveautés.

En comparaison, une application comme WordPress sans template vous privera des évolutions de thème, ou les évolutions effaceront toutes vos adaptations. En général les applications, qui n’utilisent pas de templates, auront beaucoup de thèmes mais ceux-ci resteront sans évolution.

Assurément, il n’y aurait pas de solution idéale.
Nous allons voir pour Piwigo comment coder un template évolutif dans un thème personnel.
Ci-dessous vous trouverez un exemple d’un header.tpl évolutif…

  {include file='hello.inc.tpl' assign=BANNER}
  {assign var=HOME_BANNER value=$PAGE_BANNER|cat:$BANNER}
  {include file='topbar.inc.tpl' assign=TOPBAR}
  {include file="../../default/template/header.tpl" theSwiftHeader=$TOPBAR PAGE_BANNER=$HOME_BANNER}
                   {* le path doit être relatif depuis themes/xxxx/template/ *}
  {html_head}
    <style type="text/css" src="{$ROOT_URL}themes/{$themeconf.id}/css/extension.css"}">
  {/html_head}


Explications du code ci-dessus :

{include file=’hello.inc.tpl’ assign=BANNER}
Le code html contenu dans votre thème ./template/hello.inc.tpl sera affecté à la variable BANNER (Un logo par exemple).

{assign var=HOME_BANNER value=$PAGE_BANNER|cat:$BANNER}
La variable HOME_BANNER va recevoir la concaténation (cat) de la bannière standard ($PAGE_BANNER) avec celle produite par hello.inc.tpl

{include file=’topbar.inc.tpl’ assign=TOPBAR}
Là encore, du code html contenu dans votre thème ./template/topbar.inc.tpl sera affecté à la variable TOPBAR (Des liens du site vers votre forum, votre blog, etc).

{include file= »../../default/template/header.tpl » theSwiftHeader=$TOPBAR PAGE_BANNER=$HOME_BANNER}

C’est là l’essentiel, au lieu de copier le header standard, le thème va l’inclure et ainsi profiter de ses évolutions.
Mais également la variable theSwiftHeader va prendre la valeur de TOPBAR (nos liens)
et la variable PAGE_BANNER prendra la valeur de HOME_BANNER (notre bannière avec son logo).
En incluant le header standard, le thème continuera à bénéficier des évolutions du header standard, tout en pouvant être différent.

C’est assez simple, mais surtout cela fonctionne bien.

Une seule réserve: lors de l’include du template d’origine faites attention à décrire le chemin relatif à partir de themes/xxxx/template/

{html_head}
<style type= »text/css » src= »{$ROOT_URL}themes/{$themeconf.id}/css/extension.css »} »>
{/html_head}
Ajout d’un style complémentaire ou plus avant la balise </head> (Cf. Javascript interprété inutilement)

Remarque: Cette astuce n’est qu’une application des fonctionnalités de Smarty (le moteur de templates utilisé par Piwigo)

.

7 thoughts on “Concevoir des templates évolutifs

  1. Bonjour Vincent,
    Comment effectuer un remplacement de caractère, toujours sur le même modèle.

    Ex je voudrais remplacer :

    {$comment.CONTENT}

    Par :

    {$comment.CONTENT}

    Merci 🙂

    1. Bonjour Vincent,

      J’ai finalement changer ma façon de faire et j’ai opté pour les pré-filtres. Ça demande un peu d’entrainement avec les expressions régulières mais je viens de réaliser mon thème avec zéro template !
      Je trouve que c’est plus facile à maintenir un gros fichier plutôt que 36 petits.
      En plus, avec la fonction replace, je sais quelle chaîne je prends au départ pour la remplacer. Il est donc facile de retrouver l base des modifications et effectuer de tâches de maintenance.

      Du coup ce n’est pas vraiment ta solution mais c’est grâce à toi que je viens de m’affranchir des templates de mon thème !
      Il me sera plus facile d’expliquer comme procéder afin d’aider à se passer des T-E 😉

      Merci Vincent.

      1. Je n’ai toujours pas compris ton besoin d’origine mais l’usage des pré-filtres ne correspond pas au besoin expliqué dans mon article. C’est, je présume, un cas plus général réservé à un public d’initiés.

        Merci Julien.

        1. J’ai trouvé assez simple l’emploi des pré-filtres. Dans mon cas je ne fait que des remplacements de chaînes, rien de bien sorcier 🙂

          Je peaufine mon thème et tu pourras voir ce que ça donne.

Comments are closed.