Going Static, Hugo et la gestion d'images

Table des Matières

Avec sa version 0.32 le générateur de site statique Hugo n’en finit plus d’évoluer et intègre désormais des outils pour manipuler les images à la génération.

Image Processing c’est le nom et cela permet, avec la nouvelle fonctionnalité de page bundle de pouvoir gérer les images d’un article directement depuis le dossier content où sont déjà présent les billets au format .md.
J’avoue qu’au départ j’ai bidouillé sans prendre le temps de lire la doc et bien évidemment ça ne marchait point. Alors je me suis penché sur le sujet et dorénavant il est possible de jouer avec ce fameux page bundle pour organiser son dossier content de la sorte:

Il suffit donc de mettre les images dans un dossier images et elles deviennent accessibles via la variable: .Resources.
Ensuite pour les images il est possible de les redimensionner ou les rogner à la génération. Plus besoin de passer par un outil tier du type imagemagick. Dorénavant Hugo gère tout comme un grand.

Du coup je vous partage les deux utilisations que je fais de cette fonctionnalité.

Lightbox

{{ $img := (.Page.Resources.ByType "image").GetMatch ( printf "images/lightbox/%s*" (.Get "img"))  }}
{{ $align := (.Get "align") }}
{{ .Scratch.Set "image" ($img.Resize "256x q80") }}
{{ $scaled := .Scratch.Get "image" }}  
<a href="{{ $img.RelPermalink }}">
  <img class="thumbnail {{ with $align }}{{ . }}{{ end }}" src="{{ $scaled.Permalink }}">
</a>

{{< lightbox img="golang" align="right" >}}

Le shortcode est relativement simple :

Le shortcode récupère donc l’image, rangé dans le dossier spécifique (( printf "**%s*" (.Get "img")) si l’on ne souhaite pas ranger dans un sous-dossier), puis la redimensionne avec l’argument 256x q80, soit une taille de 256px de hauteur et une qualité (pour les jpg/jpeg) de 80%.
Ensuite c’est du code html basique, avec simplement l’ajout de la classe $align si le paramètre (optionnel) est indiqué dans le shortcode. Pour la petite histoire le shortcode utilisait au début des paramètres positionnels pour gagner du temps à l’écriture ({{< lightbox golang right >}}), le souci c’est que lorsque je voulais une image sans alignement la génération me renvoyait des erreurs en indiquant qu’il ne trouvait pas le paramètre pour l’alignement. J’ai eu beau bidouiller je n’y suis pas arrivé donc c’est un retour aux paramètres nominatifs

Gallery

<div class="gallery">
{{ with .Resources.Match "images/gallery/*.*" }}
{{ range . }}
{{ $scaled := .Resize "256x q80" }}
<div class="gallery-item">
<a href="{{ .RelPermalink }}">
<img class="thumbnail" src="{{ $scaled.Permalink }}">
</a>
</div>
{{ end }}
{{ end }}
</div>

Je voulais également pouvoir automatiquement générer des galleries d’images en fin de billets, ne devoir simplement que mettre les images dans le dossier images/gallery pour que tout se fasse sans intervention à la génération.
Avec ce partial c’est ce qu’il se passe et c’est un réel bonheur.

Avec ce concept de Page Bundle, Hugo continue d’avancer et de proposer des choses pour organiser son espace et pouvoir manier les éléments les plus courants sur le web. Pour ma part je continue à être des plus agréablement surpris de la qualité de ce logiciel qui me comble totalement pour maintenir ce blog. La réactivité des devs est impressionnante sur le forum et il est intéressant de voir que les remarques des utilisateurs sont prises en compte. Notamment sur cette gestion des images où de nombreuses versions mineures sont venus corriger des bugs ou modifier la fonctionnalité pour qu’elle soit la plus versatile possible.

Billets en liens :

Poster un commentaire

Nom :

Email (optionel):

Site Web (optionel):

Quelle est la 3e lettre du mot blog ?

Votre message :

Pas de commentaires pour le moment