Gestion des images Mainroad

Spécificités des images Hugo dans Mainroad, types et tailles

Sommaire

Mainroad est un thème pour le générateur de site statique Hugo. En plus d’avoir un bon design, il possède un traitement des images très efficace.

Comme vous pouvez le voir, ce site utilise la même approche : écrire du texte en markdown, ajouter des images, puis utiliser Hugo pour générer un ensemble de fichiers HTML, JS et CSS bien présentables.

topimage

Où

Les miniatures sont définies dans le front matter de la page

thumbnail: img/thumb.jpg

La visibilité des miniatures est configurée dans config.toml

[Params.thumbnail]
  visibility = ["list", "post"]

Il y a quelques difficultés avec Mainroad

  • Mainroad recherche les images de miniature dans le dossier /static, et non dans le bundle de la page.
  • Par défaut, une seule image est utilisée à la fois pour la miniature de la page de liste et pour l’image principale de la page détaillée.
  • Les miniatures ne sont pas redimensionnées, elles sont simplement copiées vers le dossier public.

Inconvénients…

  • Cela entraîne une utilisation très inefficace de la bande passante lorsque l’image de la page détaillée est utilisée comme miniature.
  • Très inconvenant (pour moi) de stocker les images dans le dossier static, même avec une structure d’arborescence parallèle aux posts, et non dans un bundle de page.

Types d’images et tailles

Miniatures

  • petite liste (vue mobile) 73x53
  • moyenne liste (vue bureau) 235x171

Page détaillée - interne

  • max bureau 678x495
  • iPad Pro 597x436
  • iPhone XR 374x273
  • iPhone 14 Max 390x285
  • iPad Mini 479x350

La solution

Est de stocker

  • dans le dossier static - les images de miniature pour la liste moyenne (vue bureau) 235x171
  • avoir un ensemble de miniatures prédéfini - comme 10 de celles-ci, et utiliser celle la plus appropriée ou faire une rotation
  • dans le bundle de la page - les images pour bureau 678x495
  • dans le texte de la page, les référencer ![img](localimg.png)
  • configurer la visibilité des miniatures = [“list”]

Liens utiles