# Shortcode for images with multiple parameters

**URL:** <https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829>\
**Category:** support\
**Tags:** images, shortcodes\
**Created:** [October 6, 2022, 12:13am UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829 "2022-10-06T00:13:44Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 6, 2022, 12:13am UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/1 "2022-10-06T00:13:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [October 6, 2022, 1:58pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/2 "2022-10-06T13:58:01Z")

</div>

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](https://github.com/brycewray/hugo_site/blob/main/layouts/shortcodes/imgh.html):

```auto
{{/* 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):

```auto
{{< 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:

```auto
{{< 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`](https://github.com/brycewray/hugo_site/blob/main/layouts/shortcodes/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.

---

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 6, 2022, 11:23pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/3 "2022-10-06T23:23:41Z")

</div>

Thank you, I will try.

---

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 6, 2022, 11:41pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/4 "2022-10-06T23:41:14Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [October 7, 2022, 3:56pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/5 "2022-10-07T15:56:47Z")

</div>

- “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](https://gohugo.io/templates/render-hooks/#readout), 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](https://github.com/verlok/vanilla-lazyload) or [lazysizes](https://github.com/aFarkas/lazysizes).

---

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 7, 2022, 8:13pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/6 "2022-10-07T20:13:49Z")

</div>

> [@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](https://github.com/verlok/vanilla-lazyload) or [lazysizes](https://github.com/aFarkas/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:

```auto
{{ 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?

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [October 7, 2022, 8:18pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/7 "2022-10-07T20:18:38Z")

</div>

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](https://web.dev/browser-level-image-lazy-loading/)) — but, other than that, the answer to your question is “Yes.”

---

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 7, 2022, 8:21pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/8 "2022-10-07T20:21:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![bwintx](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bwintx/32/10450_2.png) [@bwintx](https://discourse.gohugo.io/u/bwintx)\
**Post date:** [October 7, 2022, 8:22pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/9 "2022-10-07T20:22:39Z")

</div>

I believe that’s right.

---

<div class="post-metadata">

**Author:** ![damien](https://avatars.discourse-cdn.com/v4/letter/d/9de053/32.png) [@damien](https://discourse.gohugo.io/u/damien)\
**Post date:** [October 7, 2022, 8:28pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/10 "2022-10-07T20:28:02Z")

</div>

Thank you.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [October 9, 2022, 8:28pm UTC](https://discourse.gohugo.io/t/shortcode-for-images-with-multiple-parameters/40829/11 "2022-10-09T20:28:12Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.