How to format a long shortcode in markdown?

support
1

Say I have a really long shortcode like this this,

{{<gallery "Scroll to see more!" "a.PNG, b.PNG, c.PNG, d.PNG, e.PNG, f.PNG, g.PNG, h.PNG" >}}

How do I format it in my markdown file? Could I do something like this?

{{<gallery \
   "Scroll to see more!" \
   "a.PNG, \
    b.PNG, \
    c.PNG, \
    d.PNG, \
    e.PNG, \
    f.PNG, \
    g.PNG, \
    h.PNG"\
  >
}}

Or, is there a standard/better way?

2

You’re not asking about the shortcode, but about how to call it.

I’d try to avoid this approach. Passing a single string to a shortcode that you then have to unravel to get at individual arguments is awkward. You could simply pass all the arguments on their own:
{{<gallery "Scroll to see more!" "a.PNG" "b.PNG" "c.PNG" ...>}}
and in your shortcode, use .Params to get all the parameters as a map that you can then range over.

Alternatively, put your images in a directory below the current post and access them in your shortcode using Resources.Match on the current page: https://gohugo.io/methods/page/resources/

That is much more flexible and allows you to simply use the shortcode whereever you want without passing file parameters at all.

1 Like
3

For,

{{< gallery "Scroll to see more!" >}}

I have,

{{- $caption := .Get 0 -}}
{{ $images := .Page.Resources.Match "gallery/*" }}
<figure class="gallery">
  <ul>
    {{- range $images -}}
      <li>
        <a href="{{ .RelPermalink }}" target="_blank" rel="noopener">
          <img loading="lazy" src="{{ .RelPermalink }}" />
        </a>
      </li>
    {{- end -}}
    <li></li>
  </ul>
  <figcaption>{{ $caption }}</figcaption>
</figure>

Is this what you meant?

4

Yeah. You’ve got an empty li element though.

5

That is on purpose for some CSS trickery.

6

Thanks for that link. Though display: masonry might come one day.