Date de publication: le dimanche 4 septembre 2011 à 00h49
Dernière modification: par Pascal BOYER le dimanche 13 novembre 2011 à 18h11
» Article suivant: Présentation du CMS
Cette page présente une galerie photos, peut-être plus exactement un système de visionnage de photos, réalisé par mes soins en assemblant plusieurs briques que j'ai modifiées pour les adapter aux besoins de mon projet.
Démo galerie photos pour eZ Publish
Un exemple de ce travail est disponible sur cette page (pour les galeries à accès privé utilisez le couple demo / demo pour vous connecter):
:
Hormis les photos de la galerie «Graffiti», toutes les photos ont été trouvées grâce à «Google image». J'ai systématiquement effacé les signatures, logos et autres inscriptions qui se trouvaient sur ces photos pour des raisons esthétiques uniquement.
Démo d'un vidéorama pour eZ Publish
En plus du dispositif de diaporama, j'ai intégré une fonction vidéorama entièrement gérée par eZ Publish. Ce vidéorama utilise la balise <video> de HTML 5 (et aucun javascript particulier) et diffuse, pour l'exemple dont je donne un lien ci-dessous, des vidéos au format OGG ( voir ici ):
- Masque art à Venise (je vous laisse découvrir les trois liens permettant d'afficher les 3 vidéos proposées par ce diaporama)
Contexte du développement de cette galerie photos
Il y a, à l'origine de ce projet, l'envie évidente de disposer en ligne de mes photos pour les montrer et les partager avec mes proches.
Il y avait également le désir de développer sous eZ Publish un outil le plus complet et le plus beau possible (ce dernier objectif étant bien sûr laissé à l'appréciation de chacun ;-) ) afin de combler une lacune d'eZ Publish qui, bien qu'intégrant et proposant par défaut un système de galerie photos, reste un outil un peu trop simple à mon sens.
Enfin, il y a eu la découverte sur internet d'un projet qui m'a rapidement séduit par ses caractéristiques et que j'ai donc décidé de m'approprier et d'adapter aux objectifs que je me suis fixés. Le projet initial auquel je fais référence est:
La caractéristique qui a immédiatement retenue mon attention est la capacité de l'outil à adapter la taille des photos affichées, lorsque l'on passe en mode «Afficher la taille réelle», à la taille de la fenêtre du navigateur de l'utilisateur (et non à la taille de l'écran de l'appareil utilisé).
Caractéristiques de la galerie photos pour eZ Publish
Compatibilités constatées
- Windows 7: Firefox 5 et 6 : ok
- Windows 7: Chrome et Iron Chrome: ok
- Windows 7: Safari 5: ok
- Windows 7: Opera 11.50: ok
- Linux: Firefox 5 et 6: ok
- Linux: Chrome et Iron Chrome: ok
- Linux: Opera 11.50: ok
- MAC OSX: Safari 5: ok
- MAC OSX: Firefox 5 et 6: ok
- MAC OSX: Chrome: ok
Compatibilités partielle
- Windows 7: IE9 - n'affiche aucune règle en CSS3 et problème de génération de la taille des images (ce dernier point est un problème javascript)
Incompatibilité absolue
- toutes les versions d'IE inférieures à la version 9.
:
Le temps passé à rendre mon travail compatible avec IE6, 7 et 8 est de zéro heure, zéro minute et zéro seconde ;-)
Implémentation dans eZ Publish
Dans sa forme actuelle, la galerie photo (l'outil de visionnage) n'est rien d'autre qu'un siteaccess (nommé par exemple photos_demo).
En dupliquant ce siteaccess (et en le renommant) il devient aisé de créer autant de systèmes de visionnage de photos que souhaités. Un même site eZ Publish peut donc contenir une infinité de thèmes de galeries photos (c'est à dire une infinité de page «Home»).
:
Page «Home»: c'est le dossier racine du système de visionnage. Il sert de page d'entrée/d'accueil à l'outil. Ce dossier contient autant de rubriques que souhaitées. Une installation eZ Publish peut contenir une infinité de ce type de dossier racine.
Rubrique: c'est un dossier pouvant contenir une infinité de galeries photos (de préférence toutes sur le même thème). Les rubriques sont affichées par la page «Home».
Galerie photos: c'est un dossier contenant une série de photos. Lorsque l'on clique sur le nom d'une rubrique, s'affiche alors la liste de toutes les galeries photos contenues par cette rubrique.
Les javascripts utilisés
Le framework retenu pour faire fonctionner la presque totalité des fonctionnalités du système de visionnage est jQuery 1.6.2
- jquery.min.js (version 1.6.2)
- 01_yahoo-dom-event.js (nécessaire au système de notation ezstarratting)
- 021_galleria-1.2.5.min.js (javascript général du projet Galleria)
- 022_galleria.twelve.min.js (relatif au thème payant «twelve» du projet Galleria)
- 031_highslide-full.packed.js (sert à l'affichage des popup «Googlemap» - indépendant de jquery)
- 041_jquery.easing.1.3.js
- 042_jquery.coda-slider-2.0.js (sert à l'animation de la pagination des rubriques de niveau 1 et 2)
- 05_jquery.toggleElements.pack.js (sert à l'animation de l'affichage des commentaires)
CSS
- Utilisation intensive des propriétés CSS3 - il n'y a que très peu d'images participant au design:
- toutes les ombres
- toutes les transparences
- toutes les transitions sur les boutons
Performances
- Outils google Page Speed : 78/100
- Outils Yahoo! YSlow : Grade A
- Validité HTML : totale
La page Home
- Choix de la pagination : nombre de rubriques générales à afficher par page (2 à 15 - 4 par défaut)
- Choix oui/non de l'affichage du nombre de rubrique sur la page «Home»
- Choix du texte/titre affiché (e.g Voir et revoir...)
- Possibilité d'associée une photo spécifique à chaque rubrique
- Les photos N&B sont générées automatiquement
Pour chaque galerie photos:
- Ajout par lot des photos de la galerie grâce à l'extension ezmultiupload
- Une case à cocher permet de définir si la galerie sera ou non à accès privé (par identifiant et mot de passe)
- Choix de la pagination des pages «Galeries» : nombre de galeries photos à afficher par page (3, 6 ou 9 - 6 par défaut)
- Possibilité de rédiger une description générale (s'affiche automatiquement en survolant le haut des photos - sera identique pour toutes les photos)
- Possibilité de définir le nombre de photos pré-chargées (de 0 à 100)
- ce choix impacte directement le temps de chargement de la galerie
- en mode «Afficher la taille réelle» plus le nombre est grand plus le temps de transition vers la photo suivante est faible
- Possibilité d'associer une image spécifique à la galerie
- sinon, la première photo de la galerie sera choisie (devra être en mode portrait)
- Les photos N&B sont générées automatiquement
- Une case à cocher permet de définir si l'on souhaite ou non afficher un lien vers la galerie en mode Noir & Blanc
- le cas échéant, la galerie N&B est automatiquement générée (aucune intervention humaine n'est nécessaire)
- mais possibilité également d'indiquer le ID d'un nœud contenant la galerie photos en N&B (auquel cas c'est cette galerie N&B qui sera affichée)
- Possibilité d'indiquer un lien Googlemaps (s'il s'agit de photos d'une ville par exemple - icône représentant un globe)
- Possibilité d'indiquer un lien vers voyage-france.com (s'il s'agit de photos d'une ville par exemple - icône représentant un «i»)
- Obligation de définir le contenu de la balise meta name="description" (pour référencement)
- Obligation de définir le contenu de la balise meta name="keywords" (pour référencement)
- Possibilité de visualiser la galerie en lançant le mode diaporama/slideshow
- Affichage de la liste des photos au format vignette
- un clic sur une vignette affiche la photo correspondante
Pour chaque photo:
- Possibilité de rédiger une description propre à la photo (s'affiche automatiquement en survolant la page affichée)
- Possibilité d'écrire un commentaire (survoler le bas de la photo et cliquer sur le lien ou cliquer sur le lien «Voter»)
- la liste de tous les commentaires est alors consultable
- Affichage du nombre de commentaires s'il y en a (survoler le bas de la photo)
- Possibilité de voter/noter une photo (affichage de la note globale)
- le lien pour voter et la note globale ne sont affichés que si l'on survole la page affichée
- Affichage, sur la page de vote/commentaire, d'infos EXIF (APN utilisé, ouverture, exposition, focale et sensibilité)
- Redimensionnement automatique des photos affichées en mode «Afficher la taille réelle»
- dans ce mode, la taille maxi des photos correspond à la taille originale des photos qui ont été uploadées
- pour le site de démo, la taille des photos uploadées est : 800x600
- 800x600 est largement suffisant pour des photos en ligne
- plus les photos sont grandes (donc lourdes) plus le temps de chargement d'une galerie est important
Commentaires