Obsługa obrazów Mainroad

Specyfiki obrazów Hugo w Mainroad, typy i rozmiary

Page content

Mainroad to motyw dla generatora statycznych stron internetowych Hugo, a oprócz dobrej wygldu ma bardzo słabe obsługę obrazów

Jak widzisz, ta strona korzysta z tego samego podejścia: pisz tekst w markdown, dodawaj obrazy, a następnie z pomocą hugo generujesz ładnie wyglądającą grupę plików html, js i css.

topimage

Gdzie

Miniaturki są zdefiniowane w frontmatter strony

thumbnail: img/thumb.jpg

Widoczność miniaturki jest konfigurowana w config.toml

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

Są pewne trudności z Mainroad

  • Mainroad szuka obrazów miniatur w folderze /static, a nie w pakiecie strony.
  • Domyślnie jeden obraz jest używany zarówno jako miniatura na stronie listy, jak i jako główny obraz na stronie szczegółów.
  • Miniaturki nie są skalowane, tylko kopiowane do public

Niesprawiedliwości…

  • Powyższe prowadzi do bardzo nieskutecznej wykorzystania przepustowości pasma, kiedy obraz z strony szczegółów jest używany jako miniatura
  • Bardzo nieprzyjemne (dla mnie) przechowywanie obrazów w folderze static, nawet w strukturze drzewa postów, a nie w pakiecie strony

Typy i rozmiary obrazów

Miniaturki

  • mała lista (wgląd mobilny) 73x53
  • średnia lista (wgląd desktopowy) 235x171

Strona szczegółów - wewnętrzna

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

Rozwiązanie

To przechowywać

  • w folderze static - miniaturki dla średniej listy (wgląd desktopowy) 235x171
  • mieć zdefiniowany zestaw miniatur - np. 10 takich, i używać najbardziej odpowiedniej lub rotować
  • w pakiecie strony - obrazy desktopowe 678x495
  • w tekście strony odwoływać się do nich ![img](localimg.png)
  • skonfigurować widoczność miniaturki = [“list”]

Przydatne linki