HugoでGird配置で画像を表示する shortcodes を実装しました。
先日サンプルで画像を並べたものです。

{{ $size := "200x" }}
{{ $mobileSize := "100x100"}}

<div class="img-view">
<table>
<tbody>
    {{ range $idx, $elem := .Params }}
        {{ $res := resources.GetMatch $elem }}
        {{ $image := $res.Resize $size }}

        {{ $mobileImage := $res.Fit $mobileSize}}
        {{ $imageURL := $image.RelPermalink }}
        {{ $mobileImageURL := $mobileImage.RelPermalink}}
        {{ if modBool $idx 3 }}
            <tr>
                <th>
                    <a href="{{ $res.RelPermalink }}" target="_blank">
                        <div class="thumb-img">
                            <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
                            <img class="sp" src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
                            <p class="pc">クリックで拡大</p>
                        </div>
                    </a>
                </th>

        {{ else if modBool (add $idx 3) 3 }}
                <th>
                    <a href="{{ $res.RelPermalink }}" target="_blank">
                        <div class="thumb-img">
                            <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
                            <img class="sp" src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
                            <p class="pc">クリックで拡大</p>
                        </div>
                    </a>
                </th>
            </tr>
        {{ else }}
                <th>
                    <a href="{{ $res.RelPermalink }}" target="_blank">
                        <div class="thumb-img">
                            <img class="pc" src="{{ $imageURL }}" alt="{{ $elem }}" width="{{ $image.Width }}" height="{{ $image.Height }}"/>
                            <img class="sp" src="{{ $mobileImageURL }}" alt="{{ $elem }}" width="{{ $mobileImage.Width }}" height="{{ $mobileImage.Height }}"/>
                            <p class="pc">クリックで拡大</p>
                        </div>
                    </a>
                </th>
        {{ end }}
    {{ end }}
</tbody>
</table>
</div>

.thumb-img {
    position: relative;
}

.thumb-img p {
    position: absolute;
    bottom: 0;
    margin-bottom: 0;
    right: 0;
    display: none;
    color: rgb(45, 45, 45);
    background-color: rgba(173, 173, 173, 0.582);
    font-size: large;
}

.thumb-img:hover > p {
    display: block;
}

@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
}

3列並べたら折り返す実装です。
pc、spで表示する画像サイズを変更するようにしてます。

使い方

次のように指定すると使えます。

{{< img-view
  "画像1.jpg"
  "画像2.jpg"
  "画像3.jpg"
>}}

最後に

WebP対応もやっていきたいなぁ。