Parcourir un répertoire et générer des miniatures

Ne voulant pas de flash sur un site web, mais ayant besoin d’un slider de photos permettant de gérer une gallerie, je suis partie sur une solution javascript. Mais damned, pas possible en javascript de parcourir un répertoire à la recherche de photos, et en plus comment gérer les miniatures? Je me suis penché un peu sur la question, et ai finit par trouver 2-3 outils php intéressant…

DirectoryIterator is back

Ce petit objet php permet de faire des trucs vachement sympas… à partir d’un chemin il va initier un itérateur de fichier. Libre à vous d’aller où bon vous semble dedans ensuite (n’oubliez pas le « / » à la fin du chemin)  :

$directory = "mon/chemin/";
$iter = new DirectoryIterator( $directory );
foreach($iter as $file ) { ... }

Les fonctions intéressantes sont :

  • !$file->isDot() et $file->isFile() qui permettent de tester ensemble si le fichier est un fichier et s’il existe
  • $file->getPath() permet de récupérer le chemin
  • $file->getFilename() permet d’avoir le nom

Dans mon cas, j’ai voulu une organisation à trois niveau :

  • le répertoire slides des images basse définition (« slide », pour l’affichage dans la page)
  • le répertoire des images haute définition (pour l’affichage en light box)
  • le répertoires thumbs des vignettes (« thumb », pour… les vignettes!)

L’idée c’est donc de parcourir le répertoire HD puis :

  • je regarde si pour tel fichier telle image basse défintion existe, si non je la crée.
  • je regarde si pour tel fichier telle vignette existe, si non je la crée.

Ce qui donne concrètement :

//J'écris le début du code HTML qui me permet de générer ma gallerie
$directory = "mon/chemin/";
$iter = new DirectoryIterator( $directory );
foreach($iter as $file ) {
    if ( !$file->isDot() && $file->isFile() ) {
    //Le fichier existe
        //test / création basse définition
        //test / création vignette
    }
    //Je peux écrire le code de l'image qui me permet de générer ma gallerie
}
//Je peux écrire la fin du code qui me permet de générer ma gallerie

La création des images

C’est simple en fait. l’idée c’est de combiner les fonctions imagecreatefromjpeg (ou png), imagecreate, imagecreatetruecolor, imagecopyresized et imagejpeg (ou png). Bon ok, ça parait barbare comme ça, mais regardons plutôt le code :

//Récupération du chemon
$image = $file->getPath()."/".$file->getFilename();
//Création d'un string contenant le chemin et le nom de la miniature
$miniature = $file->getPath()."/thumbs/thumb_".$file->getFilename();
//les dimensions des miniatures par défaut : on force la taille carré, pas de croping ni d'homotéthie
$x = 75;
$y = 75;
$size = getimagesize($image);
if ($size)
{//Si l'image n'est pas en erreur (0ko)
	if ($size['mime']=='image/jpeg' )
	{//Si c'est un jpeg
		$img_big = imagecreatefromjpeg($image); // On ouvre l'image d'origine
		$img_new = imagecreate($x, $y); //On en crée une nouvelle avec les dimensions par défaut
		// création de la miniature
		$img_mini = imagecreatetruecolor($x, $y) or $img_mini = imagecreate($x, $y);
		// copie de l'image, avec le redimensionnement.
		imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
		imagejpeg($img_mini, $miniature, 100);
	}
	elseif ($size['mime']=='image/png' )
	{//Ou si c'est un png
		$img_big = imagecreatefrompng($image);
		$img_new = imagecreate($x, $y);
		$img_mini = imagecreatetruecolor($x, $y) or $img_mini = imagecreate($x, $y);
		imagecopyresized($img_mini,$img_big,0,0,0,0,$x,$y,$size[0],$size[1]);
		imagepng($img_mini,$miniature );
	}
}

Les commentaires parlent d’eux-même. Puis on peut écrire le code HTML, mais à l’intérieur du foreach. Certains iraient faire du echo à tout va, s’embêter la vie avec la gestion des « … Pourquoi ne pas faire plus simple en fermant la balise php, pour ne la rouvrir que si besoin, puis une fois qu’on a finit on peut la rouvrir pour la suite  :

?><li>
	<a class="thumb" name="<?php echo $i; ?>" href="<?php echo $file->getPath()."/".$file->getFilename(); ?>" title="<?php echo $file->getFilename();?>" rel="lightbox">
		<img src="<?php echo $file->getPath()."/thumbs/thumb_".$file->getFilename(); ?>" alt="<?php echo $file->getFilename(); ?>" />
	</a>
	<div class="caption">
		<?php echo substr($file->getFilename(), 0, -4); ?>
	</div>
</li> <?php

Après ça on ferme le foreach et écris la fin du slideshow. Facile non? :-p

2 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *