Is it possible to loop through shortcode arguments?

#1

Is there a way to loop through shortcode arguments? I’m working on an gallery implementation with a shortcode and it’s a bit strange to only have a fixed amount of pictures in said gallery.

#2

Hmm, sounds like your gallery might be a good candidate for the new bundle processing feature.

We need some more info to be able to help you, so please have a look at Requesting Help and provide some more details? Thanks.

#3

Is that the image processing feature, I’m currently making use of that.

I would like to call the shortcode like that:

{{< gallery image1 image2 image3 … >}}

My current solution is to make shortcodes like gallery3 (
https://gist.github.com/olikami/3ce66e207e70ded72dbb02d46a45599e).

I thought I should use the shortcode, if I want to be able to place a
gallery anywhere.

Here’s an example of a gallery with 5 pictures on my blog
https://oli.photos/2013/08/whale-watching/ All the code can be found in the
gist.

#4

I have not tested it, but, @bep’s test repo shows some examples of using range to get all images in the bundle.

It should be possible to get images of just a particular name, for instance. Then you can just supply, say, a “prefix” of the name and name your images to be put in the gallery, in a similar way. Like gallery-image1.jpg, gallery-image2.jpg. The idea is to just pass gallery-image to the shortcode, and have it loop over them.

#5

Edging more toward what you are talking about:

#6
#7

Just FYI, .GetByPrefix has been deprecated, and replaced with .GetMatch. Though, that will return only the first match. To get a slice of all the matches so that you can use range to loop through it, use .Match.

See:

1 Like
Range inside a .GetByPrefix?
#8

Ok, given a page bundle with images named gallery-1.jpg, gallery-2.jpg etc, and a shortcode like this:

{{ "<!-- ENTERING shortcode gallery.html -->" | safeHTML }}
<article>
{{- $matchstr := (.Get 0) -}}
{{- range .Page.Resources.Match $matchstr -}}
{{ $scaled := .Resize "500x" }}
  <a href="#" class="fl w-50 w-25-l link overflow-hidden">
    <div role="img" aria-label="Gallery Image" class="grow aspect-ratio--4x6 " style="background: url({{ $scaled.RelPermalink }}) no-repeat center center; background-size: cover;"></div>
  </a>
{{ end }}
</article>
{{ "<!-- LEAVING shortcode gallery.html -->" | safeHTML }}

Adding the shortcode code to your markdown file, like:

 {{< gallery "gallery*" >}}

…will render a gallery, assuming tachyons.io. This is just using the example here:

http://tachyons.io/components/collections/movies/index.html

You can adapt it how you need. Just put the repeated element (in the above case, the <a> tag) inside the range.

#9

So, with your example, I guess:

{{ "<!-- ENTERING shortcode gallery.html -->" | safeHTML }}
<div class="slider">
    <ul class="slides">
    {{- $matchstr := (.Get 0) -}}
    {{- range .Page.Resources.Match $matchstr -}}
    {{ $scaled := .Fill "800x400" }}
      <li>
        <img src="{{ $scaled.RelPermalink }}">
      </li>
      {{- end -}}
    </ul>
  </div>
{{ "<!-- LEAVING shortcode gallery.html -->" | safeHTML }}
#10

Just for the record: Yes - e.g. like this:

<div class="slider">
    <ul class="slides">
      {{- range (seq 0 (sub (len .Params) 1) ) }}
      <li>
        {{- $myArg := $.Get . }}
        {{ printf `%s` $myArg }}
      </li>
      {{- end }}
    </ul>
</div>

But as it comes to galleries see answers above …

2 Likes