eZ publish: le template pagelayout.tpl / Pour débuter / eZ Publish / Luxpopuli

Faire un don

Luxpopuli / eZ Publish / Pour débuter / eZ publish: le template pagelayout.tpl

eZ publish: le template pagelayout.tpl

Date de publication: le jeudi 3 mai 2007 à 18h45
Dernière modification: par Pascal BOYER le samedi 25 avril 2009 à 12h04
« Article précédent: eZ publish: le fichier site.ini.append.php
» Article suivant: eZ Publish : créer une surcharge de template

Quelle que soit la page affichée de notre site, c'est toujours le contenu du template pagelayout.tpl (ou de l'une de ses surcharges) qui est affiché. En cela il est le plus important template d'un système eZ publish et mérite toute notre attention.

L'adolescent ignore les futures transformations de ce visage qu'il voit dans l'eau: indéchiffrable à première vue, comme une pierre sacrée couverte d'incisions et de signes, le masque du vieillard est l'histoire de ces traits informes qui apparurent confusément un jour, au grand étonnement du regard qui les révélait.

Octavio Paz

Il est vraiment recommandé de lire la traduction de la documentation officielle pour se faire une idée de l'importance de ce template et de la somme des informations qu'il condense.

Dans cet article, je présente les parties qui constituent ce template tel qu'il est mis à notre disposition à la fin de l' installation d'une version 3.9.1 de eZ publish . Mon but est, comme toujours, de permettre aux personnes qui découvrent eZ publish, de comprendre plus rapidement le fonctionnement de leur nouveau système en tâchant de mettre en évidence les articulations des différentes parties qui le composent.

Je n'ai pas encore pris le temps de regarder le fonctionnement du nouveau type website. Aussi, pour éviter toute déconvenue, je précise que je considère que le type plain est installé (comme indiqué dans l' installation d'une version 3.9.1 de eZ publish ).

Par défaut

A la fin de l'installation de eZ publish, si nous activons, grâce à l'outil de débugage, l' affichage des noms des templates utilisés par le système, nous voyons que le template pagelayout utilisé par défaut est:

design/base/templates/pagelayout.tpl

C'est donc le contenu de ce template que nous allons examiner de plus près.

Pré-requis

Les variables accessibles

En lisant la doc sur le template pagelayout.tpl mentionnée ci-dessus, nous apprenons qu'il permet d'accéder au contenu des variables suivantes:

$access_type ( array)
$anonymous_user_id ( integer)
$current_user (object)
$ezinfo ( array)
$module_result ( array)
$navigation_part ( array)
$requested_uri_string ( string)
$site ( array)
$ui_component ( string)
$ui_context ( string)
$uri_string ( string)
$warning_list ( array)

Les types de variables

Ces variables sont:

soit de type array, c'est à dire de type tableau et auquel cas elles contiennent plusieurs valeurs,
soit de type string, c'est à dire de type chaîne de caractères et auquel cas la valeur unique de la variable est du texte,
soit de type integer, c'est à dire de type entier et auquel cas la valeur unique de la variable est un nombre,
soit de type object, c'est à dire de type objet et auquel cas elles contiennent plusieurs valeurs.

Accéder aux valeurs des attributs des variables de type array ou object

Suivant le type de la variable, la façon d'accéder à son contenu diffère.

Les variables de type object et array contiennent une liste plus ou moins longue d'attributs qui eux-mêmes ont une valeur. C'est aux valeurs de ces attributs que l'on cherche à accéder. La plupart du temps, ce sera pour afficher la valeur en question. Cependant, cela peut aussi être pour créer une condition dans l'exécution d'une boucle.

Avant même d'accéder à une des valeurs disponibles, encore faut-il connaître la liste de ces valeurs. Pour cela, nous disposons d'une syntaxe aussi simple qu'exhaustive et que nous pouvons placer à peu près n'importe où dans le template:

{$nom_de_la_variable|attribute(show)}

:
Nous éviterons tout de même de la placer entre les balises {cache-block keys=xxxxx } et {/cache-block}

Cette syntaxe produit l'affichage de tous les attributs (et de leur valeur) contenus dans la variable. La figure ci-dessous illustre la sortie produite par l'affichage du contenu du tableau $site:

Fig. 1: Liste des valeurs contenues par la variable $site qui est de type array

En clair, pour obtenir l'affichage sur le site public du tableau présenté par la figure 1, nous écrivons quelque part dans le template design/base/templates/ pagelayout.tpl la ligne suivante:

{$site|attribute(show)}

puis nous rechargeons n'importe quelle page du site pour que s'affiche le tableau.

:
Cette syntaxe ne produit un tel affichage que si la variable est de type array ou object. Dans tous les autres cas, c'est à dire pour les variables de type integer ou string, la sortie ressemblera, comme le montre la figure 2, à un tableau vide:

Fig. 2: Affichage produit avec une variable de type integer ou string

Retenons que le tableau affiché est composé de trois colonnes:

Attribute dans laquelle on trouve les noms des attributs présents dans la variable,
Type qui nous indique le type des attributs,
Value qui indique la valeur de l'attribut. C'est cette valeur que l'on cherche à atteindre/récupérer.

Extraire une valeur

La démarche est un peu plus complexe que ce que nous avons vu jusqu'à présent. Cependant, comme elle est toujours la même, une fois acquise, elle devient vite un automatisme.

Quelle que soit la valeur à laquelle on souhaite accéder, la syntaxe utilisée commence toujours par préciser le nom de la variable. Donc, la syntaxe commence toujours par:

{$nom_de_la_variable.

une accolade: {
un dollar: $
le nom de la variable
un point: .

Pour plus de clarté, nous allons prendre pour exemple la variable $site. La syntaxe commencera donc par:

{$site.

Ensuite, tout dépend de la valeur que l'on souhaite atteindre. Et c'est là que le tableau de la figure 1 est d'une aide précieuse.

:
Nous ne disposons d'aucun autre moyen que ces tableaux pour savoir exactement quels attributs sont contenus par ces variable.

Lorsqu'on regarde les trois premières lignes du tableau, on voit qu'au troisième attribut ( http_equiv) est associé le type array et surtout la valeur array(2). Par contre les deux premiers attributs title et design sont de type string et ont pour valeur respectives:

Lux Populi
plain_site

Le fait que l'attribut http_equiv soit de type array indique que cet attribut est un tableau contenant à son tour d'autres attributs. On est donc en présence d'un tableau ( http_equiv) contenu dans un tableau ( $site). Une imbrication de tableaux, en somme.

Par ailleurs, la valeur array(2) de cet attribut nous enseigne qu'il contient 2 autres attributs. Ces deux attributs sont ceux présentés par les deux lignes suivantes:

>Content-Type
>Content-language

Plus bas dans le tableau, l'attribut meta est aussi de type array mais sa valeur est array(4). Et on constate que cette fois-ci l'attribut meta est suivi de 4 lignes commençant par le symbole supérieur à (">").

Ces 4 lignes présentent les 4 attributs du tableau meta lui aussi contenu dans le tableau principal $site.

Pour afficher les valeurs des deux premiers attributs du tableau $site on va compléter ainsi la syntaxe:

{$site.title}

{$site.design}

Il en va de même, bien sûr, pour les deux derniers attributs version et page_title.

Par contre, pour accéder aux valeurs des attributs des deux tableaux http_equiv et meta, on doit commencer par indiquer le nom du tableau. Par exemple:

{$site.meta.

Et ensuite seulement le nom de l'attribut dont on souhaite afficher la valeur. Par exemple:

{$site.meta.author}

Voilà. La syntaxe ci-dessus placée dans le template pagelayout.tpl affichera sur toutes les pages de notre site: eZ systems

:
Les attributs de type booléens ne contiennent pas de valeur qui puisse être affichée.

Accéder aux valeurs des variables de type integer ou string

Pour les variables de type string ou integer on accède directement à l'unique valeur qu'elles contiennent avec la simple syntaxe suivante:

{$nom_de_la_variable}

Contenu du template

Nous allons maintenant passer en revue toutes les parties constituant l'intégralité du template pagelayout.tpl en suivant l'ordre dans lequel elles apparaissent dans le template. Pour plus de clareté j'ai volontairement reporté les numéros des lignes.

Type du document

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$site.http_equiv.Content-language|wash}"
               lang="{$site.http_equiv.Content-language|wash}">
4

Lignes 1 et 2: déclaration du type de document

Ligne 3: écrit cette ligne:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR" lang="fr-FR">

Le code de la ligne 3 est un très bon exemple d'extraction de valeur dans une variable de type array.
Ce code illustre aussi le fait qu'il est possible de mélanger du code XHTML et du code spécifique à eZ publish.

A propos de code HTML, on notera au passage l'emploi de l'opérateur de template wash dont la fonction est de nettoyer le texte passé en paramètre.

Les feuilles de styles

5 <head>
6
7 <style type="text/css">
8     @import url({"stylesheets/core.css"|ezdesign});
9 {*    @import url({ezini('StylesheetSettings','MainCSS','design.ini')|ezdesign}); *}
10     @import url({"stylesheets/site.css"|ezdesign});
11 {*    @import url({"stylesheets/t1/site-colors.css"|ezdesign});   todo -> read from design settings *}
12     @import url({ezini('StylesheetSettings','SiteCSS','design.ini')|ezroot});
13     @import url({"stylesheets/classes.css"|ezdesign});
14  {*    @import url({"stylesheets/t1/classes-colors.css"|ezdesign}); todo -> read from design settings  *}
15     @import url({ezini('StylesheetSettings','ClassesCSS','design.ini')|ezroot});
16     @import url({"stylesheets/debug.css"|ezdesign});
17     {section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
18         @import url({concat( 'stylesheets/', $css_file )|ezdesign});
19     {/section}
20 </style>
21

Ligne 5: balise d'ouverture de la section <head> (en-tête) de la page HTML affichée.

Ligne 7: balise d'ouverture de la section dédiée à l'importation des feuilles de style CSS.

Lignes 8 à 19: ces lignes ont pour fonction d'importer les feuilles de style CSS .

On remarque qu'il y a plusieurs syntaxes:

8       @import url({"stylesheets/core.css"|ezdesign});

ou bien:

12     @import url({ezini('StylesheetSettings','SiteCSS','design.ini')|ezroot});

ou encore:

17     {section var=css_file loop=ezini( 'StylesheetSettings', 'CSSFileList', 'design.ini' )}
18         @import url({concat( 'stylesheets/', $css_file )|ezdesign});
19     {/section}

et enfin:

9 {*    @import url({ezini('StylesheetSettings','MainCSS','design.ini')|ezdesign}); *}

Ligne 9: la syntaxe de cette ligne, très proche de celle de la ligne 12, est un exemple de commentaire dans le langage eZ publish.

Toutes ces syntaxes reposent sur la directive @import dont la forme générale est:

@import url(xxxxx);

:
Il est obligatoire d'utiliser cette directive entre les balises <style type="text/css"> et </style>

Ligne 8: cette synatxe ne pose guère de difficulté une fois que l'on connaît le rôle de l'opérateur de template ezdesign .

Ligne 12: plus complexe, cette syntaxe utilise deux opérateurs de template:
- ezroot
- ezini

Comme ne l'indique pas la doc sur ezini , cet opérateur va rechercher dans le fichier de surcharge design.ini.append.php puis, s'il ne trouve pas le fichier de surcharge, dans le fichier par défaut design.ini, la valeur du paramètre (on parle aussi de directive) SiteCSS dans la section StylesheetSettings.

Le code source produit par la ligne 12 est:

@import url("/stylesheets/t02/site-colors.css");

Ce code est inopérant puisqu'il n'existe aucun répertoire stylesheets/ à la racine du répertoire d'installation de eZ publish.

:
La fonction de l'opérateur ezini est à retenir car il permet de récupérer, dans un fichier passé en paramètre, n'importe quelle valeur d'une directive d'une section donnée.

Lignes 17 à 19: cette syntaxe est intéressante car, bien qu' obsolète , nous la rencontrerons dans de nombreux templates. Cette syntaxe est celle d'une boucle et est équivalence à une boucle construite autour de la structure de contrôle foreach .

La syntaxe de la ligne 17 indique au système:

Pour chacune des valeurs du paramètre CSSFileList de la section StylesheetSettins du fichier de surcharge design.ini.append.php (ou du fichier par défaut design.ini) on définit la variable css_file. En clair, la variable css_file va prendre à tour de rôle chacune des valeurs du paramètre CSSFileList.

Ligne 18: assemble, grâce à l'opérateur de template concat , la chaîne de caractères stylesheets/ et la valeur de la variable $css_file. Puis la chaîne de caractère ainsi obtenue est préfixée, grâce à l'opérateur ezdesign , par le chemin du répertoire du design courant.

Ligne 19: ferme la boucle.

Le fichier de surcharge design.ini.append.php existe par défaut. Mais il est vide. Donc cette boucle ne renvoie strictement aucun code.

Supposons maintenant que ce fichier de surcharge contienne ceci:

[StylesheetSettings]
CSSFileList[]
CSSFileList[]=pascal/fichier_css_1.css
CSSFileList[]=pascal/fichier_css_2.css
CSSFileList[]=pascal/fichier_css_3.css

Si on recharge la page d'accueil du site, on pourrait obtenir le code source suivant:

@import url("/design/plain_site/stylesheets/pascal/fichier_css_1.css");
@import url("/design/base/stylesheets/pascal/fichier_css_2.css");
@import url("stylesheets/pascal/fichier_css_3.css");

La dernière ligne, différente des deux premières, nous indique que le système n'a pas trouvé le fichier fichier_css_3.css sensé être situé dans le répertoire /stylesheets/pascal/ d'un des designs du système. En conséquence de quoi, l'opérateur ezdesign ne préfixe pas la chaîne de caractères stylesheets/pascal/fichier_css_3.css

:
Les deux premières lignes nous rappellent que l'opérateur ezdesign recherche d'abord les feuilles de style dans le désign courant ( plain_site) puis dans le design de repli et enfin dans le design standard.

Pour être complet, il est important de noter que la syntaxe suivante:

<link rel="stylesheet" href="/css/jd.slideshow.css" type="text/css" media="screen" />

...peut bien sûr également être employée (cette fois-ci en dehors des balises <style type="text/css"> et </style>) pour charger une feuille de style.

Les javascripts

22 {section name=JavaScript loop=ezini( 'JavaScriptSettings', 'JavaScriptList', 'design.ini' ) }
23     <script language="JavaScript" type="text/javascript" src={concat( 'javascript/',$:item )|ezdesign}></script>
24 {/section}
25

Ici on retrouve la syntaxe d'une boucle qui va permettre d'importer l'ensemble des fichiers javascript définis par le paramètre JavaScriptList de la section JavaScriptSettings du fichier de surcharge design.ini.append.php (ou du fichier par défaut design.ini).

A la différence de la première boucle étudiée précédemment, celle-ci utilise l'espace de nom (le paramètre name) et non le paramètre var. Chacune des valeurs successives du paramètre JavaScriptList sera alors extraite par la syntaxe $:item où $ vaut la chaîne de caractère JavaScriptList et item la valeur du paramètre JavaScriptList actuellement traitée par la boucle.

:
Les deux exemples de boucle que l'on vient de rencontrer montrent qu'il faut indiquer (lignes 17 et 22) uniquement les noms des fichiers de configuration par défaut. Le système recherchera automatiquement et en premier lieu les valeurs du paramètre indiqué dans les fichiers de surcharge puis se rabattra sur les fichiers par défaut.

Hack IE 5.5 - Inclusion conditionnelle

26 {literal}
27 <!--[if lt IE 6.0]>
28 <style>
29 div#maincontent-design { width: 100%; } /* This is needed to avoid width bug in IE 5.5 */
30 </style>
31 <![endif]-->
32 {/literal}
33

Lignes 26 et 32: indiquent au système, grâce à la fonction de template literal , que tout ce qui se trouve entre ces deux balises doit être lu et traité exactement comme cela est écrit.

Lignes 27 à 31: correspondent à un hack (une astuce) conditionnel dédié aux navigateurs IE dont la version est inférieure à 6.0

La sélection de la version du navigateur repose sur une astuce de syntaxe présente dans la ligne 27 et à laquelle seuls les navigateurs IE sont sensibles.

En effet, la chaîne de caractères:

<!--

signifie en HTML le début d'un commentaire. Et la chaîne de caractères:

-->

signifie la fin de ce commentaire.

Donc, tous les navigateurs vont ignorer tout ce qui se trouve entre ces deux chaînes de caractères. Tous, sauf les navigateurs IE car, eux, attendent un espace juste après . Or là, comme on peut le voir, <!-- est immédiatement suivi par du code que seuls les navigateurs IE vont prendre en compte.

Ligne 27: ce code est une condition: si tu est inférieur à IE 6.0 (tu = toi, le navigateur du visiteur) alors ce qui suit te concerne.
Ligne 28: balise d'ouverture indiquant au navigateur que les lignes qui suivent sont des règles CSS.
Ligne 29: définition de la règle CSS suivie d'un commentaire (/* xxxx */)
Ligne 30: fin de la zone réservée à la définition des règles CSS.C'est grâce aux balises <style> et </style> qu'il est possible de définir des règles CSS directement dans l'en-tête d'une page HTML.
Ligne 30: balise de fermeture de la structure if et fermeture du commentaire.

Inclusion de template

34 {include uri="design:page_head.tpl"}
35
36 </head>
37 <body>
38

Ligne 34: syntaxe permettant d'appeler ou d'inclure un template.

Pour cela on utilise la fonction de template include puis on indique le chemin relatif du template ( page_head.tpl) ainsi que "l'espace" ( design) dans lequel il se trouve (ici c'est dans un des designs du système). Le chemin relatif du template inclus est implicitement exprimé par rapport au répertoire templates d'un design, ce qui signifie qu'en toutes circonstances le template inclus doit se situé dans un sous-répertoire du répertoire templates/ d'un design.

L'outil de debugage nous indique que, par défaut, le template inclus est:

design/standard/templates/page_head.tpl

Le logo du site

39 <div id="allcontent">
40
41 {cache-block keys=$uri_string}
42     <div id="topcontent">
43
44         {let pagedesign=fetch_alias(by_identifier,hash(attr_id,sitestyle_identifier))}
45         <div id="header">
46             <div id="header-design">
47                 {*<img src={"/images/t1/t1-logo-placeholder.gif"|ezdesign} height="70" width="211" alt="Company logo" />*}
48                 {section show=$pagedesign.data_map.image.content.is_valid|not()}
49                     <h1><a href={"/"|ezurl}>{ezini('SiteSettings','SiteName')}</a></h1>
50                 {section-else}
51                     <a href={"/"|ezurl}><img src={$pagedesign.data_map.image.content[logo].full_path|ezroot}
                          alt="{$pagedesign.data_map.image.content[logo].text}" /></a>
52                 {/section}
53             </div>{* id="header-design" *}
54         </div>{* id="header" *}
55         {/let}
56
57 {/cache-block}
58

Ligne 39: tout les contenus de notre site seront inclus dans le div allcontent défini dans la feuille de style design/base/stylesheets/site.css

Ligne 41 et 57: balise d'ouverture et de fermeture d'un block de cache en langage spécifique eZ publish. Il est important de lire la documentation sur la fonction de template cache-block . En résumé, tout ce qui est compris entre ces balises sera mis en cache est réutilisé par le système plutôt que d'être systématiquement "calculé" chaque fois que le contenu du template pagelayout.tpl sera affiché.

Bien sûr, ce qui est placé dans un bloc de cache correspond le plus souvent à des informations qui ne varient que peu ou pas. Dans l'exemple ci-dessus, le code compris entre ces deux balise a pour fonction d'afficher le logo du site, ce dernier étant un élément, dans les pages d'un site, dont le contenu évolue peu dans le temps.

Ligne 44: La fonction de template let , qui est une syntaxe obsolète remplacée par la fonction def , sert à définir une variable. En l'occurrence, la variable pagedesign est ici définie à partir d'une fonction fetch_alias elle-même prédéfinie dans le fichier fetchalias.ini (ou dans l'une de ses surcharges).

L'alias de la fonction fetch utilisée se nomme by_identifier. Dans le fichier fetchalias.ini on apprend que cette fonction by_identifier utilise la fonction de recherche object_by_attribute qui est une fonction dépréciée. Malheureusement, la documentation officielle de eZ publish n'indique pas par quelle autre fonction elle a été remplacée.
Le contenu du fichier fetchalias.ini nous apprend également (voir la dernière ligne ci-dessous) que le nom du paramètre à utiliser dans la syntaxe hash('paramètre',xxx) (de la ligne 44) est attr_id et que attr_id remplace en fait le vrai nom du paramètre qui est: identifier:

[by_identifier]
Module=content
FunctionName=object_by_attribute
Parameter[identifier]=attr_id

hash étant un opérateur de template qui retourne un tableau de valeurs, la ligne 44 de pagelayout.tpl doit donc être comprise ainsi:
définissons la variable pagedesign de type tableau ( array) comme étant une variable contenant l'ensemble des informations d'un objet qui a un attribut auquel on a donné la valeur sitestyle_identifier.

Pour afficher sur le site public l'ensemble des attributs de cette variable, il nous suffit d'utiliser dans pagelayout.tpl la syntaxe vue en début d'article:

{$pagedesign|attribute(show)}

Par défaut, il existe effectivement un objet dont un des attributs a pour valeur sitestyle_identifier. Cet objet est accessible à partir de l'onglet Design de l'interface d'administration. Cliquer ensuite sur le bouton Assigner du cadre Gestion des menus en ayant préalablement pris soin de sélectionner le siteaccess public:

Fig. 3: Le cadre Gestion des menus de l'onglet Design de l'interface d'administration permet de sélectionner le siteaccess

Ensuite, en cliquant sur le lien Apparence dans le menu gauche, on obtient ceci:

Fig. 4: L'interface d'édition de l'objet Lux Populi et son attribut id dont la valeur est sitestyle_identifier

Cet objet est créé lors de la phase d'installation de eZ publish et est une instance de la classe d'objet Template look. Cette classe d'objet est accessible à partir de l'onglet Administrateur puis en cliquant sur le lien Classes dans le menu gauche puis sur le lien Setup dans le cadre Groupes de classes.

Ligne 45 et 46: les règles CSS header et header-design sont toutes deux définies dans la feuille de style design/base/stylesheets/site.css

Ligne 47: c'est un commentaire puisqu'elle commence par {* et finit par *}

Ligne 48 à 52: il s'agit ici d'une structure équivalente à un if/else (rappel: l'emploi de section est obsolète). La ligne 48 contient donc la condition qui doit être remplie pour que la ligne 49 s'affiche. Si la condition n'est pas remplie alors ce sera la ligne 51 qui sera affichée.

La ligne 48 demande au système de regarder s'il y a ( is_valid ) un contenu ( content) dans l'attribut image de l'objet traité, c'est à dire Lux Populi. S'il y a bien une image dans l'attribut image, alors le système renvoie une valeur 1 (true) et normalement la ligne 49 devrait être exécutée. Mais la ligne 48 se termine avec l'opérateur de template not() qui a pour fonction d'inverser la valeur renvoyée par le système. Donc au final, s'il y a un contenu dans l'attribut image, alors le système renvoie FALSE (FAUX). Et donc, on n'affiche pas la ligne 49.

En clair, is_valid|not() est la syntaxe permettant d'obtenir le même résultat que si on disposait d'une fonction is_not_valid.

Ligne 49: elle est donc affichée si l'attribut image ne contient aucune image.

L'opérateur de template ezini va rechercher la valeur du paramètre SiteName de la section SiteSettings dans le fichier de surcharge site.ini.append.php (c'est ce fichier qui est recherché par défaut lorsqu'il n'y en a pas de spécifié).

La syntaxe {"/"| ezurl } permet de définir l'URI qui renvoie à la racine du site.

On obtient ainsi un logo constitué du nom du site tout en étant un lien vers la racine du site.

Ligne 51: cette ligne est affichée dans tous les cas où la ligne 49 ne l'est pas.

La finalité de cette ligne est d'afficher en lieu et place du nom du site, une image qui fera office de logo du site. Bien sûr, et comme on peut le remarquer, on retrouve l'usage de l'opérateur de template ezurl qui fera de l'image un lien vers la racine du site.

Dans la syntaxe:

{$pagedesign.data_map.image.content[logo].full_path|ezroot}

on voit que l'attribut content doit recevoir un paramètre indiquant la taille de l'image que l'on souhaite. Les valeurs possibles de ce paramètre sont définis dans le fichier de configuration image.ini (ou dans l'une de ses surcharges) par le paramètre suivant:

[AliasSettings]
AliasList[]
AliasList[]=reference
AliasList[]=small
AliasList[]=medium
AliasList[]=large
AliasList[]=rss

Plus bas dans le fichier, et toujours dans la même rubrique, on voit que chaque alias de taille est défini:

[reference]
Filters[]
Filters[]=geometry/scaledownonly=600;600
 
[small]
Reference=reference
Filters[]=geometry/scaledownonly=100;100
 
[medium]
Reference=reference
Filters[]=geometry/scaledownonly=200;200
 
[large]
Reference=reference
Filters[]=geometry/scaledownonly=300;300
 
[rss]
Reference=reference
Filters[]=geometry/scale=88;31

Surtout, on remarque que par défaut, la taille logo n'existe pas. Donc la ligne 51 ne pourra jamais renvoyer d'image tant que cet alias de taille ne sera pas défini.

On pourrait le faire en créant le fichier de surcharge:

settings/siteaccess/site_public/image.ini.append.php

et en y plaçant ceci:

<?php /* #?ini charset="iso-8859-1"?
 
[AliasSettings]
AliasList[]=logo
 
 
[logo]
Reference=reference
Filters[]=geometry/scaledownonly=480;540
 
*/ ?>

Puis en vidant les caches pour que le contenu de ce nouveau fichier de surcharge soit pris en compte par le système.

La deuxième solution, pour que la ligne 51 affiche effectivement l'image devant servir de logo, consiste à modifier la ligne 51 en remplaçant le paramètre logo par un alias déjà défini dans le fichier image.ini

Ligne 51: full_path permet d'obtenir le chemin complet vers l'image: /var/plain_site/storage/images/design/lux_populi/172-4-fre-FR/lux_populi_reference.jpg et l'opérateur de template ezroot
de supprimer index.php et le nom du siteaccess de ce chemin vers l'emplacement de l'image.

Enfin, dans la syntaxe:

alt="{$pagedesign.data_map.image.content[logo].text}"

text permet de récupérer le texte alternatif de l'image que l'on a éventuellement indiqué dans le champ Texte alternatif de l'image lorsqu'on a uploadé l'image.

Les toolbars supérieurs

59     {section show=ezini('Toolbar_top','Tool','toolbar.ini')|count}
60         <div id="toolbar-top">
61             <div class="toolbar-design">
62                 {tool_bar name=top view=line}
63             </div>{* id="toolbar-design" *}
64              <div class="break"></div>
65         </div>{* id="toolbar-top" *}
66     {/section}
67

Ligne 59: elle compte ( count ) le nombre de valeurs comprises dans le tableau Tool de la section Toolbar_top du fichier toolbar.ini.
- Si la valeur de count est strictement positive, c'est à dire s'il y a des outils qui ont été définis comme devant s'afficher dans la partie supérieurs de la page, alors la ligne 62 sera exécutée.
- Si la valeur de count est nulle, alors tout le bloc allant de la ligne 59 à la ligne 66 ne sera pas pris en compte par le système.

Ligne 62: la fonction de visualisation tool_bar recherche dans le fichier toolbar.ini (ou dans l'une de ses surcharges) la liste des outils qui sont programmés (par défaut ou par l'administrateur du site) pour s'afficher dans la partie supérieure ( top) de la page. Ces outils sont listés dans le tableau Tool de la section Toolbar_top du fichier toolbar.ini. Donc name=top indique au système de rechercher la section Toolbar_top et d'afficher les outils de cette section avec le mode de vue défini par le paramètre view (ici le mode de vue sera line)

Le mode de vue fait référence à un répertoire situé par défaut dans design/standard/templates/toolbar/ Ce répertoire auquel il est fait référence peut se nommer:

soit design/standard/templates/toolbar/line/
soit design/standard/templates/toolbar/full/

Chacun de ces deux répertoires contient des templates portant le nom des outils. Mais suivant que ces templates se trouvent dans l'un ou l'autre des répertoires, l'affichage produit ne sera pas le même.

Lorsqu'il est placé dans la partie supérieure de la page, il est évident que l'outil login, par exemple, doit être le plus petit possible pour ne pas casser la mise en page. Par contre, si on l'affiche sur la droite, alors là, sa présentation peut être plus imposante, comporter des options, plusieurs champs, etc...

Vous trouverez beaucoup d'informations sur le fonctionnement des outils et leur gestion dans cet article: (à venir !)

Le menu

68     {default current_user=fetch('user','current_user')}
69     {cache-block keys=array($uri_string, $current_user.role_id_list|implode( ',' ),
                $current_user.limited_assignment_value_list|implode( ',' ))}
70         <div class="break"></div>
71     </div>{* id="topcontent" *}
72
73     <hr class="hide" />
74
75     {menu name=TopMenu}
76
77     <hr class="hide" />
78     {/cache-block}
79

Ligne 68: la fonction de template default , qui est obsolète, définie la variable current_user. Grâce à la fonction de template fetch cette ligne récupère le nom de l'utilisateur qui vient de demander l'affichage de la page et l'affecte à la variable current_user. La plupart du temps il s'agit de l'utilisateur anonymous.Cette balise est fermée ligne 95.

La fonction default est une fonction obsolète qui assigne la valeur à la variable uniquement si celle-ci n'a pas déjà une valeur assignée.

Ligne 69: elle est assez barbare ! Je sais seulement que cette ligne définit le temps pendant lequel le menu (le top menu exactement) du site doit être mis en cache et indique au système s'il doit afficher le menu présent dans le cache ou bien s'il convient de le recalculer. La syntaxe de cette ligne fait usage de l'opérateur de template implode.

Ligne 75: La fonction menu recherche dans le fichier de surcharge menu.ini.append.php la valeur du paramètre TopMenu de la section SelectedMenu

Ce paramètre contient le nom du menu sélectionné par défaut ou par l'administrateur et destiné à être affiché en partie supérieure de la page. Placé sous le logo et en position horizontale, c'est la plupart du temps le menu principal du site.

Le choix du menu ce fait en allant dans l'onglet Design de l'interface d'administration, puis en sélectionnant dans le cadre Gestion des menus le siteaccess public (valider avec le bouton Assigner). Ne reste plus qu'à sélectionner dans le cadre Positionnement des menus le type de menu que l'on souhaite ainsi que son positionnement. Penser à valider avec le bouton Appliquer les changements. Recharger la page d'accueil du site.

Parmi les quatres choix de menus disponibles par défaut, l'un d'eux propose de ne pas afficher de menu horizontal. Il n'est pas possible par défaut d'afficher de menu à droite. Mais bien sûr, avec un peu d'expérience cela est tout à fait réalisable.

Ligne 78: balise de fermeture de la ligne 69.

Le path

80     <div id="path">
81         <div id="path-design">
82             {include uri="design:parts/path.tpl"}
83         </div>{* id="path-design" *}
84     </div>{* id="path" *}
85

Le path ( chemin en français) s'affiche par défaut sous le menu horizontal et affiche en permanence le chemin du document affiché. Cele permet au visiteur de savoir exactement où il se situe dans le site.

Ligne 82: on retrouve la fonction d'inclusion de template décrite ligne 34. Le template inclus par défaut est:

design/base/templates/parts/path.tpl

Menu gauche

86     {cache-block keys=array($uri_string, $current_user.role_id_list|implode( ',' ),
           $current_user.limited_assignment_value_list|implode( ',' ))}
87     <hr class="hide" />
88
89     <div id="columns">
90
91         {menu name=LeftMenu}
92
93         <hr class="hide" />
94     {/cache-block}
95     {/default}
96

Lignes 86 et 94: à nouveau est défini un bloc de code, celui présent entre ces lignes, qui sera soumis à une règle de mise en cache définie par la ligne 86. Comprenne qui pourra !

Ligne 91: le principe de fonctionnement du code de cette ligne est en tout point identique à celui décrit pour la ligne 75.La fonction menu recherche dans le fichier de surcharge menu.ini.append.php la valeur du paramètre LeftMenu de la section [SelectedMenu]

Ce paramètre contient le nom du menu sélectionné par défaut ou par l'administrateur et destiné à être affiché en partie gauche de la page.

Ligne 95: balise de fermeture de la ligne 68.

Les toolbars à droite

97         {section show=ezini( 'Toolbar_right', 'Tool', 'toolbar.ini' )|count}
98             <div id="rightmenu">
99                 <div id="rightmenu-design">
100                     <h3 class="hide">Right menu</h3>
101                     <div id="toolbar-right">
102                         <div class="toolbar-design">
103                             {tool_bar name=right view=full}
104                         </div>{* id="toolbar-design" *}
105                     </div>{* id="toolbar-right" *}
106                 </div>{* id="rightmenu-design" *}
107             </div>{* id="rightmenu" *}
108         {/section}
109
110         <hr class="hide" />
111

Le principe de fonctionnement du bloc de code compris entre les lignes 97 et 108 est en tout point similaire à celui décrit par le chapitre Les toolbars supérieurs.

Ligne 97: elle compte ( count) le nombre de valeurs comprises dans le tableau Tool de la section Toolbar_right du fichier toolbar.ini
- Si la valeur de count est strictement positive, c'est à dire s'il y a des outils qui ont été définis comme devant s'afficher dans la partie droite de la page, alors la ligne 100 est affichée et la ligne 103 est exécutée.
- Si la valeur de count est nulle, alors tout le bloc allant de la ligne 97 à la ligne 108 ne sera pas pris en compte par le système.

Ligne 103: la fonction de visualisation tool_bar recherche dans le fichier toolbar.ini (ou dans l'une de ses surcharges) la liste des outils qui sont programmés (par défaut ou par l'administrateur du site) pour s'afficher dans la partie droite ( right) de la page. Ces outils sont listés dans le tableau Tool de la section Toolbar_right du fichier toolbar.ini. Donc name=right indique au système de rechercher la section Toolbar_right et d'afficher les outils de cette section avec le mode de vue défini par le paramètre view (ici le mode de vue sera full)

Le mode de vue fait référence à un répertoire situé par défaut dans design/standard/templates/toolbar/ Ce répertoire auquel il est fait référence peut se nommer:

soit design/standard/templates/toolbar/line/
soit design/standard/templates/toolbar/full/

Par défaut, aucun outil n'est configuré pour s'afficher à droite.

Détermination de la mise en page

112         {cache-block}
113             {let maincontentstyle='maincontent-bothmenus'}
114
115             {section show=eq(ezini('SelectedMenu','LeftMenu','menu.ini'),'')}
116                 {set maincontentstyle='maincontent-noleftmenu'}
117             {/section}
118
119             {section show=ezini('Toolbar_right','Tool','toolbar.ini')|count|eq(0)}
120                 {section show=$maincontentstyle|eq('maincontent-noleftmenu')}
121                     {set maincontentstyle='maincontent-nomenus'}
122                 {section-else}
123                     {set maincontentstyle='maincontent-norightmenu'}
124                 {/section}
125             {/section}
126
127             <div id="maincontent" class="{$maincontentstyle}">
128                 <div id="fix">
129                     <div id="maincontent-design">
130             {/let}
131
132         {/cache-block}
133

Ligne 112: mise en place d'un bloc de cache.

Ligne 113: On retrouve la fonction obsolète let permettant de définir une variable. Ici, la variable maincontentstyle vaut par défaut maincontent-bothmenus.

Ligne 115: La syntaxe de cette ligne fait appel à l'opérateur logique eq qui contrôle ici que le paramètre LeftMenu de la section SelectedMenu du fichier menu.ini (ou de l'une de ses surcharges), extrait par l'opérateur ezini , soit vide ( ),'') ). Si c'est le cas alors la ligne 116 est exécutée.

Ligne 116: la fonction set permet de redéfinir la valeur d'une variable préalablement définie. Donc, si la condition de la ligne 115 est vraie alors la variable maincontentstyle vaudra maintenant maincontent-noleftmenu.

Ligne 119: La condition repose ici sur l'opérateur count et sur l'opérateur logique eq. La condition est la suivante:

Si le nombre d'outils référencés par le paramètre Tool de la section Toolbar_right du fichier toolbar.ini (ou de l'une de ses surcharges) vaut zéro alors on passe à la ligne 120.

Ligne 120: si la variable $maincontentstyle est égale à (vaut) la chaîne de caractères maincontent-noleftmenu alors on passe à la ligne 121.

Ligne 121: on fixe la valeur de la variable $maincontentstyle à maincontent-nomenus.

Ligne 122: cette syntaxe est équivalente à un else d'une structure if et permet donc de passer à la ligne 123 si la condition de la ligne 121 n'est pas satisfaite.

Ligne 123: on fixe la valeur de la variable $maincontentstyle à maincontent-norightmenu.

Ligne 127: Cette ligne est très importante car elle définie une classe CSS dont le nom sera celui de la variable $maincontentstyle. En fonction de la valeur de cette variable, la classe CSS appliquée sera différente et le résultat sera une mise en page différente du site.

Les noms des 4 classes CSS possibles parlent d'eux-même:

maincontent-bothmenus => bothmenus signifie: menu à droit et à gauche sur la page
maincontent-noleftmenu => noleftmenu signifie: pas de menu sur la partie gauche de la page
maincontent-nomenus => nomenus signifie: pas de menu du tout
maincontent-norightmenu => norightmenu signifie: pas de menu sur la partie droite de la page

On comprend donc que ce bloc de code a pour objet de déterminer s'il y a, dans la mise en page générale du site, un menu à gauche de défini ou non et s'il est prévu ou non des outils sur la droite. Le système détermine cela afin de réserver ou non des colonnes latérales réservées à l'affichage de ces menus et/ou de ces outils.

Les 4 classes CSS sont définies dans la feuille de style design/base/stylesheets/site.css

Ligne 130: libère (remet à zéro) la variable $maincontentstyle

Ligne 132: Fin du bloc de cache.

$module_result.content

134                         {$module_result.content}
135
136                     </div>{* id="maincontent-design" *}
137                     <div class="break"></div>
138                 </div>{* id="fix" *}
139             </div>{* id="maincontent" *}
140
141             <div class="break"></div>
142     </div>{* id="columns" *}
143
144     <hr class="hide" />
145

Ligne 134: la ligne la plus importante du template: cette ligne affiche le contenu de la variable $module_result . En clair le contenu demandé par le visiteur du site est dans cette variable. On peut considérer, aux problèmes de mise en page près, que tant que le template pagelayout.tpl contient cette ligne alors il est en mesure d'afficher le contenu du site.

Les toolbars inférieurs

146     {section show=ezini('Toolbar_bottom','Tool','toolbar.ini')|count}
147         <div id="toolbar-bottom">
148             <div class="toolbar-design">
149                 {tool_bar name=bottom view=line}
150             </div>{* id="toolbar-design" *}
151             <div class="break"></div>
152         </div>{* id="toolbar-bottom" *}
153     {/section}
154

Le comportement de ces lignes de code est en tout point identique à celles décritent au paragraphe Les toolbar supérieurs. Par contre, ici, l'affichage des outils sera produit en bas de page juste au dessus du pied de page du site.

Le pied de page

155     <div id="footer">
156         <div id="footer-design">
157
158             <address>{"Powered by %linkStartTag eZ publish&reg; open source content management system %linkEndTag 
and development framework."|i18n("design/base",,hash('%linkS tartTag',"<a href='http://ez.no'>",'%linkEndTag',"</a>" ))}
<br />{ezini('SiteSettings','MetaDataArray','site.ini').copyright}
159             </address>
160
161         </div>{* id="footer-design" *}
162     </div>{* id="footer" *}
163
164     <div class="break"></div>
165 </div>{* id="allcontent" *}
166
167 <!--DEBUG_REPORT-->
168
169 </body>
170 </html>

Ligne 155 à 162: insertion du pied de page du site avec utilisation de l'opérateur de template d'internationalisation i18n .

Conclusion

Voilà présenté suffisamment dans le détail, je l'espère, le contenu de ce template tellement important de eZ publish.

Cette présentation a été l'occasion d'aborder de très nombreuses notions importantes dans le fonctionnement de eZ publish et de faire un tout petit tour de la syntaxe propre au langage de eZ publish.

Commentaires

Right menu

Dernières publications

Dernières modifications