Bonjour à tous,

Nous avions commencé il y a peu la fabuleuse aventure qu’est la création d’une galerie photo. En l’histoire de quelques lignes nous avions déjà une jolie page qui affichait les miniatures des photographies présentes aux côtés de notre script.

Aujourd’hui tentons d’aller un peu plus loin en proposant la navigation dans des sous-galeries créés par des répertoires dans mon répertoire principale et, au passage, tâchons de rendre cela plus joli!

Notre première tâche pour aujourd’hui n’est pas mince. Il nous faut proposer des sous-galeries.
Evidemment, je n’ai pas envie de dupliquer mon script autant de fois que j’ai de sous-répertoire. Or, je sais que par défaut chez certains hébergeurs (cela de la configuration par défaut d’apache), lorsque que je ne place pas d’index dans un dossier et que j’y accède, je sais y voir les fichiers et naviguer dans ses sous-dossiers.
Malheureusement, je ne peux pas (du moins, dans l’état actuel de mes compétences: je ne sais pas) modifier cet affichage par défaut. Je sais seulement le contrecarrer en indiquant qu’il n’y a pas d’index et customiser mon erreur 404.

Et c’est là que ce situe notre chance. En effet, nous pouvons pointer nos erreurs 404 vers un même fichier PHP ce qui rend notre affichage d’erreur dynamique.
Dans un fichier .htaccess à la racine de mon répertoire photo, j’aurai donc quelque chose comme ceci:

Cependant, si je pointe les fichiers et dossier par rapport à mon script, ce seront toujours les mêmes affichés et ce, peu importe le sous-répertoire consulté.
C’est autour de la variable $_SERVER de venir à notre rescousse puisque lorsqu’on navigue et que l’on tombe sur une erreur 404, l’on n’est pas redirigé vers une autre page, seul est redirigé l’affichage provenant de notre fichier explore.php (pour reprendre ce que j’ai indiqué dans mon .htaccess).
Je peux donc récupérer l’URL appelé via: $_SERVER[‘REQUEST_URI’] et indiquer à mon script de scanner dans ce répertoire-là et non pas juste à proximiter de mon fichier explore.php

Après quelques modifications de notre script précédent, notamment en ce qui concerne l’encode des URLs, mais surtout en tenant compte de l’emplacement relatifs des fichiers et dossiers, nous arrivons à ceci:

Enregistré dans comme explore.php dans notre dossier photos et agrémenté de deux sous-répertoires et de mes 4 photos de windaubiens, on se retrouve avec ceci:

Sympa non?

Oui mais ce n’est pas tout! Nous avions une seconde tâche aujourd’hui: rendre cela un peu plus joli.
Vous l’aurez remarqué, j’ai déjà commencé puisque dans le code indiqué ci-dessus, s’est glissée une nouvelle ligne:

Vous l’aurez compris, nous pouvons utiliser les effets et autres fonctions de ma classe image pour rendre cela plus agréable à l’oeil. Mais une chose est visuellement désagréable dans l’illustration ci-dessus: le bord ajouté/imposé par la navigateur sur les images mises en lien.
Pour l’enlever, rien de plus simple: Il suffit d’ajouter une règle CSS qui l’indique!
Pour ceux qui n’ont pas trop l’habitude de jouer avec les feuilles de style, il suffit d’imbriquer ce code HTML autour du code susmentionné pour régler l’affaire:

Ce qui donne quelque chose comme ceci:

Vous remarquez que j’ai aussi ajouté 2 lignes de plus dans la création de mes miniatures, lesquelles?
Suite au prochain épisode!

Tags: arrondir, CSS, fichiers, Galerie, GD, Images, lister, navigation, PHP

Cet article a été publié le mercredi 24 septembre 2008 à 14:43 et est classé dans CSS, GD, PHP. Vous pouvez en suivre les commentaires par le biais du flux RSS 2.0. Les commentaires et pings sont fermés.