たぶんもっとスマートなやり方があるのでしょうが、Hugoのショートコードを書く道を選択した

imgタグをよきに計らう

Markdownでimgタグを吐かせるためにこう

![alt](src)

書くのですが、うちでimgタグを使いたいの主には2パターン

• 表示領域に合わせていい感じに縮小してくれるやつ(所謂fluidってやつ)
• 原寸で表示して欲しいが、レイアウトを壊さないやつ(所謂overflow:autoなやつ)

これらをうまくやるためのショートコードを書く

表示領域に合わせていい感じに縮小してくれるやつ

<!-- image fluid -->
<img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} class="img-fluid" />
<!-- image fluid -->

をlayouts/shortcodesにimg-fluid.htmlとして書いておいた

原寸で表示して欲しいが、レイアウトを壊さないやつ

<!-- image overflow -->
<div class="image-overflow">
    <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} />
</div>
<!-- image overflow -->

をlayouts/shortcodesにimg-overflow.htmlとして書いておいた
あと忘れずにcssも書いておく

.image-overflow {
    overflow: auto;
}

使い方

{{/*< img-fluid src="/image/site_renew/HUGO.png" alt="HUGO" >*/}}
{{/*< img-overflow src="/image/site_renew/HUGO.png" alt="HUGO" >*/}}

※注：ここではショートコードが評価されないようにコメントアウトしている

のように使う