Site php/bootstrap : ajouter une page de galerie

Suite aux deux premiers didacticiels de ce dossier spécial, ajoutons une page de galerie.

Ajouter une page pour recevoir la galerie

En reprenant le tutoriel précédent, on peut facilement ajouter une page, en dupliquant la page index.php pour lui donner le nom de galerie.php.
Nous allons ensuite updater le fichier inc-head.php pour y placer le lien vers la page

Utiliser fancybox

Fancybox a déjà été ajouté au code général téléchargeable dans le premier tutoriel. Nous n’avons donc plus qu’à nous occuper de placer le code html et les images pour faire fonctionner notre galerie.

Batcher les images

Lorsqu’on produit une galerie, on va à priori proposer au visiteur des images en petit format - des vignettes - qui feront apparaitre des images en grand format - l’image originale - au milieu de l’écran grâce à Fancybox. Nous avons donc besoin de ces deux images.
Les vignettes sont généralement préparées à la même taille en largeur et hauteur pour obtenir un damier d’images régulier. C’est une opération qui peut être fastidieuse si on prépare les images dans photoshop. On utilisera plutôt un logiciel d’automatisation, pour faire un "traitement par lot" ou batch.
Sur mac, on peut employer batch-image-resizer
Sur PC, par exemple Image resizer
Tous les deux sont gratuits et safe.

Dans les deux cas, on importe les images dans le logiciel (une par une ou en dossier) puis on spécifie une taille et une qualité de sortie avant de laisser le logiciel procéder au traitement automatique.

La procédure est légèrement différente pour chaque logiciel.
A la fin, nous avons un dossier contenant des images en grand format (faite attention à ce qu’elle ne dépassent pas 1200 à 1600 pixels, pour des raisons d’optimisation) et des vignettes de ces images de petite taille (ici 500 pixels de large)

Créer le code html

Une fois ces images disposées dans un sous-dossier du site (dans notre cas, un dossier images-galerie), on peut procéder au code, en utilisant le système de colonne de bootstrap.

<?php
// inclure le header
include("includes/inc-header.php");
?>

<section id="main" class="container">

   <img class="img-fluid" src="images/Ron-Mueck-Mask-II.png" alt="Un gros visage">

   <header class="text-center my-5">
       <h2>Galerie</h2>
       <div class="small">Quelques images</div>
   </header>

   <div class="row">
       <!-- ici une première colonne, les suivants suivent la même logique -->
       <div class="col-12 col-sm-6 col-md-4 mb-4">
           <a data-fancybox="magalerie" href="images-galerie/01.jpg" >
               <img src="images-galerie/01-small.jpg">
               <h4 class="mt-2">Titre éventuel</h4>
           </a>
       </div>
       <!-- placer ici les colonnes suivantes -->
   </div>
</section>

<?php
include("includes/inc-footer.php");
?>

Le code suit la logique suivant : un lien avec l’attribut href contenant l’adresse de l’image en grand format, auquel on ajoute l’attribut data-fancybox, qui se charge du reste.

Pour ce qui est des colonnes, consultez le tutoriel qui en parle sur ce site ou la documentation de bootstrap.

Simple.