メインロード画像処理

メインロードにおけるハーゴ画像の詳細、種類とサイズ

目次

Mainroad は、Hugo 静的サイトジェネレータ用のテーマです。見た目が良く、また画像処理が非常に優れています。

ご覧の通り、このサイトは同じアプローチを使用しています。マークダウンでテキストを書き、画像を追加し、Hugoを使ってHTML、JS、CSSファイルの見栄えの良い一式を生成します。

topimage

どこで

サムネイルはページのフロントマターで定義されています

thumbnail: img/thumb.jpg

サムネイルの可視性は config.toml で設定されています

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

Mainroadにはいくつかの課題があります

  • Mainroadはサムネイル画像を /static フォルダではなく、ページバンドル内から探します。
  • デフォルトでは、リストページのサムネイルと詳細ページのトップ画像に同じ画像が使用されます。
  • サムネイルはリサイズされず、単に public フォルダにコピーされます。

不快な点…

  • 上記により、詳細ページの画像がサムネイルとして使用される場合、帯域幅の使用が非常に非効率になります。
  • 静的フォルダに画像を保存することが非常に不便（私にとっては）です。並列した投稿ツリー構造ではなく、ページバンドル内に保存する必要があります。

画像の種類とサイズ

サムネイル

  • 小（モバイルビュー） 73x53
  • 中（デスクトップビュー） 235x171

詳細ページ - 内部

  • デスクトップ最大 678x495
  • iPad Pro 597x436
  • iPhone XR 374x273
  • iPhone 14 Max 390x285
  • iPad mini 479x350

解決策

以下の方法を採用します。

  • 静的フォルダに、デスクトップビュー用の中サイズサムネイル（235x171）画像を保存します。
  • 事前に定義されたサムネイルセット（たとえば10枚）を用意し、最も適切なものを使用したり、ローテーションさせたりします。
  • ページバンドル内に、デスクトップ用画像（678x495）を保存します。
  • ページ本文内では ![img](localimg.png) のようにそれらを参照します。
  • サムネイルの可視性を ["list"] に設定します。

有用なリンク