Accueil > galerie > galerie-automatique-dossier-images-php

{ Une galerie automatique en php }

Introduction

Bien, dans ce tutoriel je vais vous montrer comment mettre en place un système de galerie automatique en PHP.

Avantages

  1. Utilisation super simple
  2. Génération automatique des miniatures
  3. Lightbox intégrée

Intégration

Décidez à mettre en place cette galerie ? OK alors on y va !

Première phase : préparer l'arborescence pour nos fichiers.

Alors l'idéal, selon moi, est de créer un sous répertoire nommé galerie par exempe et d'y placer l'ensemble des fichiers et dossiers concernant la galerie (à savoir l'arborescence ci-dessous + les fichiers), ça vous permettra de garder votre site bien organisé même si vous rajouter d'autres modules par la suite.

Voici donc l'arborescence :

      • mootools.js
      • smoothbox.js
      • auto-gallery.css
      • smoothbox.css
      • loading.gif
    • fonctions.php
    • index.php

Bon rien de particulier dans les fichiers JS et CSS, comme vous pouvez le voir on utilise la bibliothèque Javascript MooTools ainsi que le script de Smoothbox pour l'affichage des photos dans une lightbox. Rien de particulier à voir dans les fichiers CSS non plus, les styles sont relativement simples et peuvent sans autre être modifié à votre guise

Là où ça devient plus intéressant c'est les fichiers fonctions.php et index.php sur lesquels on va se pencher dans la prochaine étape.

Les fonctions

Creusons un peu le code source du fichier fonctions.php. On va donc passer en revue les différentes fonctions qui vont permettre à votre galerie d'être automatique

Liste des fonctions :

  • Génération de miniatures
  • Récupération des images
  • Contrôle des extensions

Voyons maintenant le code

<?php
// Générateur de miniatures
function make_thumb($src,$dest,$desired_width) {
  
  // Ouverture de l'image
  $source_image = imagecreatefromjpeg($src);
  $width = imagesx($source_image);
  $height = imagesy($source_image);

  // Trouver la hauteur désiré pour la miniature, en fonction de sa largeur
  $desired_height = floor($height*($desired_width/$width));

  // Créer une nouvelle image (virtuelle)
  $virtual_image = imagecreatetruecolor($desired_width,$desired_height);

  // Copie de l'image source à la taille désirée
  imagecopyresized($virtual_image,$source_image,0,0,0,0,$desired_width,$desired_height,$width,$height);
  
  // Créer physiquement l'image dans le répertoire de destination
  imagejpeg($virtual_image,$dest);
}

// On récupère les fichiers depuis le répertoire source
function get_files($images_dir,$exts = array('jpg')) {
  $files = array();
  if($handle = opendir($images_dir)) {
    while(false !== ($file = readdir($handle))) {
      $extension = strtolower(get_file_extension($file));
      if($extension && in_array($extension,$exts)) {
        $files[] = $file;
      }
    }
    closedir($handle);
  }
  return $files;
}

// Récupère l'extension du fichier
function get_file_extension($file_name) {
  return substr(strrchr($file_name,'.'),1);
}
?>

La galerie

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Auto Gallery Plugin</title>

    <link href="css/auto-gallery.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="css/smoothbox.css" type="text/css" />

	  <script type="text/javascript" src="js/mootools.js"></script>
	  <script type="text/javascript" src="js/smoothbox.js"></script>
  </head>
  <body>

<?php

include 'fonctions.php';

// Paramètres
$images_dir = 'preload-images/';
$thumbs_dir = 'preload-thumbs/';

// Largeur des miniatures
$thumbs_width = 200;

// Nombres de miniatures par ligne
$images_per_row = 6;

// Récupération de la liste des images
$image_files = get_files($images_dir);

// S'il y a au moins 1 image on rentre dans le script
if(count($image_files)) {
  $index = 0;
  
  // Traitement des images
  foreach($image_files as $index=>$file) {
    $index++;
    $thumbnail_image = $thumbs_dir.$file;
    
    if(!file_exists($thumbnail_image)) {
      $extension = get_file_extension($thumbnail_image);
      
      // Si l'extension est reconnue alors on génère la miniature
      if($extension) {
        make_thumb($images_dir.$file.$thumbnail_image.$thumbs_width);
      }
    }
    // Une fois que les miniatures ont été générées la boucle foreach prépare le code html pour chaque image
    echo '<a href="'.$images_dir.$file.'" class="photo-link smoothbox" rel="gallery"><img src="'.$thumbnail_image.'" /></a>';
    echo "\n";
    
    // On place à la fin de chaque ligne un clear pour que tout soit bien aligné
    if($index % $images_per_row == 0) { echo '<div class="clear"></div>'; echo "\n"; }
  }
  echo '<div class="clear"></div>';
}

else {
  // Si aucune image n'a été trouvé
  echo '<p>Aucune image dans cette galerie.</p>';
}

?>

</body>
</html>

Conclusion

Et voilà c'est fini ! Vérifiez une dernière fois que vous avez bien respecté l'arborescence du plugin, que vous avez bien entré le code source dans les fichiers index.php et fonctions.php et enfin n'oubliez pas de charger des images dans le répertoire "preload-images".

Une fois que ces trois points sont ok vous pouvez accéder à la page du script, ne vous inquiétez pas si la page met long à se charger c'est parce que le script doit générer une première fois toutes les miniatures et suivant le nombre d'image que vous avez ça peut prendre pas mal de temps donc ce n'est pas impossible que vous deviez recharger la page plusieurs fois avant que toutes les miniatures aient été générées