Date de publication: le samedi 25 avril 2009 à 12h10
Dernière modification: par Pascal BOYER le dimanche 26 avril 2009 à 10h12
« Article précédent: eZ Publish : créer une page de contact avec la librairie highSlide
» Article suivant: eZ Publish : installer JW Desktop Player (lecteur flash video avec liste de lecture)

Cet article présente l'adaptation dans eZ publish du fantastique travail réalisé par Stu Nicholls dont l'oeuvre est disponible sur son site cssplay . A tous ceux qui souhaitent en savoir un peu plus sur l'auteur, il est quelque part ici !

Cette galerie d'image, comme d'ailleurs tout le travail de Stu Nicholls, ne recourt qu'à du CSS (sans aucun code javascript) et fonctionne avec tous les navigateurs (IE7 compris).

Objectifs

Le but poursuivi par le présent article est double:

• Premièrement, faire en sorte que la création de la galerie soit automatique, c'est à dire que l'utilisateur n'ait qu'à ajouter les images dans un dossier et que la galerie s'affiche automatiquement.
• Deuxièmement, et c'est déjà beaucoup plus intéressant, insérer très simplement cette galerie dans n'importe quel article du site. Ceci fera l'objet d'un deuxième article en cours de rédaction (eZ Publish : insertion automatique d'une galerie d'images CSS - Partie II).

Points abordés

• Création de règles de surcharge
• Création de templates de surcharge et rédaction de leurs code
• Insertion d'une feuille de styles CSS
• Création d'une classe d'objet
• Instanciation d'un objet de cette classe

Surcharge du template pagelayout.tpl

Nous supposerons tout d'abord que nous souhaitons créer un template de surcharge du principal template pagelayout.tpl de notre site, ce template de surcharge étant celui qui contiendra les lignes d'appel des feuilles de styles galerie_en_css.css et galerie_en_css_IE6.css .

Règle de surcharge

Dans le fichier de surcharge override.ini.append.php du siteaccess public utilisé, la règle de surcharge peut être:

[pagelayout_gallery_css]
Source=pagelayout.tpl
MatchFile=pagelayout_galerie_css.tpl
Subdir=templates
Match[object]=3117

Le template de surcharge pagelayout_galerie_css.tpl sera donc placé à la racine du répertoire:

design/plain_site/override/templates/

Dans la règle de surcharge, 3117 représente le N° de ID de l'objet Colimaçon (voir le paragraphe Répertoire de la galerie d'images ).

Création du template de surcharge pagelayout_galerie_css.tpl

Ce template de surcharge n'est rien d'autre qu'une simple copie du template design/base/template/ pagelayout.tpl utilisé par défaut:

cp -p design/base/template/pagelayout.tpl design/plain_site/override/templates/pagelayout_galerie_css.tpl

Les feuilles de styles CSS

Elles seront placées dans le répertoire suivant:

design/plain_site/stylesheets/gallery/

et nommées:

• galerie_en_css.css
• galerie_en_css_IE6.css

Une feuille de styles spécifique est dédiée à l'affichage de la galerie d'images dans Internet Explorer 6. Il est même possible que nous devions en créer une troisième pour distinguer IE 6 de IE 7 ! Hé oui, le monde microsoft, c'est l'emmerdement maximum pour le minimum de liberté !

Un exemple de contenu de la feuille de styles galerie_en_css.css est proposé au bas de l'article.

Insertion des feuilles de styles

Elles sont insérées dans l'en-tête du template pagelayout _galerie_css .tpl utilisé.

Pour la feuille de styles commune à tous les navigateurs respectant les standards (c'est à dire tous sauf ceux de la famille Internet Explorer) nous utiliserons de préférence cette syntaxe:

<link rel="stylesheet" href={"stylesheets/gallery/galerie_en_css.css"|ezdesign} type="text/css" media="screen">

Cette ligne est insérée en dehors de la section:

<style type="text/css">
...
...
...
</style>

Vous pouvez cependant tout à fait utiliser l'une de ces syntaxes (à l'intérieur cette fois-ci de la section ci-dessus):

@import url({"stylesheets/gallery/galerie_en_css.css"|ezdesign});

ou bien celle-ci:

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

ou encore celle-ci:

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

Dans le cas des deux dernières syntaxes, n'oubliez pas de renseigner correctement le fichier de surcharge design.ini.append.php du siteaccess public utilisé.

Pour de plus amples informations sur le fonctionnement des trois méthodes ci-dessus je vous renvoie à l'article sur le template pagelayout.tpl de eZ publish .

Pour les feuilles de styles destinées à la mise en page sous IE, il est préférable d'utiliser la méthode d'insertion conditionnelle (elle aussi décrite dans l'article sur le template pagelayout.tpl de eZ publish ). Elle est ainsi appelée car elle commence par définir la version de IE (la 6 ou la 5.5 ou la 7 ou toutes les versions) qui doit charger la feuille de styles mentionnée. Donc, sous la balise de fermeture:

</style>

...ajoutez les lignes suivantes:

<!--[if lte IE 6]>
<link href={"stylesheets/gallery/galerie_en_css_IE6.css"|ezdesign} rel="stylesheet" type="text/css">
<![endif]-->

... pour que toutes les versions de IE inférieures ou égales à 6 chargent la feuille de styles galerie_en_css_IE6.css .

Pour la version 7 de IE, utilisez cette syntaxe:

<!--[if IE 7]>
<link href={"stylesheets/gallery/galerie_en_css_IE7.css"|ezdesign} rel="stylesheet" type="text/css">
<![endif]-->

Créer la classe d'objet pour instancier les images

Nous nommerons la classe que nous allons créer Image Simple slideshow . Pour créer cette classe d'objet, le mieux est de faire une copie de la classe Image existante. Mais auparavant, il y a un petit écueil que nous allons contourner.

Rester conforme aux recommandations du W3C

Regardons, sur la page de démo de la galerie , la forme générale du code source que devra automatiquement créer le template ayant en charge l'affichage de la galerie:

<div class="photo">
<ul>
<li><a href="" class="hor"><img src="rep/de/image_1.jpg" alt="" title="" /><b>Commentaire de l'image 1</b></a></li>
<li><a href="" class="hor"><img src="rep/de/image_2.jpg" alt="" title="" /><b>Commentaire de l'image 2</b></a></li>
<li><a href="" class="hor"><img src="rep/de/image_3.jpg" alt="" title="" /><b>Commentaire de l'image 3</b></a></li>
etc...
</ul>
<h1>CSS <i>p</i>Photo Gallery</h1>
</div>

Comme vous le savez peut-être, par défaut, eZ publish place le contenu des attributs basés sur des datatypes XML dans un paragraphe, c'est à dire entre deux balises:

<p>
...
</p>

Pour information, le template qui gère l'affichage des paragraphes produits par Online Editor est:

design/standard/templates/content/datatype/view/ezxmltags/paragraph.tpl

et contient ce code:

<p{section show=ne($classification|trim,'')} class="{$classification|wash}"{/section}>
{$content}
</p>

Il apparaît donc que si l'on choisit un datatype Bloc XML pour créer l'attribut Commentaire de l'image de notre classe Image Simple slideshow alors forcément eZ publish introduira les balises <p> et </p> à l'intérieur des deux balises <b> et </b> qui encadrent le commentaire des images. Or ceci n'est pas conforme aux recommandations du W3C. Nous ne pouvons donc pas utiliser les datatypes XML pour l'attribut des commentaires des images.

Nous créerons donc un attribut Commentaire de l'image basé, selon notre convenance, sur un datatype Bloc de texte ou Ligne de texte .

Les attributs de la classe Image Simple slideshow

Pour accéder à la classe Image par défaut, cliquez sur l'onglet Administration de l'interface d'administration de eZ publish , puis dans le menu de gauche sur le lien Classes et enfin sur le lien Media dans le cadre central intitulé Groupes de classes .

Faire une copie de la classe Image

Dans la liste de classes qui s'affiche alors, recherchez la ligne contenant la classe Image puis cliquez sur l'icône à droite de la ligne afin de créer, comme le montre la capture ci-dessous, une copie de cette classe:

Éditez cette nouvelle classe (voir info sur l'image ci-dessus) puis modifiez la afin d'obtenir quelque chose de similaire à ceci:

Liste des datatypes de la classe de contenu qui servira à importer les images

Répertoire de la galerie d'images

Le principe de fonctionnement de la galerie sera le suivant:

• On crée un répertoire (avec par exemple la classe par défaut folder ) portant le nom que l'on souhaite attribuer à la galerie d'images.
• Puis on importe dans ce répertoire, une par une, grâce à la nouvelle classe Image Simple slideshow , toutes les images que l'on souhaite afficher dans la galerie.

Supposons que nous souhaitions créer une galerie d'images nommée Colimaçon . On instancie alors un répertoire Colimaçon à partir de la classe folder :

A noter que le N° de ID du noeud nouvellement créé est 3117 (il est différent chez vous, bien sûr).

Importer les images

Placez-vous sur le répertoire Colimaçon puis importez vos images à partir de la classe Image Simple slideshow . Le résultat doit ressembler peu ou prou à ceci:

Créer/instancier une image

Liste des images importées dans le répertoire de la galerie d'images

Le template de surcharge de la galerie d'images

Par défaut, le template utilisé pour afficher le contenu d'un objet folder est:

design/standard/templates/node/view/full.tpl

Or celui-ci ne convient absolument pas pour afficher une galerie d'images. Il est donc nécessaire de créer la surcharge suivante:

[full_gallery_css]
Source=node/view/full.tpl
MatchFile=dossiers/full_css_gallery.tpl
Subdir=templates
Match[object]=3117

A présent, et après avoir vidé les caches, chaque fois que le système affichera le noeud 3117 le template de surcharge:

design/plain_site/override/templates/dossiers/full_css_gallery.tpl

sera utilisé (vous devez donc créer ce template).

Mais que doit-donc contenir le template full_css_gallery.tpl ?

Là encore, observons le comportement par défaut su système pour nous en inspirer et ne pas inutilement réinventer la roue.

Créons une galerie d'images nommée Galerie de test (contenant deux ou trois images) à partir des deux classes d'objets fournies par défaut par eZ publish , à savoir gallery et image , puis affichons cette galerie en activant le mode debug . On comprend alors très rapidement que le template de surcharge utilisé (surcharge qui existe par défaut dans le fichier override.ini.append.php du siteaccess public) est:

design/plain_site/override/templates/full/gallery.tpl

Un rapide coup d'oeil dans ce template permet de repérer la ligne suivante (ligne 41 pour eZ publish 3.8, 3.9 et 3.10):

{node_view_gui view=galleryline content_node=$child}

La fonction de visualisation node_view_gui n'a d'autre effet que d'indiquer au système d'utiliser le mode de vue galleryline pour l'affichage du contenu de l'objet $child .

[image_galleryline]
Source=node/view/galleryline.tpl
MatchFile=galleryline/image.tpl
Subdir=templates
Match[class_identifier]=image

et c'est effectivement bien le template:

design/base/override/templates/galleryline/image.tpl

qui est utilisé pour l'affichage des vignettes de Galerie de test . Il est donc possible de créer des surcharges de templates qui n'existent pas !

Revenons au template image.tpl pour retenir que de tout le code contenu dans ce template, à savoir:

<div class="content-view-galleryline">
    <div class="class-image">

    <div class="attribute-image">
        <p>{attribute_view_gui attribute=$node.data_map.image image_class=gallerythumbnail
                               href=$node.url_alias|ezurl}</p>
    </div>

    <div class="attribute-caption">
        <p>{$node.name|wash}</p>
    </div>

    </div>
</div>

une seule chose est véritablement importante pour nous: cette ligne:

{attribute_view_gui attribute=$node.data_map.image}

A elle seule, cette ligne contenant la fonction de visualisation attribute_node_gui crée tout le code suivant:

<img src="/var/plain_site/storage/images/la_chapelle_en_images/galerie_de_base/image_3/873-1-eng-GB/image_3_large.jpg"
                    width="360" height="240"  style="border: 0px;" alt="" title="" />

Quant au code:

image_class=gallerythumbnail

il permet d'appliquer aux images les dimensions définies par la section [gallerythumbnail] du fichier de configuration image.ini.append.php du siteaccess public.

Enfin, le code:

href=$node.url_alias|ezurl

permet de faire de chaque photo un lien et écrit donc ce code:

<a href="/index.php/plain/la_chapelle_en_images/galerie_de_base/image_2">

<img ........... />

</a>

Ce qui nous intéresse tout particulièrement pour la création de notre galerie est bien évidemment le code qui va créer la balise <img /> .

Voici donc le contenu complet et commenté du template de surcharge full_css_gallery.tpl :

{* CE TEMPLATE PERMET DE CREER UNE GALERIE D'IMAGES EN CSS NOMME Simple slideshow *}

{* ON COMPTE LE NOMBRE D'IMAGES QUE CONTIENT LA GALERIE - CE N'EST PAS OBLIGATOIRE BIEN SUR *}
{def    $nb_images=fetch_alias( children_count, hash( parent_node_id, $node.node_id))}

{* ON AFFICHE LE NOMBRE D'IMAGES QUE CONTIENT LA GALERIE *}
Il y a {$nb_images} images dans la galerie.<br />

{*  $liste_images CONTIENT LA LISTE DES IMAGES DE LA GALERIE.
    $sens_image EST INITIALISÉE COMME UNE VARIABLE VIDE. *}

{def    $liste_images=fetch( 'content', 'list',
                   hash( 'parent_node_id', $node.node_id,
                   'sort_by', array(array('priority')) ) )
          $sens_image="" }

{* DÉBUT DE L'AFFICHAGE DE LA GALERIE *}
<div class="photo">
<ul>
{* ON INITIALISE UNE BOUCLE: *}
{foreach $liste_images as $image}

{* ON RECUPERE LA LARGEUR ET LA HAUTEUR DE L'IMAGE QUI EST TRAITEE PAR LA BOUCLE *}
{def    $largeur_image=$image.data_map.image.content.original.width
           $hauteur_image=$image.data_map.image.content.original.height
}
{* SI LA LARGEUR EST INFERIEURE (lt=less than) A LA HAUTEUR *}
{if lt($largeur_image,$hauteur_image)}
   {* ALORS L'IMAGE EST EN MODE PORTRAIT *}
   {set $sens_image=vert}
{else}
   {* SINON, FORCEMENT L'IMAGE EST EN MODE PAYSAGE *}
   {set $sens_image=hor}
{/if}
<li><a href="#nogo" class="{$sens_image}">{attribute_view_gui attribute=$image.data_map.image}<b>{attribute_view_gui attribute=$image.data_map.commentaires_image}</b></a></li>
{/foreach}
</ul>
{* ON AFFICHE LE NOM DE LA GALERIE *}
<h1>{$object.name}</h1>
</div>

Pensez à vider les caches après avoir créé/modifié le template full_css_gallery.tpl .

La feuille de style

Il est bien évident que l'affichage de la galerie dépend pour beaucoup de la feuille de styles associée. En voici un exemple:

a {color:#000;}
a:hover {text-decoration:none;}
a:visited {color:#000;}

/* slides styling */

/* CADRE GENERAL */
.photo {
    padding: 20px;
    background: #fff;       /* couleur de fond du cadre general */
    width: 700px;           /* largeur du cadre general */
    height: 440px;          /* hauteur du cadre general */
    text-align: left;
    margin: 0 auto 0 auto;  /* on centre le cadre general */
}

#maincontent .photo h1 {
    font-size: 1em;
    font-weight: normal;
    color: #fc0;
    margin: 0 0 0 5px;
    padding: 0;
}

.photo ul {                 /* On définit l'affichage du cadre dans lequel s'affiche les images-liens */
    list-style: none;
    padding: 0;
    margin: 0;
    width: 218px;           /* Largeur de ce cadre */
    height:142px;
    background: #444;       /* Couleur de fond de ce cadre */
    border:1px solid #666;
    position: relative;
}

.photo ul li {          /* On définit le style d'affichage des images-liens */
    display: inline;    /* Affichage des images-liens comme si c'était du texte */
    width: 24px;
    height: 24px;
    float: left;        /* Les images-liens sont alignées les unes à la suites des autres */
    margin: 12px 24px 10px 24px;    /* Espace entre chaque image-lieni. C'est ici qu'on paramètre le nombre d'images-liens par lignes */
}

.photo ul li a {    /* On définit comment doivent s'afficher par défaut les lien "a" */
    display: block;
    width: 24px;
    height: 24px;
    cursor: default;
    background: url(../../images/css_gallery/gallery_1/arrow.gif) no-repeat;    /* Par défaut les liens "a" sont représentés par une image de flèche */
    text-decoration: none;
}

.photo ul li a b {
    display: none;  /* Par défaut on n'affiche pas les commentaires liés aux images */
}

.photo ul li a img {    /* On définit l'affichage des images-liens par défaut: ce sont des vignettes de 22x22 */
    display: block;
    width: 28px;
    height: 28px;
    border: 1px solid #666;
    border-top-color: #ccc;
}

.photo ul li a:hover {
    white-space: normal;
    position:relative;
}

.photo ul li a.vert:hover img { /* On définit le comportement des images-liens lorsqu'on les survole */
    position: absolute;
    left: -12px;
    top: -20px;
    width:48px;
    height:64px;
    border-color: #fc0;
}

.photo ul li a.hor:hover img {
    position: absolute;
    left: -20px;
    top: -12px;
    width: 64px;
    height: 48px;
    border-color: #fc0;
}

.photo ul li a:active, .photo ul li a:focus {
    position: static;
    outline: 0;
}

.photo ul li a:focus b, .photo ul li a:active b { /* On définit l'affichage des commentaires liés aux images */
   display: block;
   position: absolute;
   width: 204px;
   height: 150px;
   border: 1px solid #666;
   top: 165px;
   left: 0;
   text-align: justify;
   color: #ddd;
   font-weight: normal;
   padding: 6px;
}


.photo ul li a:focus.vert img, .photo ul li a:active.vert img {
    background-color: #000;
    position: absolute;
    left: 260px;
    top: 0;
    width: 267px;
    height: 400px;
    border: 1px solid #fc0;
    padding: 5px 45px;
}

.photo ul li a:focus.hor img, .photo ul li a:active.hor img {   /* Ici on définit l'affichage des grandes images sur la droite */
    background-color: #000;
    position: absolute;
    left: 260px;
    top: 0;
    width: 400px;
    height: 267px;
    border: 1px solid #fc0;
    padding: 70px 5px;      /* Permet de centrer verticalement les grandes images */
}

Résultat

L'affichage du noeud Colimaçon de ID 3117 ressemble au final à ceci

Commentaires