SlideShowPro et les galeries d’ExpressionEngine
Ayant découvert cet article en surfant sur la toile, je me suis empressé de tester les possibilités qu'offraient la fusion entre les galeries photos d'ExpressionEngine et l'extension de flash, SlideShowPro. J'ai été agréablement surpris et je vais vous traduire l'article avec la permission de son auteur, John Henry Donovan du site 5pieces.com. Cela peut sembler fastidieux, mais c'est relativement simple.
Avant de commencer
- Il vous faut ExpressionEngine et le module de galeries photos d'installés
- Plusieurs catégories avec quelques images
- Vous voulez que SlideShowPro charge automatiquement les photos des catégories voulues
1 - Préparation de SlideShowPro
2 - SWFObject
3 - Configuration des galeries d'EE
4 - Modèles
Préparation de SlideShowPro
- Achetez l'extension si vous ne l'avez pas encore et downloadez-la SlideShowPro.
- Installez l'extension dans Flash
- Ouvrez Macromedia Flash
- Glissez le composant de SlideShowPro dans votre projet
- Renommez le composant en "ssp"
- Dans l'inspecteur des composants, videz le champ XML File Path
- Ajoutez une nouvelle couche que vous appellerez "Actions"
- Ajoutez ceci à la première frame de la couche "Actions":
ssp.xmlFilePath=xmlfile;
- Allez dans Fichier > Préférences de publications
- Changez le nom de votre fichier flash (.swf) en slideshow.swf
- Décochez le HTML, nous n'en aurons pas besoin
- Cliquez sur Publier
SWFObject
SWFObject permet d'intégrer proprement un fichier .swf dans une page html compatible par grand nombre de navigateurs.
Configuration des galeries d'EE
- Connectez-vous dans l'interface d'administration d'ExpressionEngine et allez sur la page Modules > Galerie d'images
- Créez une galerie si vous ne l'avez pas encore fait. Il vous demandera de créer un dossier pour vos images sur votre serveur
- Quand c'est fait, allez sur Préférences et configurez-le comme vous le voulez.
- Ajoutez des catégories, les descriptions,... et les images
A retenir pour la suite:
- Le numéro de la galerie
Vous pouvez le trouver en cliquant sur les différents éléments du menu de la galerie d'images (nouvel article, entrées de batch,...). Regardez la barre d'adresse de votre navigateur, vous pourrez y lire quelque chose qui ressemble à ceci: 'gallery_id=1'. Le nombre est l'identifiant de la galerie (ce que vous avez besoin).
- Le nom court de la galerie d'images: Vous avez dû remplir ce champ en créant la galerie dans les préférences.
- Maintenant, sortez de la galerie et allez dans Modèles.
- Vous aurez sûrement remarqué qu'ExpressionEngine vous a créé un nouveau groupe de modèles qui porte le nom de votre galerie d'images.
- Sélectionnez-le dans la colonne de gauche pour que les modèles apparaissent dans la colonne de droite
Modèles
Nous allons utiliser 2 modèles: "category" et un nouveau.
Modèle images
- Dans le groupe de modèles de votre galerie, créez un nouveau modèle RSS, appelez-le "images".
- Allez dans les préférences du groupe de modèles de votre galerie, et activez le PHP dans les modèles "category" et "images".
- Toujours au même endroit, paramétrez l'analyse du PHP en entrée pour le modèle "images".
- Maintenant que c'est prêt, vous allez ajouter ce code dans le modèle images.
images.txt
Il faut changer 3 variables dedans:
- gallery_url - remplacez par l'url de votre galerie (attention de ne pas oublier le dernier slash)
- gallery_name - nom court de la galerie d'images
- gallery_number - numéro de la galerie (identifiant)
- Enregistrer les modifications de votre modèle.
Modèle category
- Dans l'entête de votre page, nous allons appeler le script SWFObject que vous avez uploadé avant.
<script type="text/javascript" src="http://www.monsite.com/scripts/swfobject.js"></script>
- Nous allons ajouter un peu de PHP pour savoir quelle catégorie ExpressionEngine va devoir afficher.
<?php $cat_id = '{segment_3}'; $cat_id = substr($cat_id, 1); ?>
- Pour utliliser SWFObject, nous allons ajouter un div qui aura pour identifiant flashcontent. Ce sera l'endroit où sera affiché le SlideShow.
<div id="flashcontent" align="center"> </div>
Nous allons pouvoir ajouter notre code du SWFObject.
- Remplacez les 2 urls, en utilisant celles appropriées à votre site
- Le 550 et 400 sont la longueur et la hauteur de l'animation
- 7 est la version de flash utilisée
- #FFFFFF est la couleur d'arrière-plan de l'animation
<script type="text/javascript">
// <![CDATA[
var fo = new SWFObject("http://www.monsite.com/images/photos/slideshowpro.swf", "foo", "550", "400", "7", "#FFFFFF");
fo.addVariable("xmlfile", "http://www.monsite.com/index.php/gallery/images/?album_id=<?php echo $cat_id;?>");
fo.addParam("scale", "exactfit");
fo.addParam("menu", "false");
fo.write("flashcontent");
// ]]>
</script>
- Sauver le modèle
- Alternativement, vous pouvez vous baser sur ce modèle de catégorie.
Vous pouvez également utiliser à d'autres endroits sur le site, dans les pages de contenu,...
Rédigé par , le 14/07 à 05:23 PM
