Pay once, use forever—get huge lifetime software deals on ProductCanyon • Ad
Hugo has a bunch of useful shortcodes built in, such as the Figure shortcode that I’ve been using myself.
It’s good, but I have two problems with it:
- It doesn’t automatically include height and width attributes for images. You can specify them manually, but that’s not a future-safe and practical way.
- If you’re using a caption without adding an alt text, the caption will be added as an alt text, which is not optimal for SEO and accessibility. But this is for another post.
Automatically Add Width & Height to Images in Hugo’s Figure Shortcode
Having width and height set to images is important for page performance because it allows browsers to reserve space before loading, preventing content shifts.
And since hardcoding and adding them manually is not a good option, let’s see how you can add them automatically.
Step 1
Override the Figure shortcode by creating a file with the same name, figure.html, in your shortcodes folder /layouts/shortcodes/.
You can name the file whatever you want, though, if you don’t want to override Hugo’s built-in Figure shortcode.
Step 2
Paste this code inside the figure.html file:
<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
{{- if .Get "link" -}}
<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
{{- end -}}
{{- $u := urls.Parse (.Get "src") -}}
{{- $src := $u.String -}}
{{- $image := "" -}}
{{- if not $u.IsAbs -}}
{{- with $image = or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
{{- $src = .RelPermalink -}}
{{- end -}}
{{- end -}}
<img src="{{ $src }}"
{{- if or (.Get "alt") (.Get "caption") }}
alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
{{- end -}}
{{- $width := 0 -}}
{{- $height := 0 -}}
{{- with $image -}}
{{- $width = .Width -}}
{{- $height = .Height -}}
{{- end -}}
{{- with or (.Get "width") $width }} width="{{ . }}"{{ end -}}
{{- with or (.Get "height") $height }} height="{{ . }}"{{ end -}}
{{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
><!-- Closing img tag -->
{{- if .Get "link" }}</a>{{ end -}}
{{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
<figcaption>
{{ with (.Get "title") -}}
<h4>{{ . }}</h4>
{{- end -}}
{{- if or (.Get "caption") (.Get "attr") -}}<p>
{{- .Get "caption" | markdownify -}}
{{- with .Get "attrlink" }}
<a href="{{ . }}">
{{- end -}}
{{- .Get "attr" | markdownify -}}
{{- if .Get "attrlink" }}</a>{{ end }}</p>
{{- end }}
</figcaption>
{{- end }}
</figure>
This code uses the built-in source code from Hugo with a few modifications I highlighted below.
The +/- signs at the beginning of the lines mark the ones that have been removed or added.
1<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
2 {{- if .Get "link" -}}
3 <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
4 {{- end -}}
5
6 {{- $u := urls.Parse (.Get "src") -}}
7 {{- $src := $u.String -}}
8+ {{- $image := "" -}}
9 {{- if not $u.IsAbs -}}
10
11- {{- with or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
12+ {{- with $image = or (.Page.Resources.Get $u.Path) (resources.Get $u.Path) -}}
13 {{- $src = .RelPermalink -}}
14 {{- end -}}
15 {{- end -}}
16
17 <img src="{{ $src }}"
18 {{- if or (.Get "alt") (.Get "caption") }}
19 alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
20 {{- end -}}
21
22- {{- with .Get "width" }} width="{{ . }}"{{ end -}}
23- {{- with .Get "height" }} height="{{ . }}"{{ end -}}
24
25+ {{- $width := 0 -}}
26+ {{- $height := 0 -}}
27+ {{- with $image -}}
28+ {{- $width = .Width -}}
29+ {{- $height = .Height -}}
30+ {{- end -}}
31+ {{- with or (.Get "width") $width }} width="{{ . }}"{{ end -}}
32+ {{- with or (.Get "height") $height }} height="{{ . }}"{{ end -}}
33
34 {{- with .Get "loading" }} loading="{{ . }}"{{ end -}}
35 ><!-- Closing img tag -->
36 {{- if .Get "link" }}</a>{{ end -}}
37 {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
38 <figcaption>
39 {{ with (.Get "title") -}}
40 <h4>{{ . }}</h4>
41 {{- end -}}
42 {{- if or (.Get "caption") (.Get "attr") -}}<p>
43 {{- .Get "caption" | markdownify -}}
44 {{- with .Get "attrlink" }}
45 <a href="{{ . }}">
46 {{- end -}}
47 {{- .Get "attr" | markdownify -}}
48 {{- if .Get "attrlink" }}</a>{{ end }}</p>
49 {{- end }}
50 </figcaption>
51 {{- end }}
52</figure>
You should now see the height and width automatically added to your image tag in your HTML. If they don’t show, try restarting the Hugo server and performing a hard refresh on your browser to bypass the cache.
That’s a Wrap
If this post helped you, please consider following me on Bluesky or Instagram to support me.
Also, don't hesitate to contact me if you're interested in my web design services, want to collaborate, or just have something to say.