Test Extensions II

Quelques captures d'écrans pour vous présenter les principales possibilités de Phoca Gallery. Ce sera probablement beaucoup plus parlant et moins rébarbatif qu'une longue description...

 

Dans "Extensions > Installer/désinstaller", choisissez le package "com_phocagallery_v2.1.0_RC.zip" (lien de téléchargement en bas de page), puis cliquez sur "Transfert de fichier & Installation". Il vous sera alors proposé de procéder à une nouvelle installation ou à une mise à jour.

• les mises ne sont possibles qu'à partir d'une version 1.3.0 ou plus récente de Phoca Gallery.
• après une mise à jour, le paramétrage du composant n'est pas conservé.
• j'ai tenté de faire une mise à jour à partir de la version 2.0.2 qui a été infructueuse.
  

Il ne reste plus qu'à installer les fichiers de langue : décompressez l'archive "fr-FR.com_phocagallery.zip" (lien de téléchargement en bas de page), puis transférez les fichiers extraits (fr-FR.com_phocagallery.ini et fr-FR.com_phocagallery.menu.ini) dans le répertoire language/fr-FR de votre site.

• "fr-FR.com_phocagallery.zip" disponible sur le site de l'auteur semble ne pas correspondre à la version 2.1.0 RC, mais plutôt à la précédente (V 2.0.2).

Phoca Gallery dispose de deux niveaux de paramétrage permettant d'ajuster l'apparence et le comportement de la galerie :

• les paramètres globaux qui permettent de définir le comportement et l'aspect par défaut de la galerie. Ils sont accessibles en cliquant sur "Composants > Phoca Gallery > Control Panel" puis sur l'icône "Paramètres" en haut à droite.
• les paramètres globaux peuvent être redéfinis (overwrite ou en français écrasés) pour chaque lien placé dans les menus en frontend (liens vers listes de catégories, contenu d'une catégorie ou interface utilisateur). Pour accéder aux paramètres des liens, il faudra cliquer sur "Menus", "le menu contenant le lien Phoca", "le nom du lien" puis sur "Paramètres - Composant" dans la partie droite de la page. Ce second niveau permet donc de définir une apparence et un comportement spécifique lors de l'affichage de la page concernée.

La liste détaillée des paramètres disponibles étant très longue, ils seront décrits au fil de leur utilisation, au fil des exemples de ce tutoriel. En voici toutefois une liste avec un rapide récapitulatif :

• "Category View Settings (Thumbnails)" : aspect du contenu d'une catégorie.
• "Categories View Settings (Category List)" : aspect des listes catégories.
• "Detail View Settings" : aspect du diaporama.
• "Description Settings" : description des images (diaporama).
• "Slideshow Settings" : timing du diaporama.
• "General Settings" : réglages généraux (largeur occupée par Phoca Gallery, logo, pagination).
• "PicLens Settings" : autre mode d'affichage du diaporama (que je n'ai pas réussi à faire fonctionner dans cette version).
• "Switch (swap) Image Settings" : grande image au-dessus de vignettes (en mode Category View) avec changement de cette image lors du survol des miniatures par la souris.
• "Overlib Effect Settings" : l'image ou le descriptif est affiché "au bout du curseur de la souris" lors du survol d'une vignette.
• "Watermark Settings" : utilisation d'un filigrane sur les images.
• "VirtueMart Settings" : non testé.
• "User Control Panel Settings" : affichage du panneau de contrôle utilisateur en front end (upload d'images).
• "Rating Settings" : vote des visiteurs.
• "Comment Settings" : commentaires visiteurs.
• "Statistics Settings" : statistiques
• "Geotagging Settings" : localisation géographique
• "Upload Settings" : upload d'images.
• "Thumbnail Creation Settings" : vignettes crées par Phocagallery.
• "Icon Settings" : aucune idée.
• "Images and Windows Size Settings" : taille des vignettes et des fenêtres.

A titre d'exemple nous allons créer une catégorie "Antilles" et de deux sous-catégories soit "Guadeloupe" et "Martinique". La structure de répertoires qui sera utilisée sera identique et sera ainsi composée d'un répertoire racine "Antilles" contenant "Guadeloupe" et "Martinique" dans lesquels nous placeront les images.

Les différentes opérations pour créer ces premières galeries seront effectuées dans l'ordre suivant :

1. création des différentes catégories.
2. création de la structure de répertoires et upload des images dans les répertoires de destination
3. affectation des images aux catégories définies précédemment.

Les catégories servent uniquement à organiser les images. Ainsi nous allons créer une structure de catégories correspondant à celle que nous utiliserons pour les répertoires, soit une catégorie "Antilles" et les sous-catégories (Guadeloupe et Martinique) ayant pour parent la "Antilles" :

• Catégorie "Antilles"
  • Catégorie "Guadeloupe" ayant pour parent la catégorie "Antilles"
  • Catégorie "Martinique" ayant pour parent la catégorie "Antilles"

Dans "Composants > Phoca Gallery" cliquez sur "Catégories", puis sur l'icône "Nouveau" en haut à droite. Entrez un titre (Antilles) et un commentaire, puis sauvegardez. Répétez l'opération pour créer les sous-catégories "Guadeloupe" et "Martinique" que nous allons placer dans la catégorie parente "Antilles" en utilisant le sélecteur "Parent Category". Nous obtiendrons donc :

Sélectionner un répertoire dans la page de création d'une catégorie ne permet pas de lui affecter automatiquement les images s'y trouvant : ce paramètre est destiné uniquement à l'upload d'images à partir du frontend.

Les répertoires et images que nous allons y placer respecteront la structure des catégories créées précédemment :

• Répertoire "Antilles"
  • Répertoire "Guadeloupe" créé dans "Antilles"
    • Image "image_01.jpg" qui sera stockée dans "Antilles/Guadeloupe"
    • Image "image_02.jpg" qui sera stockée dans "Antilles/Guadeloupe"
    • ...
  • Répertoire "Martinique" créé dans "Antilles"
    • Image "image_01.jpg" qui sera stockée dans "Antilles/Martinique"
    • ...

Pour transférer ces images vers le serveur, nous avons trois solutions :

• la plus rapide est d'utiliser un logiciel FTP : il suffira de créer sur votre disque dur la structure de répertoires décrite ci-dessus et y placer les différentes images. Ensuite, il ne restera plus qu'à envoyer l'ensemble dans le répertoire "images/phocagallery" de votre site. Si vous utilisez cette méthode, il faudra vous assurer que le compte utilisateur Apache possède des droits d"écriture et de lecture sur les répertoires et fichiers transférés (pour la création des vignettes...).

• la seconde méthode (la plus simple) consiste à utiliser le gestionnaire de média de Joomla (Site > Gestion des médias). La structure de répertoires sera créée directement dans le serveur dans "images/phocagallery". Les fichiers y seront transférés ensuite répertoire par répertoire. En utilisant cette méthode vous ne rencontrerez pas de problèmes de droits d'accès sur les fichiers et répertoires.

• La dernière solution consiste à utiliser le gestionnaire de fichier intégré à Phoca Gallery, qui pour l'instant n'est pas très ergonomique car à aucun moment n'est affiché le nom du répertoire distant actif. Pour y accéder, cliquez dans "Composants > Phoca Gallery" sur "Images", puis sur l'icône "Multiple Add" en haut à droite.

• • Avant de transférer les images, il faudra créer la structure de répertoires décrite ci-dessus : dans la partie "Folder" entrez "Antilles" puis cliquez sur "Create Folder". Répétez l'opération pour "Guadeloupe" et "Martinique" en vous assurant de bien les créer dans le répertoire "Antilles" (la navigation dans les répertoires se fait dans le cadre "Détails" de cette page, : cliquez sur ".." pour remonter d'un niveau, ou sur le nom du répertoire pour l'ouvrir).

• • Pour effectuer le transfert les images, placez vous dans le répertoire de destination (cadre détails), puis cliquez sur "Browse Files" ce qui ouvrira le sélecteur de fichier. Sélectionnez vos différentes images, puis cliquez sur le bouton "Start upload" pour procéder au transfert.

Evitez d'utiliser des caractères exotiques dans les noms de fichiers comme ', ", #, ... Limitez vous de préférence aux 26 lettres de l'alphabet et aux chiffres.
N'utiliser pas des fichiers trop volumineux, cela évitera pas mal d'erreurs lors du traitement des images (timeout, mémoire insuffisante ...). En général 800 x 600 pixels suffisent amplement pour un site internet.

Les images ayant été uploadées il reste à les affecter aux différentes aux catégories créées précédemment. Lors de cette opération des vignettes (thumbs) de différentes tailles seront générées. Selon l'auteur, il convient de modifier un paramètre de la configuration globale concernant justement la création de ces images miniatures (surtout si vous avez l'intention de gérer beaucoup d'images avec Phoca Gallery) : Dans "Composants > Phoca Gallery > Control Panel" puis sur l'icône "Paramètres" en haut à droite, activez "Pagination Thumbnail Creation" qui se trouve dans la partie "Thumbnail Creation Settings".

• Dans Composants > Phoca Gallery" sur "Images", puis sur l'icône "Multiple Add" en haut à droite.
• Naviguez jusqu'au répertoire contenant les images en cliquant sur le nom des répertoires : dans cet exemple sur "Antilles" puis sur "Martinique".
• Sélectionnez toutes les images en cochant la case se trouvant dans le bandeau "Filename".
• Définissez la catégorie qui contiendra ces images en utilisant le sélecteur "Catégorie".

• Cliquez sur le bouton "Sauver" en haut à droite pour enregistrer les modifications et créer les différentes vignettes des images.

Après avoir créé plusieurs catégories, vous avez la possibilité d'ajouter à l'un de vos menus un lien permettant d'afficher cette liste : par exemple, dans "Menu > Main Menu", cliquez sur l'icône "Nouveau", puis sélectionnez "Phoca Gallery". Ensuite cliquez sur "Phoca Gallery Category List Layout". Entrez un titre, par exemple "Liste des galeries", puis sauvegardez les modifications. Vous obtiendrez ainsi en frontend :

L'aspect de la liste des catégories est configurable, soit dans les paramètres globaux, soit dans les "Paramètres - Composant" du lien lui même. Ci-contre une capture d'écran des paramètres globaux correspondant aux listes de catégories :

• "Number of Colums" est à modifier dans les "Paramètres - Composant". Si vous le modifiez dans les paramètres globaux ce paramètres ne sera pas pris en compte.

• Si une catégorie est vide, elle ne sera pas affichée si vous mettez "Display Empty Categories" (affichage des catégories vides) à "No". Dans le même esprit, si un visiteur n'a pas l'autorisation d'afficher le contenu d'une catégorie (gestion des droits d'accès aux catégories, à voir plus loin dans ce tutoriel), elle ne masquée si vous mettez "Display Unaccessible Categories" (affichage des catégories non autorisées) à "Non".

• "Image Size Beside Categorie Name" permet de modifier l'aspect de la vignette. "Display Subcategories" permet d'afficher ou de masquer l'affichage de la catégorie racine pour une sous-catégorie. "Hide Categories" permet de masquer certaines catégories (non testé).

• Si vous laissez "Show" pour "Display Image Beside Category Name", vous aurez un affichage de type icône et nom de la catégorie à sa droite. Par contre, si vous y mettez "Show (Categories Detail View)" vous obtiendrez un affichage complet (commentaire, nombre d'images, nombre d'affichages, note des visiteurs) :

Si l'un des paramètres de la configuration globale n'est pas pris en compte comme il devrait l'être, tentez de le modifier dans "Paramètres - Composant" du lien.

Pour afficher les images contenues dans une catégorie, vous pouvez naviguer dans l'arborescence des catégories en utilisant un lien "Liste des catégories" décrit ci-dessus, mais aussi ajouter un bouton dans l'un de vos menus permettant d'afficher directement le contenu de cette catégorie.

Dans cet exemple le lien sera placé dans le menu principal, donc dans "Menu > Main Menu", cliquez sur l'icône "Nouveau" en haut à droite, puis sélectionnez "Phoca Gallery". Dans la page affichée continuez en cliquant sur "Phoca Gallery Category Layout". Dans le champ titre entrez par exemple "Martinique" et sélectionnez dans la partie droite "Antilles >> Martinique" en utilisant le sélecteur "Sélectionner une catégorie". Après avoir sauvegardé les modifications vous obtiendrez en frontend :




L'aspect de la liste des images d'une catégorie est modifiable, soit dans les paramètres globaux, soit dans les "Paramètres - Composant" du lien lui même. Ci-contre une capture d'écran des "Paramètres - Composant" du lien dans lesquels on trouve en particulier la possibilité d'ajouter quelques icône aux vignettes :



Deux autres icônes peuvent être affichées sous les vignettes, leur rôle et utilisation sera traité plus tard dans ce tutoriel. Il s'agit de :



Le reste des paramètres reste très classique : couleurs, comportement au survol par la souris, affichage des textes...

• Affichage de la liste des images d'une catégorie en mode "Switch Image" : Ce mode est à activer dans dans les paramètres globaux, dans les "Paramètres - Composant" du lien : une image de grande taille est affichée au-dessus des miniatures. Celle-ci est actualisée lors du survol d'une vignette par la souris.

• Affichage de la liste des images d'une catégorie en mode "Overlib Effect" : Ce mode permet d'afficher, en superposition, le descriptif des images et/ou l'image en grande taille. La transparence de cet effet est ajustable. Je vous conseille de l'utiliser pour afficher uniquement les commentaires avec une opacité à 100% car avec de la transparence, la page est peu lisible.

Le lancement du diaporama se fait, à partir de la liste des images d'une catégorie, en cliquant sur une vignette ou sur l'icône en forme de loupe placée sous l'image.

• Différents modes d'affichage sont disponibles et se configurent en utilisant le sélecteur "Detail Window" de la partie "Detail View Settings" :

• Standard Popup Window
• Modal Popup Box (avec ou sans les descriptifs)
• Shadowbox (que je n'ai pas réussit à faire fonctionner)
• Highslide (avec ou sans les descriptifs)

• Le comportement général du diaporama est modifiable dans la partie "Slideshow Settings :
  • vitesse d'enchaînement des images
  • pause entre deux images
  • affichage aléatoire
  • affichage ou masquage des boutons de contrôle du diaporama. Si ces boutons sont masqués, il sera impossible de lancer le diaporama.
    

• Lors du diaporama, il est possible d'afficher la description des images. En utilisant le sélecteur "Display Desciption" de la partie "Description Settings", vous pouvez choisir de les afficher en mode "Standard Description" ou en "Lightbox". Chacun de ces deux mode ont une configuration qui leur est propre.

• • Standard Description : le descriptif est affiché sous l'image. Lorsque les boutons de commande du diaporama sont présents, le texte du descriptif a tendance à sortir de la fenêtre du diaporama.
  • Lightbox : le texte est superposé à l'image.

Cette partie de la galerie est en cours de développement, mais il est facile de deviner les différentes directions prises par l'auteur :

• Localisation de l'ensemble des catégories de la galerie sur une carte unique. Cette carte est affichée par un lien "liste des catégories", mais pour l'instant sans les différents repères de position des catégories.
• La localisation d'une catégorie est quant à elle est fonctionnelle. Lorsqu'elle est activée, une carte est affichée sous la liste des images d'une catégorie.
• La localisation des images : seule une icône en forme de globe peut être affiché sous chaque vignette (liste des images d'une catégorie).

Avant de commencer il vous faudra obtenir une clé "Google Maps" :

• Pour obtenir cette clé, il faut être titulaire d'un compte Google, dans le cas contraire voici l'adresse pour le créer : compte Google
• Une fois enregistré chez Google vous obtiendrez une clé à cette adresse : Api Google Maps

Il faudra alors copier cette clé dans le champ "Google Maps API Key" de la configuration globale de Phoca Gallery. Cette clé permet l'utilisation de cartes Google dans un site web et dépend de l'Url de ce site.
.

Localisation géographique d'une catégorie (fonctionnel). Tout d'abord il vous faudra entrer les coordonnées géographiques des différentes catégories :

• Dans "Composants > Phoca Gallery > Catégories", cliquez sur le nom d'une catégorie.
• Utilisez le bouton "Coordinates" pour ouvrir une carte Google, carte dans laquelle il faudra placer le repère de localisation ainsi que la valeur de zoom.
• Pour actualiser les champs "Geotagging Longitude", "Geotagging Latitude" et "Geotagging Zoom" se trouvant dans le formulaire en arrière plan, effectuez un clic sur le ballon, puis fermez la carte.
• Sauvegardez le modifications, puis répétez ces opérations pour l'ensemble des catégories.

L'étape suivante consiste à activer l'affichage de la carte dans la liste des images d'un galerie. Vous pouvez le faire dans la configuration globale, à condition d'avoir localisé l'ensemble des catégories, ou dans les paramètres des liens "liste des images d'une catégorie". Si les coordonnées d'une catégorie sont absentes, vous obtiendrez un message d'avertissement lors de son affichage :

• Dans la partie "Geotagging Settings" des paramètres, mettez "Display Geotagging (Category)" à "Yes" : attention deux lignes portent le même intitulé, il s'agit de modifier le second paramètre.
• Après avoir sauvegardé la configuration, vous obtiendrez en frontend :

Localisation de l'ensemble des catégories (en cours de développement - pour info). Cette fonctionnalité n'est pas encore totalement implémentée dans cette version de Phoca Gallery. Elle devrait permettre de créer un lien "liste des catégories" qui affichera une carte localisant l'ensemble des catégories (dans cette version de Phoca Gallery la carte est affichée, mais aucun repère n'est présent). Pour l'utiliser il faudra probablement :

• localiser l'ensemble des catégories : attention dans cette version de Phoca Gallery, rien ne sera affiché vous ne localisez pas l'ensemble des catégories.
• puis dans la partie "Geotagging Settings" des paramètres, mettre "Display Geotagging (Category)" à "Oui" : attention deux lignes portent le même intitulé, il s'agit de modifier le premier paramètre.

Localisation d'une image (en cours de développement - pour info). Comme pour la précédente, cette fonctionnalité n'est pas encore disponible. Elle devrait permettre de localiser individuellement chaque image de Phoca Gallery. Pour l'utiliser il faudra probablement :

• entrer les coordonnées géographiques de chaque image (ces paramètres sont pour l'instant inexistant).
• puis dans la partie "Geotagging Settings" des paramètres, mettre "Display Geotagging Icon" à "Montrer".

Pour afficher une vidéo provenant de YouTube, il suffit d'ajouter un peu de code dans les attributs des images :

• dans la page YouTube contenant la vidéo que vous désirez afficher, copiez le code se trouvant sous "Intégrer cette vidéo sur votre site " : "<object ....</object>"
• dans "Composant > Phoca Gallery > Images", cliquez sur le nom de l'un des images pour en éditer les attributs.
• collez le code dans le champ "Video Code (YouTube)", puis sauvegarder.

Notes :

• la lecture de vidéo ne fonctionne que lorsque le diaporama est affiché en mode "Nodal popup Box" ou "Standard Popup Window".
• il est possible de modifier la taille des vidéos en changeant les valeurs de "width" et de "height" dans le code. Attention chacune des valeurs est présente à deux reprises.

Cette fonctionnalité est à réserver aux membres (de confiance) de votre site car 10 membres qui placent chacun 100 fichiers de 40 Ko occupent 40 Mo de l'espace disque. Deux cas de figure se présentent :

Paramétrage complémentaire de l'upload :

Dans "Composants > Phoca Gallery > Control Panel", cliquez sur l'icône "Paramètres" en haut à droite. Les paramètres se trouvent dans la partie "Upload Settings" :

• "Display Title Input Form (front upload)" permet de donner un titre à l'image lors de l'upload.
• "Display Description Input form (front upload)" permet d'ajouter un descriptif.
• "Maximum Description Characters" limite le nombre de caractères du descriptif.
• "Maximum Upload Size" correspond au poids maximum d'un ficher en octets.
• "Maximum Category Disk Space" permet de limiter l'espace disque occupé par l'ensemble des fichiers uploadés.
  

Les commentaires et votes sont à activer pour qu'ils soient accessibles en frontend : "Display Rating" et "Display Comments". Il est à noter que seuls les visiteurs authentifiés auront la possibilité de s'exprimer (un seul vote et commentaire par membre).

Les thèmes sont téléchargeables sur le site de l'auteur, à cette adresse.

• pour changer le thème de la galerie, cliquez sur "Composants > Phoca Gallery > Themes".
• sélectionner l'archive contenant les fichiers "thèmes".
• sélectionnez un des 3 modes d'application (en général "Apply to Categories").
• pour terminer cliquez sur le bouton "Upload Fileand Install".

D'après la documentation, la méthode pour incruster des filigranes sur les images est la suivante :

• placer vos fichiers filigranes au format PNG dans le répertoire /images/phocagallery. Ces fichiers doivent porter les noms suivant :
  • watermark-large.png : pour les images de grande taille.
  • watermark-medium.png : pour les tailles moyennes.
• dans la configuration de Phoca Gallery, il faut ensuite activer la création des images avec filigranes en utilisant le sélecteur "Create Watermark", puis choisir la position d'incrustation.
  

Tailles des images et des fenêtres : Dans "Composants > Phoca Gallery > Control Panel", cliquez sur l'icône "Paramètres" en haut à droite, puis descendez jusqu'à la partie "Images and Windows Size Settings" :

• Vous pourrez y ajuster les tailles des images (petites, moyennes et grandes). Attention, ces paramètres sont à ajuster avant l'upload de fichiers.
• La taille de du diaporama (Front Modal Box et Front Popup Window).
• La taille de la fenêtre permettant d'afficher les images dans l'interface d'administration (Admin Modal Box).
  

Les paramètres généraux ("General Settings") :

• Display Phoca Information : permet d'afficher le logo "Phoca" et/ou la version de l'extension. Il n'est pas possible de masquer ces informations.
• Pagination : c'est le nombre d'images affichées par page. Par défaut 20 images sont affichés et un sélecteur permettra aux visiteurs de modifier cette valeur (5, 10, 15, 20 ou 50 images par page).
  

PicLens :

• Cette possibilité n'a pas été testée. En effet l'utilisation de PicLens oblige les visiteurs à installer un module complémentaire disponible uniquement pour Firefox : lien de téléchargement du module PicLens pour Firefox.
  

VirtuelMart :

• Non testé.
  

• Site démo : Liste détaillée des catégories.
• Site démo : Contenu d'une catégorie avec géolocalisation, votes, comentaires et statistiques. Le thème utilisé est "Orange".

Auteur : Jan Pavelka - Téléchargement : www.phoca.cz - Licence : GNU/GPL - Compatibilité : Joomla 1.5 en mode natif - Divers : extensions.joomla.org - Documentation anglaise : www.phoca.cz

Configuration pour les tests : Joomla 1.5.x fr, Serveur mutualisé avec Apache 2.x.x (Fedora) - PHP Version 5.x.x - mySQL 5.x.x, Navigateur Mozilla Firefox 2.x.x.x (le détail des versions est volontairement masqué pour des raisons de sécurité).

< Précédent		Suivant >