Gestione delle immagini di Mainroad

Specifiche delle immagini di Hugo in Mainroad, tipi e dimensioni

Indice

Mainroad è un tema per il generatore di siti statici Hugo e, oltre a sembrare bene, ha un’ottima gestione delle immagini

Come puoi vedere, questo sito utilizza lo stesso approccio: scrivi il testo in markdown, aggiungi le immagini, quindi con Hugo genera un bel gruppo di file html, js e css.

topimage

Dove

Le miniature sono definite nel front matter della pagina

thumbnail: img/thumb.jpg

La visibilità delle miniature è configurata in config.toml

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

Ci sono alcune difficoltà con Mainroad

  • Mainroad cerca le immagini delle miniature nella cartella /static, non nel bundle della pagina.
  • Per default viene utilizzata un’unica immagine sia per la miniature della pagina elenco che per l’immagine principale della pagina dettaglio.
  • Le miniature non vengono ridimensionate, vengono solo copiate nella cartella pubblica.

Inconvenienze…

  • Questo porta a un utilizzo molto inefficiente della larghezza di banda quando l’immagine della pagina dettaglio viene utilizzata come miniature.
  • È molto scomodo (per me) conservare le immagini nella cartella statica, anche se organizzate in modo parallelo nell’albero delle cartelle dei post, non all’interno di un bundle di pagina.

Tipi di immagini e dimensioni

Miniature

  • piccola lista (visualizzazione mobile) 73x53
  • media lista (visualizzazione desktop) 235x171

Pagina dettaglio - interno

  • max desktop 678x495
  • ipad pro 597x436
  • iphone xr 374x273
  • iphone 14 max 390x285
  • ipad mini 479x350

La soluzione

È di conservare

  • nella cartella statica - le immagini delle miniature per la visualizzazione media lista (desktop) 235x171
  • avere un set di miniature predefinite - ad esempio 10 di queste, e utilizzare quella più adatta o ruotarle
  • nel bundle della pagina - immagini per desktop 678x495
  • nel testo della pagina riferirsi a esse ![img](localimg.png)
  • configurare la visibilità delle miniature = [“list”]