SimpleViewer : Script de génération automatique d'une galerie photo en PHP.
Simpleviewer est un système permettant de créer une galerie photo facilement customisable d'un rendu très agréable. Néanmoins, il peut s'avérer à la longue assez fastidieux de gérer sa (ou ses) galerie(s). En effet, à chaque ajout de photo il faut :
- créer la vignette correspondante,
- éditer le fichier XML pour y ajouter la photo et son éventuel commentaire,
- uploader la photo, la vignette et le fichier XML.
Les customisations qui suivent ont été effectuées avec la version 1.8 de SimpleViewer.
Les vignettes
Pour se passer de l'étape de création de la vignette, il suffit tout simplement d'indiquer le même répertoire pour les images et pour les vignettes dans les paramètres du fichier XML.
imagePath="galerie/" thumbPath="galerie/"Les vignettes seront un peu plus longues a charger (et pour cause, elle sont maintenant générées a partir des "grandes" photos) mais SimpleViewer les charge progressivement donc le rendu reste très acceptable surtout si on a prit soins d'optimiser la taille des photos, c'est a dire en les passant en 72 dpi et en leur donnant dès le début une taille cohérente.
Générer la galerie
Mais tout cela ne nous dispense toujours pas de l'édition du fichier XML. On peut trouver sur internet des scripts permettant de générer ce fichier automatiquement mais avec l'inconvénient de perdre les légendes déjà renseignées. On pourrait éventuellement faire lancer ce script a chaque affichage de la page mais il y a mieux : Au lieu d'appeler notre fichier XML, appelons directement un fichier PHP, comme ceci :
fo.addVariable("xmlDataPath", "galerie.php");(voir le complément "Problèmes de rafraîchissement" en fin de l'article)
Il ne nous reste plus qu'à faire en sorte que ce script PHP nous renvoi les même informations que l'on retrouve dans le fichier XML. Le script PHP ci-après scanne le répertoire 'galerie', en extrait toutes les photos, et écrit de tel sorte que SimpleViewer puisse les afficher. Pour plus de souplesse, un tri a été ajouté après le scanne, il suffit donc de renommer les fichiers photos en commençant par des chiffres (01, 02 03, etc... ou 001, 002, 003, etc...) et la galerie les affichera dans cet ordre.
<?
function GetDirArray($repertoire) {
$handle=opendir($repertoire);
while ($file = readdir($handle)) {
if ($file != "." && $file != ".." && $file != "index.html") // * 1
{
$ret[count($ret)] = $file;
}
}
closedir($handle);
sort($ret); // permet de trier les photos
return $ret;
}
$la_galerie = GetDirArray('galerie');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<simpleviewerGallery maxImageWidth="800" maxImageHeight="600" textColor="0x000000" frameColor="0xffffff" frameWidth="5" stagePadding="20" thumbnailColumns="3" thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="galerie/" thumbPath="galerie/">';
for($i=0;$i<sizeof($la_galerie);$i++) {
echo '<image><filename>'.$la_galerie[$i].'</filename><caption></caption></image>';
}
echo '</simpleviewerGallery>';
// * 1 : afin de ne PAS prendre en compte les . et .. ou même
// encore l'éventuel fichier racine index.html (ou .htm) du
// répertoire en question lors de la "génération" du XML.
?>Comme pour le fichier XML original, la ligne d'options reste complètement modifiable.
Afficher les commentaires
Que reste il à faire ? Les commentaires des photos. Afin d'avoir le moins d'opérations à faire, le plus simple, semble-t-il, serait d'insérer les légendes dans le nom du fichier et de les faire extraire par le script PHP. Le script qui suit extrait les photos du répertoire 'galerie', les tri et affiche le commentaire idoine.
<?
function GetDirArray($repertoire) {
$handle=opendir($repertoire);
while ($file = readdir($handle)) {
if ($file != "." && $file != ".." && $file != "index.html")
{
$ret[count($ret)] = $file;
}
}
closedir($handle);
sort($ret);
return $ret;
}
$taille_nro = 3; // Nombre de caractères qui composent la numérotation
$la_galerie = GetDirArray('galerie');
echo '<?xml version="1.0" encoding="UTF-8"?>';
echo '<simpleviewerGallery maxImageWidth="800" maxImageHeight="600" textColor="0x000000" frameColor="0xffffff" frameWidth="5" stagePadding="20" thumbnailColumns="3" thumbnailRows="3" navPosition="left" title="" enableRightClickOpen="true" backgroundImagePath="" imagePath="galerie/" thumbPath="galerie/">';
$debut_com = $taille_nro + 1;
for($i=0;$i<sizeof($la_galerie);$i++) {
$npic = $la_galerie[$i];
$capt = substr($npic, $debut_com, -strlen(strrchr ($npic, '.')));
$capt = str_replace("-", " ", $capt);
echo '<image><filename>'.$npic.'</filename><caption>'.$capt.'</caption></image>';
}
echo '</simpleviewerGallery>';
?>Attention, pour nommer les fichiers du répertoire il faut désormais respecter la norme suivante :
001-commentaire-de-ma-photo.jpg- numéro de la photo pour le tri (ici 3, modifiable en changeant la valeur de 'taille_nro')
- suivi d'un tiret (tiret "moins" ou "6")
- suivi de la légende, chaque mot devant être séparé par notre tiret.
(Ne pas mettre d'accents, de cédilles, etc...)
Et voila, nous avons maintenant une galerie SimpleViewer dont la gestion est très simplifiée : Plus de vignettes à créer, plus de fichier XML à éditer puisque le script PHP se charge de lire le répertoire des photos, de les trier, et d'extraire les commentaires du nom du fichier. Les seules actions qui nous restent à faire sont : nommer correctement le fichier et le télécharger dans le répertoire de la galerie.
Là encore, on augmente le temps de chargement de la page car le script doit lire le contenu du répertoire. Néanmoins, les tests effectués sur differents sites apparaissent comme concluants.
Problèmes de rafraîchissement ?
Il semblerait que parfois se pose un problème de rafraîchissement de la galerie entre deux ajouts de photo. En effet, certains navigateurs conservent le XML (enfin, le PHP dorénavant) en cache et ne prennent pas en compte un éventuel fichier plus récent. Pour contourner ce soucis, une petite ruse consiste à passer un "faux" paramètre au fichier PHP, comme ceci :
fo.addVariable("xmlDataPath", "galerie.php?val=<? echo time(); ?>");Cette opération passe en paramètre la valeur retournée par la fonction time() au fichier PHP, mais elle ne sera pas utilisée. en PHP, time() retourne le nombre de secondes écoulées depuis le 1er janvier 1970. Cette valeur sera différente à chaque appel de la page et de ce fait, le navigateur, considérant qu'il s'agit d'un fichier différent à chaque fois, le téléchargera de nouveau.
Aller plus loin
Pour se libérer du téléchargement en FTP, on pourrait facilement écrire un script d'upload des images, et on pourrait alors imaginer que ce script effectue lui même le formatage du nom des photos.
Cette galerie nécessite Macromedia Flash.
Si Flash est déjà installé, cliquer ici pour voir la galerie.
Alive Pixel met ces ressources à votre disposition afin de facilité la création de site internet.
