Shortcode for images with multiple parameters

[damien]

Hello,

How can I use multiple parameters when using a shortcode to process images?

Currently I have a shortcode {{< img src=“images/birxxx.xxx.org.jpg” alt=“blablabla” >}} using this html template:

{{ $image := resources.GetMatch (.Get “src”) }}
<img src=“{{ ($image.Resize “1000x q70”).RelPermalink }}” {{ with .Get “alt” }}alt=“{{.}}”{{ else }}alt=“”{{ end }}>

(I found this example on YT). It is working fine.

I would like to be able to resize and do other things, like changing brightness, adjusting contrast, changing to grayscale etc.

How can I combine them?

Thank you.

[bwintx]

Since the image-processing instructions to Hugo will come in as one long “command,” you’d just be adding the parameters to the command. Here’s a simplified (non-responsive) version of how I do it in my imgh shortcode:

{{/* init vars */}}
{{- $src := .Page.Resources.GetMatch (.Get "src") -}}
{{- $alt := .Get "alt" -}}
{{- $size := "1000x" -}}{{/* providing a default */}}
{{- if .Get "size" -}}{{- $size = .Get "size" -}}{{- end -}}
{{- $qual := "q75" -}}{{/* Hugo default */}}
{{- if .Get "qual" -}}{{- $qual = .Get "qual" -}}{{- end -}}
{{- $filter := false -}}{{/* Hugo default */}}
{{- if .Get "filter" -}}{{- $filter = .Get "filter" -}}{{- end -}}

<img src="{{- ($src.Resize (print $size " " $qual " " $filter) ).RelPermalink }}" width="{{ $src.Width }}" height="auto" alt="{{ $alt }}" title="{{ $alt }}" loading="lazy" />

In your Markdown, you could call this as follows, assuming the image is within the same folder as the Markdown (if you wanted a 900x size rather than 1000x, for example):

{{< imgh-simple src="my-image-file.jpg" alt="My image file alt text" size="900x" qual="q70" filter="Linear" >}}

If you didn’t need to change any defaults in the supplied parameters, you wouldn’t need to mention them:

{{< imgh-simple src="my-image-file.jpg" alt="My image file alt text" >}}

Also, in case it would be easier to read, I’ve also put this on my repo as imgh-simple.html. I tested it successfully in dev mode.

Anyway, this gives you the general principle; you can extrapolate from there. Hope that helps.

[damien]

Thank you, I will try.

[damien]

I also have other questions regarding processing images and lazy loading.

I have been using Hugo for a few years for my personnal blog and never really thought of any improvements. Now I have more free time.

• How can I apply custom resizing and filters on a per basis image, without shortcodes? Currently I put my .md posts in /posts and images in /static folder, inserting them in .md with ![exmple](/xxx.jpg "caption"), (when I use a shortcode to process an image or use the featured_image function I put images in /assets/images/xx.jpg ).

• What about lazy loding, sometimes I would like to insert in a post 5,6 or more images. Should I think of using lazy loading and how to begin with this?

Thank you.

[bwintx]

• “How can I apply custom resizing and filters on a per basis image, without shortcodes?” — It may be possible to do that through Markdown render hooks, but I can’t say that would be any easier than shortcodes.
• Lazy-loading is always a good idea, regardless of how many or how few images you’re including. Modern browsers handle it natively with loading="lazy"; if you need to work with older browsers, you could use something like vanilla-lazyload or lazysizes.

[damien]

@bwintx

Lazy-loading is always a good idea, regardless of how many or how few images you’re including. Modern browsers handle it natively with loading="lazy"; if you need to work with older browsers, you could use something like vanilla-lazyload or lazysizes.

So, if I understand correctly, Hugo natively provides lazy loading. I just have to add it in my render-image.html file, like this:

{{ if .Title }}
  <figure>
    <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" loading="lazy">
    <figcaption>{{ .Title }}</figcaption>
  </figure>
{{ else }}
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}">
{{ end }}

And that’s it, then I can post an image in .md with:

![exemple](/xxx.jpg "caption") and it will be lazy loaded automatically?

[bwintx]

The lazy-loading is not from Hugo — it’s something modern browsers do if you supply the loading = lazy (Browser-level image lazy-loading for the web) — but, other than that, the answer to your question is “Yes.”

[damien]

Ok, so I can use ![exemple](/xxx.jpg "caption"). I don’t need to use <img loading="lazy" src="xxx.jpg" alt="caption"> in my posts.

[bwintx]

I believe that’s right.

[damien]

Thank you.