Following is my shortcode for images in articles (responsive, with imgsrc). It uses a Bootstrap 4 theme, so image sizes are more or less static depending on the viewport width (col-xl-$$, col-lg-$$, and so on). Most of the comparable shortcodes here use the size-attribute, which, in my opinion, is not necessary with Bootstrap sizes.
In my config.toml (I like to leave much of comments in my files… it’s an Alzheimer thing):
#############################################################
# Imaging setup
#############################################################
[imaging]
# Default resample filter used for resizing. Default is Box,
# a simple and fast averaging filter appropriate for downscaling.
# See https://github.com/disintegration/imaging
resampleFilter = "lanczos"
# Default JPEG quality setting. Default is 75.
quality = 85
# Anchor used when cropping pictures.
# Default is "smart" which does Smart Cropping, using https://github.com/muesli/smartcrop
# Smart Cropping is content aware and tries to find the best crop for each image.
# Valid values are Smart, Center, TopLeft, Top, TopRight, Left, Right, BottomLeft, Bottom, BottomRight
anchor = "smart"
[params.imaging]
# xl, lg, md, sm and below
sizes = ["825","610","510","450"]
In params.imaging I added all the widths of images in my content column. You need to test with different viewport widths, and those are more or less the widths I reach with a two column layout. This map can contain as many widths as you may want. My content column is defined as col-xl-8 col-lg-8 col-md-7 col-sm-12 col.
Everything under [imaging] is just for posterity. I like higher qualities in images. Lanczos seems to be delivering the best results at maximum compression, and smart is just smart for cropping images. These are settings for my article images, and they tend to be at a landscape with a specific layout. Needs may vary. I probably should add those three settings as parameters to the shortcode just for future needs.
The shortcode itself then (layouts/shortcodes/img.html):
{{/*
see
https://laurakalbag.com/processing-responsive-images-with-hugo/
https://discourse.gohugo.io/t/easy-way-to-serve-responsive-images-with-hugo/16184
https://www.adamwills.io/blog/responsive-images-hugo/
https://gohugo.io/content-management/image-processing/
*/}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
{{ with .Get "link" }}<a href="{{.}}">{{ end }}
<img
width="825"
srcset="{{- range $i, $e := .Site.Params.Imaging.Sizes -}}
{{- if $i -}}, {{- end -}}
{{- if ge $src.Width $e -}}
{{ $small := $src.Resize (print $e "x") }}
{{ with $small.RelPermalink }}{{.}} {{ $e }}w{{ end }}
{{- end -}}
{{- end -}}"
src="{{ $src.RelPermalink }}"
{{- with .Get "alt" -}}alt="{{.}}" {{- end -}}>
{{ if .Get "link"}}</a>{{ end }}
{{ with .Inner }}
<figcaption>{{ . | markdownify }}</figcaption>
{{ end }}
</figure>
You can call the shortcode via: {{< img src="filename.jpg" >}}caption{{< /img >}}. This assumes that filename.jpg is in a page bundle at the same level of the .md-file that is parsed.
Available attributes for the shortcode are:
- src: file path to the image (required)
- class: class names for the figure (optional)
- link: linking the image (optional)
- alt: alternative text (option) - this probably should be printed even if it’s empty to make browsers happy.
Text within the shortcode will be printed as formatted (I am using HTML, but simple markdown will be parsed).
Again, this works because Bootstrap 4 column widths are more or less static. Other setups might require the size attribute in the image tag.
This way the