Hantering av Mainroad-bilder

Specifika detaljer om Hugo-bilder i Mainroad, typer och storlekar

Sidinnehåll

Mainroad är ett tema för statiska webbplatsgenereraren Hugo och förutom att se bra ut har det fantastisk hantering av bilder.

Som du ser använder denna webbplats samma tillvägagångssätt, skriv text i markdown, lägg till bilder, sedan med Hugo - producerar fina HTML, JS och CSS-filer.

topimage

Var

Miniatyrbilder definieras i sidans front matter

thumbnail: img/thumb.jpg

Synligheten för miniatyrbilder konfigureras i config.toml

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

Det finns några svårigheter med Mainroad

  • Mainroad söker efter miniatyrbilder i /static mappen, inte i sidans bundle.
  • Som standard används en bild både för listans miniatyrbild och detaljsidans toppbild.
  • Miniatyrbilder skalas inte ner, de kopieras bara över till public.

Obehagligheter…

  • Ovanstående leder till mycket ineffektiv bandbreddsanvändning när detaljsidans bild används som miniatyrbild
  • Mycket obekvämt (för mig) att lagra bilder i static mappen, även parallellt med postträdstrukturen, inte i en sidbundle

Bildtyper och storlekar

Miniatyrbilder

  • liten lista (mobilvy) 73x53
  • medel lista (desktopvy) 235x171

Detaljsida - intern

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

Lösningen

Är att lagra

  • i static mappen - miniatyrbilder för medel lista (desktopvy) 235x171
  • ha fördefinierade miniatyrbilder - som 10 av dem, och använd den mest lämpliga eller rotera
  • i sidans bundle - desktopbilder 678x495
  • i sidtexten referera till dem ![img](localimg.png)
  • konfigurera miniatyrbildsynlighet = [“list”]

Användbara länkar