PluXml.org

Blog ou CMS à l'Xml

Afficher toutes les images d'un répertoire(Edit)

Voici une solution rapide pour mettre en place une galerie dans une page statique.

L'idée est d'afficher toutes les images d'un dossier.

Installation(Edit)

1. Créez une page statique et copiez dedans le code suivant

Pour PluXml 5.1.1+

<?php
# Nom du dossier images à renseigner
$dir = 'data/images';
# Récupération et affichage de la liste des images sous forme de liste
$glob = plxGlob::getInstance($dir);

if ($files = $glob->query('/[a-z0-9-_]+.tb.(jpg|gif|png)$/i')) {
    echo '<ul class="galerie">';
    foreach($files as $filename) {
        $file = $dir.'/'.$filename;
        echo '<li><a href="'.str_replace('.tb', '', $file).'"><img src="'.$file.'" alt="" /></a></li>';
    }
    echo '</ul>';
}
else echo "Aucune image";
?>

Pour PluXml 5.0+

<?php
# Nom du dossier images à renseigner
$dir = 'data/images';
# Récupération et affichage de la liste des images sous forme de liste
$glob = plxGlob::getInstance($dir);

if ($files = $glob->query('/[a-z0-9-_]+.(jpg|gif|png).tb$/i')) {
    echo '<ul class="galerie">';
    foreach($files as $filename) {
        $file = $dir.'/'.$filename;
        echo '<li><a href="'.str_replace('.tb', '', $file).'"><img src="'.$file.'" alt="" /></a></li>';
    }
    echo '</ul>';
}
else echo "Aucune image";
?>

Pour PluXml 4.3

<?php
# Nom du dossier images à renseigner
$dir = 'data/images';
# Récupération et affichage de la liste des images sous forme de liste
$glob = new plxGlob($dir);
if ($files = $glob->query('/[a-z0-9-_]+.(jpg|gif|png).tb$/i')) {
    echo '<ul class="galerie">';
    foreach($files as $filename) {
        $file = $dir.'/'.$filename;
        echo '<li><a href="'.str_replace('.tb', '', $file).'"><img src="'.$file.'" alt="" /></a></li>';
    }
    echo '</ul>';
}
else echo "Aucune image";
?>

2. Pour définir un répertoire différent de celui prévu par défaut, modifiez la ligne suivante en remplaçant le chemin par celui de votre galerie.

# Nom du dossier images à renseigner
$dir = 'data/images';

Ainsi vous pouvez définir un répertoire tel que data/images/galerie1 mais notez cependant qu'il est toujours préférable de stocker votre galerie dans le dossier data/images de votre pluxml.

3. Uploader vos images à l'aide PluXml et les mettre dans le répertoire que vous avez choisi au point 2. Si vous uploadez vos images à l'aide d'FTP (par exemple) vous aurez des erreurs car les miniatures ne seront pas créées (sauf si vous prenez le soin de le faire et n'oubliez pas l'extension en .tb)

Personnalisation de l'affichage de la galerie(Edit)

Il ne manque plus qu'un peu de css pour mettre en forme l'affichage de la galerie.

Copiez le code suivant dans le fichier style.css de votre thème.

ul.galerie  {
	margin: 0;
	padding: 0;
	text-align:center;
}
ul.galerie li {
	float:left;
	margin: 0px 0 20px 0; /* changer 20px pour modifier le nombre d'images par colonne */
	padding: 0;
	list-style: none;
	width: 200px; /* tailles des miniatures */
	height: 100px;
}
ul.galerie li img {
	border: 1px #dedede solid; /* bordure autour des images */
	padding: 3px 3px 3px 3px;
}