Mainroad image handling

Specifics of Hugo images in Mainroad, types and sizes

Page content

Mainroad is a theme for the Hugo static site generator and in addition to looking good it has terribe image handling

As you see, this site is using same approach, write text in markdown add images, then with hugo - producing nice looking bunch of html, js and css files.

topimage

Where

Thumbnails are defined in page front matter

thumbnail: img/thumb.jpg

Thumbnail visibility is configured in config.toml

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

There are some difficulties with Mainroad

  • Mainroad is searching for thumbnail images in /static folder, not in page bundle.
  • By default one image is used for both list page thumbnail and detail page top image.
  • Thumbnails are not resized, just copied over to public

Unpleasantries…

  • Above leads to very inefficient bandwidth usage when detail page image is used as a thumbnail
  • Very inconvenient (for me) to store images in static folder, even inparallel posts tree structure, not in a page bundle

Image Types and sizes

Thumbnails

  • small list (mobile view) 73x53
  • medium list (desktop view) 235x171

Detail page - internal

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

The solution

Is to store

  • in static folder - thumbnail images for medium list (desktop view) 235x171
  • have predefined thumbnails set - like 10 of those, and use most appropriate or rotate
  • in page bundle - desktop images 678x495
  • in the page text reference them ![img](localimg.png)
  • configure thumbnail visibility = [“list”]