Nicolas Friedli

Page de galerie simple avec Hugo

Sur une page donnée: afficher des vignettes avec leurs légendes et proposer un lien vers des images en grande taille. Un code basique que je souhaite garder sous la main parce qu’il me sera utile souvent.

Une feuille (leaf bundle)

En premier lieu, il faut bien comprendre les principe des Page Bundles de Hugo. Si vous n’avez pas compris le truc, vous allez vous arracher les cheveux et perdre du temps.

Donc dans un répertoire se trouvent:

Et, évidemment:

Les données de index.md

L’entête (frontmatter) ressemble à ceci:

---
title: Titre de la galerie
_build:
  publishResources: false
resources:
- title: |
    Titre en *markdown*  
    avec un saut de ligne forcé
  src: image-1.jpg
  params:
    weight: 10
- title: |
    Un océan au bord de l'eau  
    Anonyme  
    CC0
  src: ocean.jpg
  params:
    weight: 20
---

Le premier titre, c’est ce lui de la page et de la galerie. Chaque image possède un titre, un nom de fichier et un critère de classement.

Le passage _build est intéressant. Je choisis de ne pas copier les images sources sur le site public. Seules les images traitées sont utilisées.

Le modèle

Dans la page utilisée comme layouts, appelée par héritage ou explicitement par layout: dans l’entête (frontmatter) de page, il me faudra quelque chose comme:

{{ range sort .Resources "Params.weight" }}
    {{ $large := .Resize "1024x q85 MitchellNetravali" }} 
    {{ $small := .Fit "300x300 q75 MitchellNetravali" }}
    <div class="image">  
        <a href="{{ $large.Permalink }}" target="_blank">
        <img src="{{ $small.Permalink }}" alt="{{ .Title }}" 
            width="{{ $small.Width }}" height="{{ $small.Height }}" 
            loading="lazy">
        </a>
        <p>{{ .Title | markdownify}}</p>
    </div> 
{{ end }}

Cette boucle fait le actions suivantes:

Reste à choisir un mise en page, par exemple en utilisant flex ou grid de CSS. Et à ajouter, au besoin, une visionneuse façons lightbox. Tout cela n’a plus rien à voir avec Hugo, je n’en parle pas ici.

/ Nicolas Friedli