Programmatically use shortcode inside another shortcode's definition file

support
1

Hello,
I need some help for calling shortcode inside shortcode.
I want to reuse “figure” shortcode without copy-paste.

Thanks.

2

You can already do nested shortcodes.

If you try to be very specific with what you want to achieve, what you tried, and what didn’t work then some people may be able to help out :slight_smile:

1 Like
3

Thanks for response.
My naive approach was to use
{{% figure . %}} inside shortcodes/img.html
I got error:
“shortcodes/img.html : template: shortcodes/img.html:2: unexpected “%” in command”
How can I call another shortcode inside my.

4

If you want help you’re going to have to provide your full example :wink:

However i can already tell you that unless you want to put Markdown content inside, {{% ... %}} seems inappropriate, according to the docs. See figure shortcode docs for usage :slight_smile:

5

Well,
It is hard to provide exaple for something that I don’t know how to implement.
Please let me try again.
I think of shortcode as kind of reusable code (function).
I can use it inside my markdown document.
Can I use shortcode inside another shortcode definition?

6

That’s exactly what @cmal linked in his first comment. Did you read it in entirety?

7

Please fix me (It is possible I’m blind or stupid … or both :slight_smile: ), but the closest thing i found in documentation is
“returns a boolean value depending on whether the shortcode in question is called within the context of a parent shortcode.”
The key is “is called”, but I whant to call shortcode manually in my shortcode definition (shortcodes/myshortcode.html); ref the topic.
In other words “Nested shortcodes” doescribes composotion inside MD markdown, and I’m looking for using shortcode inside shortcode definition file

8 
{{% shortcode1 %}}
Text with another {{< shortcode2 >}} in it.
{{% /shortcode1 %}}

The brackets with the percent sign % indicate, that everything INSIDE them will be rendered through the markdown engine. Additionally the second shortcode will be rendered.

9

The code below expected to be placed inside MD file.

{{% shortcode1 %}}
Text with another {{< shortcode2 >}} in it.
{{% /shortcode1 %}}

By the moment I want to use shortcode2 I’m defining shortcode1, so I need place my code into shortcodes/shortcode1.html
If I place {{< shortcode2 >}} inside shortcodes/shortcode1.html I get error
"shortcodes/shortcode1.html : template: shortcodes/shortcode1.html:2: unexpected “<” in command
"

10

Using .Parent appears to be the key to get them to nest.

11

Looks like we need someone with hugo in-deep knowlage.
Assuming shortcode is ordinary template it should be possible to call it with

{{ partial “some_path_to_hugo_embeded__templates/figure.html” . }}

12

ugly solution with copy-pasted and a bit hacked figure.html
$ cat shortcodes/shortcode1.html

{{- $original := .Page.Resources.GetMatch (printf "%s*" (.Get "src")) -}}
{{- $resizeParam := printf "%sx%s" (.Get "width") (.Get "height") -}}
{{- $resized := $original.Resize $resizeParam -}}
{{- .Scratch.Set "src" $resized.RelPermalink -}}
{{- .Scratch.Set "link" $original.RelPermalink -}}
{{- .Scratch.Set "height" $resized.Height -}}
{{- .Scratch.Set "width" $resized.Width -}}
{{- if isset .Params "target" -}}
{{- .Scratch.Set "target" (.Get "target") -}}
{{- end -}}
{{- if isset .Params "rel" -}}
{{- .Scratch.Set "rel" (.Get "rel") -}}
{{- end -}}
{{- if isset .Params "alt" -}}
{{- .Scratch.Set "alt" (.Get "alt") -}}
{{- end -}}
{{- if isset .Params "title" -}}
{{- .Scratch.Set "title" (.Get "title") -}}
{{- end -}}
{{- if isset .Params "caption" -}}
{{- .Scratch.Set "caption" (.Scratch.Get "caption") -}}
{{- else if .Inner -}}
{{- .Scratch.Set "caption" .Inner -}}
{{- end -}}
{{- if isset .Params "class" -}}
{{- .Scratch.Set "class" (.Get "class") -}}
{{- end -}}
{{- if isset .Params "attr" -}}
{{- .Scratch.Set "attr" (.Get "attr") -}}
{{- end -}}
{{- if isset .Params "attrlink" -}}
{{- .Scratch.Set "attrlink" (.Get "attrlink") -}}
{{- end -}}

{{ template "figure-internal" .Scratch }}

{{- define "figure-internal" -}}
<figure{{ with .Get "class" }} class="{{.}}"{{ end }}>
    {{ if .Get "link"}}<a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>{{ end }}
        <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}" {{ end }}{{ with .Get "width" }}width="{{.}}" {{ end }}{{ with .Get "height" }}height="{{.}}" {{ end }}/>
    {{ if .Get "link"}}</a>{{ end }}
    {{ if or (or (.Get "title") (.Get "caption")) (.Get "attr")}}
    <figcaption>{{ if .Get "title" }}
        <h4>{{ .Get "title" }}</h4>{{ end }}
        {{ if or (.Get "caption") (.Get "attr")}}<p>
        {{ .Get "caption" }}
        {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
            {{ .Get "attr" }}
        {{ if .Get "attrlink"}}</a> {{ end }}
        </p> {{ end }}
    </figcaption>
    {{ end }}
</figure>
{{- end -}}
13

It’s very simple. use as following:
in frontmatter:

{{< flexBox >}}
{{< shortcode 1 >}}
{{< shortcode 2 >}}
{{< shortcode 3 >}}
{{< / flexBox >}}

In your shortcode file:

{{ $_hugo_config := { "version": 1 } }}

{{ .Inner }}

That’s it!