Tagging Shortcode

support
1

Hi Everyone,

I’m trying to create a shortcode that can loop through parameters and use them to create HTML attributes. The code I’m using looks like this:

Content Markdown File:

{{% tag "tag-1" "tag-2" "tag-3" %}}

Tag Shortcode

<div {{ range .Params }}data-tag="{{ . }} "{{ end }}>{{ .Inner }}</div>

HTML Result

<div data-tag="tag-1 "> ... </div>

This problem with this is only the first parameter is being rendered in the HTML (‘tag-1’). How can I fix this so that every tag is displayed?

Many thanks!

2

I just tested this and it works fine. So maybe you’re doing something else.

Would you post your entire shortcode definition. and also how you’re calling it from your content.

For reference, here’s the shortcode definition I used:

<div {{ range .Params }}data-tag="{{ . }}" {{ end }}>
  {{ .Inner | plainify }}
</div>

How I called it:

{{% foo "tag-1" "tag-2" "tag-3" %}}
Some inner stuff.
{{% /foo %}}

And the output:

<div data-tag="tag-1" data-tag="tag-2" data-tag="tag-3" >
  Some inner stuff.

</div>
3

Oh wow that’s weird. I wonder what could affecting it. Here’s my code, copied directly:

How I call tag.html shortcode*
{{% tag “tag-1” “tag-2” %}}
Inner Stuff
{{% /tag %}}

Tag shortcode
<div {{ range .Params }}data-tag=“{{ . }}”{{ end }}>
{{ .Inner }}

Output
<div data-tag="tag-1">Inner Stuff</div>

4

What Hugo version are you using?

Also I just used the plainify function to strip out the <p> tags

5

Hugo version is v0.51/extended windows/amd64

Tried out plainify but still only first parameter shows up.

6

Hmm, not sure what’s going on with your code then. FYI I ran my test with Hugo v0.53 on Windows.

Well that would only affect .Inner

7

@zwbetz So inspect element in Chrome only shows the first tag on the <div> element, but looking at the source code shows all tags. I guess they were there the whole time. Thanks for looking into this!