Hugoで記事内に画像を貼り付ける方法

まあ個人用のメモということで。

静的サイトジェネレーターHugoで画像の貼り付け方法について備忘録。

Markdown形式で記事を書けるのが特徴なんだけど、Hugoの独自機能としてshortcodeというものがあるので。

コンテンツ生成元のリポジトリのルート直下のstaticフォルダにimagesという画像を配置している前提。

なお、口述しているように一部のテーマではCSS指定の方が優先されて画像のサイズ指定が効かないケースがあるので要注意、です。

Markdown 拡張方式

おそらくなんとか拡張という名称があるんでしょうけど調べてないです。ghost blog platformなどで採用されている形式。

![This is a image](/images/image01.png)

のように書くと、以下のようなHTMLに変換される。

<p><img src="/images/image01.png" alt="This is a image" /></p>

画像サイズなどの指定はできない。

Shortcode 方式

Hugoの独自機能。Railsなどのヘルパーみたいなもの。Shortcode についての解説は下記を参照。

Hugoで画像や動画を投稿する時はShortcodeを使おう - Qiita

以下のように画像サイズやクラス名を指定できるのが特徴。

{{< figure src="/images/image02.png" title="Screenshot" class="center" width="320" height="640" >}}

class、width、heightは省略化。他にもimgタグのアトリビュートを指定できる。

公式ドキュメント：Hugo | Shortcodes

以下のようなHTMLが生成される。HTML5のfigureタグ。

<figure class="center">

        <img src="/images/wordclip/appicon.png" width="320" height="640" />


    <figcaption>
        <h4>英単語Clip</h4>

    </figcaption>

</figure>

なお、heightは最近新たに対応したとのこと。

figure shortcode does not parse the height argument · Issue #4014 · gohugoio/hugo · GitHub

注意事項

ぶっちゃけこれが本題。

テーマに公式チュートリアルで紹介されているanankeを指定していると、横幅が強制的に100%になるので注意。

Shortcode方式で適当なCSSのクラス名を付加するか、CSSをいじるか、いっそ別のテーマにするなどの対応が必要。

画像が拡大されて「ナニコレ？」みたいにならないようにしましょう。