Paragraph breaks in shortcode parameters?

support
1

I have a shortcode called fig where I would like to do the following:

{{< fig
  title="Can I have more than one paragraph in a caption?"
  caption="This is the first paragraph where I talk about stuff.

I want another paragraph here, but it errors out."
  >}}
  {{< fig-img src="proto-product-shot.jpg" alt="Device prototype">}}
  {{< /fig >}}

If I can’t use line breaks, is there an escaped character that would cause markdown to render the paragraph?

The fig shortcode looks like this:

<figure class="img-fig {{ with .Get "class" }}{{ . }}{{ end }}">
<div class="img-fig-container">
    {{ .Inner }}
</div>
    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
            <figcaption>
                {{ with (.Get "title") }}
                    <h4>{{ . }}</h4>
                {{ end }}
                {{ if (or (.Get "caption") (.Get "attr")) }}<p>
                    {{ .Get "caption" | markdownify }}
                    {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
                        {{ .Get "attr" | markdownify }}
                        {{ if .Get "attrlink" }}</a>{{ end }}</p>
                {{ end }}
            </figcaption>
        {{- end -}}
</figure>
2

Multiline strings isn’t supported in params, but you should be able to insert newlines by something ala:

This is the first paragraph where I talk about stuff.\n\nI want another paragraph here, but it errors out.
3

I couldn’t get that to work. It actually renders the \n\n as part of the text without escaping.

4

Instead of having caption as a param, pass it as .Inner

5

I thought about that, but I use fig as a layout block and .Inner for nested shortcodes of various types.

This might be a good constraint, to encourage brevity. It is a caption after all.

6

I see – well, another option is to declare the caption in your front matter, then grab it in your shortcode. This would still allow you to pass a shortcode for .Inner

Content:

---
caption: |
  1st line
  2nd line
  3rd line
---

{{< fig title="Some title" >}}
  {{< fig-img src="some-image.jpg" alt="Some alt">}}
{{< /fig >}}

Shortcode:

<figure class="img-fig {{ with .Get "class" }}{{ . }}{{ end }}">
  <div class="img-fig-container">
    {{ .Inner }}
  </div>
  {{- if or (or (.Get "title") (.Page.Params.caption)) (.Get "attr") -}}
  <figcaption>
    {{ with (.Get "title") }}
    <h4>{{ . }}</h4>
    {{ end }}
    {{ if (or (.Page.Params.caption) (.Get "attr")) }}<p>
      {{ .Page.Params.caption | markdownify }}
      {{ with .Get "attrlink" }}<a href="{{ . }}"> {{ end }}
        {{ .Get "attr" | markdownify }}
        {{ if .Get "attrlink" }}</a>{{ end }}</p>
    {{ end }}
  </figcaption>
  {{- end -}}
</figure>
1 Like
7

That’s a good suggestion. Thanks!

8

Perhaps it is possible to create two separate (begin, end) shortcodes, and have regular markdown in between?

For example, in your content you put:

{{< bible_quote_start >}}
"Again, ye have heard that it hath been said by them of old time, Thou shalt not forswear thyself, but shalt perform unto the Lord thine oaths:
But I say unto you, Swear not at all; neither by heaven; for it is God’s throne:
Nor by the earth; for it is his footstool: neither by Jerusalem; for it is the city of the great King.
Neither shalt thou swear by thy head, because thou canst not make one hair white or black.
But let your communication be, Yea, yea; Nay, nay: for whatsoever is more than these cometh of evil."
{{< bible_quote_end "Matthew 5:33-37" >}}

With definitions for bible_quote_start and bible_quote_end which define only the beginnings or endings of certain html tags. Of course, this introduces errors in your html when your ‘bible tags’ don’t match, but it does the job.

bible_quote_start:

<span class="bible_text">

bible_quote_end:

</span></span>
<span class="bible_ref">{{ .Get 0 }}</span>
9

You can do:

{{< fig title=`Some long title with

line braks` >}}

Rquires a fairly recent Hugo version

10

A post was split to a new topic: Include
elements in shortcode parameters