Shortcode adaptable (.Get) variable declaration

support
1

Hello,

Objective: I am trying to get carousel images displayed from the web (eg imgur, Flickr, unsplash …). Carousel code is from SWIPER.

Now, when I want to display an array of say 6 images, I can declare them in the shortcode directly as below:

  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"> <img src="{{.Get 0}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 1}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 2}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 3}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 4}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 5}}"> </div>
      <div class="swiper-slide"> <img src="{{.Get 6}}"> </div>
  </div>
</div>

This works pretty fine if the number of images are fixed (6, in this case). I can use this code above in multiple pages as long as the length of the number of images is 6.

What I want to achieve is a shortcode with variable parameters. It should adjust to the number of arguments passed.

Eg I should be able to call the same shortcode with different arguments when needed.

{{< shortcd “link1” “link2” “link3” >}}
{{< shortcd “link1” “link2” “link3” “link4” “link5” >}}

I am new to Hugo and new to the world of web development. Please provide a solution to this.
PS: I do not understand code much, and I am trying to. But it would be of much help if you could share the predefined code, so that I may copy and paste.

Thanks,
Ayan

2

Shortcodes have their own .Params variable, which is an array (a list, also called a slice in Go) of all the parameters passed into the short code.

A working example:

layouts/shortcodes/testShortcode.html:

{{- /* Test shortcode showing how to handle an unknown number of parameters /* -}}

{{- /* the .Params variable holds all the parameters passed to the shortcode */ -}}
{{- /* https://gohugo.io/templates/shortcode-templates/#params */ -}}

<p>The following params were passed into this short code:</p>
<ul>
{{ range .Params }}
  <li>{{ . }}</li>
{{ end }}
</ul>

to call this short code:

{{< testShortcode "param1" "param2" >}}

{{< testShortcode "param1" "param2" "param3" "param4" "parma5" >}}

And the following is output:

The following params were passed into this short code:
  - param1
  - param2
The following params were passed into this short code:
  - param1
  - param2
  - param3
  - param4
  - parma5
3

Put this into your shortcode:

<div class="swiper-container">
  <div class="swiper-wrapper">
{{- range $link := .Params -}}
   <div class="swiper-slide"><img src="{{ $link | safeHTML }}"></div>
{{- end -}}
</div>
</div>

Usage:

{{< shortcd "https://picsum.photos/seed/wws/200/300" "https://picsum.photos/seed/sssw/200/300" "https://picsum.photos/seed/pplk/200/300" >}}
4

Thanks for the explanation @angus. The shortcode works, but I’m unable to get the intended swiper carousel. It works very well for the lists.

5

Thank you so much @pamubay. Precisely what I was looking for :heart_eyes: :clap: