Image Processingを使用してamp-imgのサイズを出力する
Image Processingとは
HUGOに画像を加工する機能があります。
「Image Processing」で、画像のサイズ変更、回転、トリミング、フィルタ, 変換 ができます。
目的
Resourceを使用してwidthとheightを自動で設定するようにし、webpへの変換を行いサイズの軽量化を行います。
変更前
変更前では下記のようなimgというshortcodeを使用してamp-imgタグを出力していました。
このままでは、呼び出し元で画像のwidthとheightを指定しなければいけません。
1
2
3
4
5
6
7
8
9
10
|
<figure>
<amp-img
alt="{{.Get "title"}}"
src="{{.Get "src"}}"
width="{{.Get "width"}}"
height="{{.Get "height"}}"
{{ if (isset $.Params "layout") }}layout="{{.Get "layout"}}"{{ end }}
>
</amp-img>
</figure>
|
title、src、 widthとheightを必ず指定し、widthによってresponsiveにするか元画像のサイズによって指定していました。
変更後
変更後では下記のようなamp-imgというshortcodeを使用してamp-imgタグを出力することにします。
呼び出し元では画像とtitleとsrcだけを指定し、最大幅で表示することにします。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
{{ $src := .Get "src" }}
{{ with .Page.Resources.GetMatch $src }}
<figure>
{{ with .Resize (printf "%dx%d webp" .Width .Height) }}
<amp-img
alt="{{ .Params.Get "title"}}"
src="{{ .RelPermalink }}"
width="{{ .Width }}"
height="{{ .Height }}"
layout="responsive"
>
</amp-img>
{{ end }}
</figure>
{{ end }}
|
結果
元の画像が小さいと引き伸ばされて表示されるようになるので、元の画像の幅が800-1000くらいで作成していこうと思います。
600x140
800x140
1000x140
1200x140
リンク
Image Processing
amp-img