Date de publication: le lundi 6 octobre 2008 à 14h10
Dernière modification: par Pascal BOYER le vendredi 19 février 2010 à 16h37
« Article précédent: eZ Publish : les fonctions de visualisation
» Article suivant: eZ Publish : concat - exemple de syntaxe
Objectif
Dans cet article, je décris une technique, parmi d'autres, de création d'un diaporama smoothgallery .
Le résultat obtenu sur un site eZ Publish est visible sur ce site: cfdt-3c-isalpin.fr
:
La smoothgallery présentée en exemple ci-dessus utilise la version 1.2 namespaced puisque le site utilise également le framework jquery.
Vous remarquerez que ce diaporama utilise deux formats d'image:
- le format «diaporama» (grand format)
- le format «vignette» (petit format)
Première méthode
Elle consiste à créer un article dans lequel on insère, grâce au Online Editor, les images qui constitueront le diaporama.
Cette méthode n'est pas la plus conviviale en ce qu'elle ne permet pas, lors du téléchargement de l'image, de définir un commentaire prévu par la smoothgallery . obligeant le créateur du diaporama à des opérations supplémentaires.
:
La phrase ci-dessus n'est plus valable dès lors que vous utilisez le nouvel online editor (voir la
page de Contribution
qui lui est consacrée) qui sera
définitivement intégré à la version eZ Publish 4.1
.
Sa mise en oeuvre est en revanche l'occasion de voir comment écrire du code faisant appel à la fonction de recherche related_objects .
Créer le diaporama
La base du diaporama est donc un simple article contenant l'ensemble des images qui seront affichées par le système smoothgallery .
Différentes tailles d'une même image
eZ Publish offre la possibilité de créer, à partir d'une même image téléchargée, plusieurs versions de celle-ci, chacune de taille spécifique.
image.ini est le fichier de configuration par défaut permettant de configurer le nombre de versions que l'on souhaite et les dimensions associées.
:
Il est indispensable de placer deux surcharges image.ini.append.php de ce fichier:
- L'une dans le siteaccess d'administration,
- L'autre dans le siteaccess public.
Ce système de création automatique de plusieurs versions d'une image opère lorsque l'on insère, à l'aide du Online Editor, une image/photo en tant qu'objet d'un article ou bien lorsque celle-ci est téléchargée à partir du datatype image .
Les différente versions (alias) des images sont stockées dans un sous-répertoire du répertoire:
/var/plain_site/storage/images/
:
Toutes les versions sont créées lors de l'importation d'une image à partir du Online Editor.
:
Par contre, lorsqu'une image est téléchargée à partir d'un datatype
image
, ses différentes versions sont créées à la volées lors de l'affichage du template.
Cette fonctionnalité sera exploitée pour éviter aux rédacteurs d'avoir à pré-retailler les images dans les deux formats («diaporama» et «vignette») puis à les toutes télécharger. Ils pourront donc télécharger les images de n'importe quelle taille originale, le système se chargeant de créer les deux dimensions souhaitées.
Pour cela, commencer par définir, dans les deux surcharges du fichier image.ini deux alias d'images, par exemple (voir les deux dernières lignes):
AliasList[] AliasList[]=reference AliasList[]=small AliasList[]=medium AliasList[]=medium150x150 AliasList[]=large AliasList[]=rss AliasList[]=galerieimage AliasList[]=vignettesgalerieimage
...auxquels on affecte ces deux tailles d'image:
[galerieimage] Reference=reference Filters[]=geometry/scaledownonly=204;135 [vignettesgalerieimage] Reference=reference Filters[]=geometry/scaledownonly=60;45
:
La limite du poids des fichiers téléchargés est déterminée par le paramètre upload_max_filesize du fichier de configuration php.ini de PHP.
Récupérer les images d'un article
Les image insérées en tant qu'objet dans un article apparaissent, lorsque l'on affiche ce dernier (et non lorsqu'on l'édite) dans l'interface d'administration, dans le cadre « Relations» ( Objets associés).
Pour récupérer les différentes versions d'une même image d'un article, on commence par définir une variable:
{def $photos=fetch( 'content', 'related_objects', hash( 'object_id', 2662, 'sort_by', array( 'published', true() )))}
Voir cette page de doc: related_objects
Pour afficher sur le site public le tableau d'information de la première image de l'article de ID=2662, écrire le code suivant:
{$photos.object.related_contentobject_array.0.data_map.image.content|attribute(show)}
Afficher une image contenue dans l'article
Pour afficher, par exemple, la première image contenue dans l'article:
<img src={$photos.object.related_contentobject_array.0.data_map.image.content[original].full_path|ezroot} alt="" />
Cette ligne de code affichera donc la première image de l'article dans sa taille originale.
Afficher toutes les images d'un article, leur nom et leur commentaire
:
Lorsque l'on insère les images dans l'article à partir du Online Editor, il n'est pas prévu d'emplacement pour un commentaire.
Pour remédier à cela, suivre les étapes suivantes une fois l'article publié:
- cliquer sur le nom de l'article dans l'arborescence du menu Contenus
- dans le cadre « Relations» ( Objets associés), cliquer sur l'icône située à gauche du nom d'une image puis sélectionner Editer en puis Français
- Modifier le nom de l'image si besoin
- ajouter un commentaire dans le cadre Caption
- Envoyer pour publication
Le code ci-dessous affiche toutes les images de l'article ainsi que leur nom et commentaire associés:
<div id="myGallery">
{foreach $photos as $image}
<div class="imageElement">
<h3>{$image.data_map.name.content}</h3>
<p>{$image.data_map.caption.data_text}</p>
<a href="#" title="open image" class="open"></a>
<img src={$image.data_map.image.content[galerieimage].full_path|ezroot} class="full" />
<img src={$image.data_map.image.content[vignettesgalerieimage].full_path|ezroot} class="thumbnail" />
</div>
{/foreach}
</div>
Les deux éléments div ( myGallery et imageElement) sont obligatoires dans le cadre de la mise en oeuvre du diaporama smoothgallery .
Afficher d'autres versions d'une même image
Pour afficher l'une de ses versions, il suffit de modifier la valeur entre crochets de content:
<img src={$photos.object.related_contentobject_array.0.data_map.image.content[small].full_path|ezroot} />
Classer les images
Les critères de classement des images, et donc l'ordre dans lequel elles seront affichées par le diaporama, sont précisées par la page de documentation de related_objects
L'emploi du critère 'published', true() impose d'inclure les images dans l'article dans le même ordre que celui dans lequel on souhaite les voir apparaître dans le diaporama.
Affiner le système
Bien que les rédacteurs aient la possibilité de créer autant de diaporamas que possible dans le répertoire qui les accueille, je ne souhaite n'en afficher qu'un seul.
Il faut donc commencer par l'extraire:
{def $galeriePhoto=fetch('content', 'list', hash( 'parent_node_id', 1775, 'sort_by', array('priority',true()), 'depth', 1))
Le code ci-dessus extrait le premier article contenu sous le noeud parent de ID=1775 (le répertoire qui accueil les diaporamas).
Les diaporamas seront classés par priorité, le premier, celui qui sera extrait, étant celui de priorité la plus faible.
Ensuite, on passe le ID de l'objet extrait:
$photos=fetch( 'content', 'related_objects', hash( 'object_id', $galeriePhoto.0.contentobject_id, 'sort_by', array( 'published', true() )))}
Le code d'affichage du diaporama reste inchangé.
Deuxième méthode
Cette méthode, plus conviviale que la précédente, repose sur l'utilisation d'une classe d'objet contenant un datatype image .
Par ailleurs, cette méthode permet de classer les images du diaporama par priorité, ce qui n'est pas le cas de la première méthode présentée.
La classe diaporama
Cette nouvelle classe d'objet ne sera composée que d'un seul datatype:
- ligne de texte : identifiant(*) = n om_diaporama
- Cocher l'option «Conteneur».
...permettant de nommer l'objet contenant les images affichées par le diaporama.
La classe Image pour diaporama
Cette classe d'objet, qui servira bien sûr à ajouter les images à l'objet diaporama, sera composée des datatypes suivants:
- ligne de texte : identifiant(*) = n om_image. Servira à définir le nom de l'image.
- bloc XML ou ligne de texte: identifiant(*) = commentaire. Servira à définir le commentaire lié à l'image.
- image : identifiant(*) = image. Servira à télécharger l'image.
(*) les noms des identifiants sont donnés ici à titre indicatif. Vous pouvez bien sûr prendre ceux de votre choix.
:
Le groupe anonymous doit avoir le droit de lire les nouvelles classes.
Créer un diaporama
- Créer, nommer puis publier un objet diaporama.
- Dans le menu gauche, cliquer sur l'icône placé à gauche du nom du diaporama nouvellement créé puis dans le menu contextuel choisir Créer ici puis Image pour diaporama.
- Télécharger une image, la nommer et écrire un commentaire.
- Répéter les opérations 2 et 3 pour chacune des images que doit contenir le diaporama.
CODE TEMPLATE
Rechercher les images
Pour que chaque chose soit bien à sa place, on supposera que les diaporamas sont placés sous un noeud parent, disons Mes diaporamas de ID=1775.
Comme dans le cas de la première méthode, on supposera également que vous ne souhaitez afficher qu'un seul diaporama. Il devient donc nécessaire de définir un critère de sélection. Pour garder la plus grande liberté possible, on choisira de classer les diaporamas par priorité, priority devenant donc le critère de sélection de l'unique diaporama à afficher.
Voici le code permettant de sélectionner, sous le noeud de ID=1775, le diaporama de plus petite priorité:
{let $diaporama=fetch_alias(children,hash( 'parent_node_id', 1775, 'sort_by', array('priority',true()), 'class_filter_type', 'include', 'class_filter_array', array( 'diaporama')), 'depth', 1, 'limit', 1)
La seconde étape consiste à rechercher toutes les images du diaporama contenu par la variable $diaporama:
$imagesDiaporama=fetch_alias( children, hash( parent_node_id, $diaporama.0.node_id, sort_by, array( 'priority', true())))}
Là encore, le critère de tri des images étant priority, cela implique que vous devez préalablement leur affecter une priorité tenant compte de l'ordre dans lequel vous souhaitez qu'elles soient affichées par le diaporama (sur le site public).
Code d'affichage du diaporama
Il est le suivant:
<div id="myGallery">
{foreach $imagesDiaporama as $image}
<div class="imageElement">
<h3>{$image.data_map.nom_image.content}</h3>
<p>{$image.data_map.commentaire.content}</p>
<a href={$image.data_map.image.content[original].full_path|ezroot} title="Pleine taille" class="open"></a>
<img src={$image.data_map.image.content[galerieimage].full_path|ezroot} class="full" />
<img src={$image.data_map.image.content[vignettesgalerieimage].full_path|ezroot} class="thumbnail" />
</div>{* imageElement *}
{/foreach}
</div>{* myGallery *}
:
Pour que le diaporama fonctionne, il est évidemment nécessaire d'inclure les javascripts et les feuilles de styles fournis avec l'archive SmoothGallery-1.2-namespaced.zip
Commentaires