Mainroad beeldbehandeling

Specifieken van Hugo-afbeeldingen in Mainroad, soorten en maten

Inhoud

Mainroad is een thema voor de Hugo statische site generator en heeft naast een goede uiterlijke verschijning ook terribe beeldbehandeling

Zoals je ziet, gebruikt deze site dezelfde aanpak: tekst schrijven in markdown, afbeeldingen toevoegen, en dan met Hugo – een aantrekkelijke verzameling html-, js- en css-bestanden produceren.

topimage

Waar

Miniaturen worden gedefinieerd in de front matter van de pagina

thumbnail: img/thumb.jpg

Zichtbaarheid van miniaturen wordt geconfigureerd in config.toml

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

Er zijn enkele moeilijkheden met Mainroad

  • Mainroad zoekt naar miniaturen in de /static map, niet in de pagina bundel.
  • Standaard wordt één afbeelding gebruikt voor zowel de miniaturen op de lijstpagina als de hoofdafbeelding op de detailpagina.
  • Miniaturen worden niet geresized, alleen gekopieerd naar public

Onaangenaamheden…

  • Hierboven genoemde situatie leidt tot zeer inefficiënte bandbreedtegebruik wanneer de detailpagina-afbeelding als miniaturen wordt gebruikt
  • Zeer onhandig (voor mij) om afbeeldingen op te slaan in de static map, zelfs in een parallelle poststructuur, niet in een pagina bundel

Afbeeldingstypes en -grootte

Miniaturen

  • klein lijst (mobiele weergave) 73x53
  • medium lijst (desktop weergave) 235x171

Detailpagina – intern

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

De oplossing

Is om op te slaan

  • in de static map – miniaturen voor medium lijst (desktop weergave) 235x171
  • een vooraf gedefinieerde set miniaturen hebben – zoals 10 van die, en de meest geschikte of roteren
  • in de pagina bundel – desktopafbeeldingen 678x495
  • in de paginatext verwijzen naar hen ![img](localimg.png)
  • thumbnail zichtbaarheid configureren = [“list”]