12.3 Exposé : une galerie basée Flash

Les galeries de photos et de vidéos consultables deviennent monnaie courante avec l’avènement du Web 2.0 notamment grâce à la multiplication des accès Web à haut débit. Les sites tels que Flickr (www.flickr.com) ou YouTube (www.youtube.com) sont très faciles d’emploi et donnent accès à des masses de contenus multimédias.

Les attentes en termes de présentation des données ne cessent d’augmenter. Une simple énumération statique de photos commence à donner un aspect désuet.

Exposé est un composant basé sur le format graphique Adobe Flash qui sert à afficher et à gérer des photographies, des graphiques et des vidéos. Il est visuellement très attrayant (Figures 12.36, 12.37 et 12.38, plus loin).

Voici ce que permet Exposé :

• création de collections et d’albums en nombre non limité ;
• retaille des images lors du transfert sur le serveur ;
• génération de miniatures pour les albums ;
• lecture de vidéos via le lecteur Flash Player dans un format compressé ;
• ajout de commentaires audio aux images individuelles.

Il existe en outre une variante autonome locale de Exposé pour constituer les collections confortablement avant de les poster.

Le format Flash est assez compact pour transférer les images sans trop d’attente sur une liaison
Web lente.

L’outil Album Manager servant à gérer les documents dans la partie Administration réclame quelques éléments spécifi ques au niveau de PHP : la librairie GD et les extensions DOMXML et iconv. Dans l’environnement d’exploitation local XAMPP lite, ces conditions sont remplies au niveau du serveur. Si votre fournisseur d’accès ou hébergeur ne propose pas ces éléments, une solution existe (revoir l’étape 5 de l’installation de Joomla au Chapitre 1 et la section 6.4 du Chapitre 6). Du côté public (Frontend), il faut au minimum que le navigateur du visiteur soit doté du lecteur Flash Player en version 8. C’est le cas d’environ 96 % des navigateurs.

12.3.1 Installation

Pour mettre en place le composant principal de Exposé, vous installez le fichier com_expose_4.6.2.zip depuis le CD-ROM d’accompagnement ou le site du projet (www.gotgtek.com). Rappelons la procédure : EXTENSIONS > INSTALLER/DÉSINSTALLER, bouton PARCOURIR, choix du fichier et bouton TRANSFERT DE FICHIER & INSTALLATION.
Surveillez bien les messages de fin d’installation (voir Figure 12.35). Si certains sont affichés
en rouge, vérifiez que vous avez basculé Joomla! en mode compatible en activant le Plugin
Legacy (EXTENSIONS > GESTION DES PLUGINS). Lisez aussi la remarque qui suit. Notez bien votre mot de passe !

Figure 12.33 Fichiers à placer dans /components/com_expose.

À la date de mise sous presse du livre, le composant Exposé souffrait encore de quelques problèmes de stabilité en rapport avec le plugin Legacy de Joomla!. C’est étonnant dans la mesure où ce composant ne fait que se servir de Joomla! comme zone d’hébergement de ses affichages. Au cas où, voici la série d’instructions SQL à faire exécuter pour créer quelques enregistrements adéquats dans une table de la base de données :

INSERT INTO `jos_components` (`id`, `name`, `link`, `menuid`, 
   `parent`, `admin_menu_link`,
   `admin_menu_alt`, `option`, `ordering`, 
   `admin_menu_img`, `iscore`, `params`)
   VALUES(51, ‘Expose’, ‘option=com_expose’, 0, 0, ‘’, ‘Expose’, 
   ‘com_expose’, 0,’../administrator/
   components/com_expose/expose_icon.png’, 0, ‘’),
(52, ‘Manage Albums’, ‘’, 0, 51, ‘option=com_expose&task=manage’, 
   ‘Manage Albums’, ‘com_expose’,
   0, ‘../administrator/components/com_expose/manage.png’, 0, ‘’),
(53, ‘Configuration’, ‘’, 0, 51, ‘option=com_expose&task=config’, 
     ‘Configuration’, ‘com_expose’,
   1, ‘../administrator/components/com_expose/confi g.png’, 0, ‘’),
(54, ‘Manual’, ‘’, 0, 51, ‘option=com_expose&task=manual’, ‘Manual’, 
     ‘com_expose’, 2, ‘../
 administrator/components/com_expose/docs.png’, 0, ‘’);

Dans ce cas, il faut également décompresser manuellement le composant dans un sous-dossier puis copier les fichiers dans deux sous-dossiers de l’installation de Joomla! (Figures 12.33 et 12.34). La destination de chaque fichier est décrite dans le fichier expose.xml

Figure 12.34 Fichiers à placer dans /administrator/components/com_expose.

Si l’installation du composant échoue ou si la solution de dépannage vous effraie, tenez-vous informé de la solution qui ne saurait tarder à apparaître.

Figure 12.35 Messages de bonne installation de Exposé.

12.3.2 Intégration de Exposé au site Web

Au départ, le composant est installé avec des données d’exemples (deux photos et une vidéo). Pour y accéder, il faut créer un élément de menu qui y fasse référence. Créons une nouvelle entrée dans notre menu Livre JOOMLA! 1.5.

1. Choisissez la commande MENUS > LIVRE JOOMLA! 1.5 puis le bouton NOUVEAU.

2. Définissez les paramètres d’un nouveau lien en choisissant comme type Expose qui est apparu
dans l’arborescence des types. Donnez à l’élément le nom Galerie multimédia (revoyez si nécessaire la section 7.4 du Chapitre 7).

3. Basculez dans le volet du site et cliquez sur le nouveau lien. Vous voyez apparaître deux dossiers : une Collection (qui contient des albums) et un Album vidéo.

4. Cliquez dans la fl èche de droite de la collection pour accéder à ses détails. Le chiffre correspond au nombre de documents que contient le dossier (l’album). La collection d’exemples contient un
seul album qui contient deux images (voir Figure 12.36).

5. En cliquant sur l’album (Sample album), vous accédez à la visionneuse appelée Image Strip (voir Figure 12.37).

6. Vous circulez dans ce bandeau avec le pointeur de souris. L’image du centre subit un léger effet de zoom. Vous pouvez aussi cliquer sur les triangles s’ils s’en présentent.

7. Un clic de plus vous amène à l’affichage d’une image en grand format (voir Figure 12.38).

Figure 12.36 Vue générale de la galerie Exposé.

Voici les opérations possibles :

• naviguer parmi les images par les boutons en bas de fenêtre ;
• faire afficher un diaporama automatique ;
• afficher la visionneuse par le bouton SHOW IMAGE STRIP en bas à droite ;
• remonter aux collections par le bouton SELECT ALBUM en bas à droite ;
• afficher une image en grand format en cliquant ;
• voir dans quel albums vous vous trouvez ;
• afficher un écran d’aide sur les symboles.

Figure 12.37 La visionneuse d’images Image Strip.

Figure 12.38 Vue individuelle.

Vidéos

8. Remontez jusqu’au premier niveau pour accéder à la vidéo. Le principe du bandeau de visionnage reste en vigueur.
9. Cliquez dans l’aperçu pour lancer la lecture de la vidéo sélectionnée par sa position centrale (voir Figure 12.39).

Figure 12.39 Lecture d’un fichier vidéo.

Voici les opérations possibles :

• navigation dans la vidéo ;
• arrêt/marche du son en cliquant sur le symbole de haut-parleur et réglage du volume.

12.3.3 Gestion des documents avec Album Manager

Pour peupler vos galeries avec vos images et vos vidéos, choisissez la commande COMPOSANTS > EXPOSÉ > MANAGE ALBUMS. Vous devez vous identifier. Le mot de passe initial est manager. N’hésitez pas à le changer au moyen du bouton associé, puisque vous pouvez le faire mémoriser pour cette machine via l’option SAVE (voir Figure 12.40).
Le panneau de gestion présente plusieurs volets (voir Figure 12.41).

Figure 12.40 Album Manager – Connexion.

Figure 12.41 Album Manager – Administration.

1. Zone de création de collections et d’albums. Le volet au-dessus sert à déplacer (MOVE TO), renommer (RENAME) et supprimer un élément (DELETE).

2. Sélectionnez ici une image puis cliquez sur CREATE ALBUM THUMB pour produire une miniature de couverture d’album.

3. Le bouton UPLOAD PHOTOS sert à désigner un ou plusieurs fichiers du disque dur. Les images en taille réduite sont générées automatiquement. Vous pouvez donc désigner des images en format natif.

4. Il en va de même pour les vidéos au format fl v via le bouton UPLOAD VIDEOS. Vous pouvez les convertir dans ce format avec la version d’essai de Dreamweaver CS3 fournie sur le CD-ROM (www.adobe.com) ou plus simplement avec l’outil Freeware Riva FLV Encoder 2 (www.rivavx.com) fourni aussi sur le CD-ROM.

5. Le bouton ADD FROM BUCKET est très pratique. Récupérez des fichiers distants via FTP et stockez-les dans le dossier suivant :

  [CheminJoomla!]components/com_expose/expose/manager/bucket

Vous pourrez ensuite puiser dans ce réservoir via Add from Bucket.

6. Le bouton PARAMETERS permet de décider des tailles des versions réduites des images et des vidéos. Pour les photos, il est possible d’ajouter un fi ligrane de propriétés (voir Figure 12.42).
Vous quittez le panneau de gestion par le bouton LOGOUT en bas à droite.

12.3.4 Désinstallation

La suppression du composant est classique : choisissez la commande EXTENSIONS > INSTALLER/ DÉSINSTALLER et accédez à la page COMPOSANT (voir Figure 12.43). Sélectionnez EXPOSÉ et cliquez sur DÉSINSTALLER.

Figure 12.42 Paramètres de Exposé.

Figure 12.43 Désinstallation d’un composant.

12.3.5 Album Manager en programme autonome

La manipulation à distance de fichiers volumineux peut devenir peu commode. C’est la raison pour laquelle a été conçue une version locale autonome appelée Album Manager. Elle existe pour Windows et pour Mac OS X.

Sous Windows, double-cliquez sur le nom du fichier AlbumManager-2.7-Setup.msi pour l’installer. Sous Mac OS X, vous installez le fichier AlbumManagerMac.dmg. Tous deux sont fournis sur le CD-ROM. Album Manager cherche les documents dans le dossier suivant :

  [CheminJoomla!]components/com_expose/expose

Si vous travaillez en local, vous pouvez directement désigner ce dossier au démarrage du programme Album Manager.

Album Manager permet de modifi er les contenus et la structure. L’utilisation est identique à celle de la version Web (voir Figure 12.44).

[no picture]

Figure 12.44 Le programme autonome Album Manager sous Windows.

Vous pouvez utiliser Album Manager pour gérer les documents multimédias d’un site. Rapatriez les documents en copiant le dossier depuis le Web via FTP, procédez à vos modifications localement puis remontez le tout sur le serveur.