Call Shortcodes inside Hugo Shortcodes

Hugo develop when you need to call shortcodes inside shortcodes.

Nested Shortcodes

Shortcodes Sample

layouts/shortcodes/gallery.html

1
2
3
<div class="{{.Get "class"}}">
  {{.Inner}}
</div>

layouts/shortcodes/img.html

1
2
3
4
5
6
{{- $src := .Get "src" -}}
{{- with .Parent -}}
  <img src="{{$src}}" class="{{.Get "class"}}-image">
{{- else -}}
  <img src="{{$src}}">
{{- end }}

.Parent is the parent shortcode call and whether the context is accessible.

Call

Calling Shortcodes from content.

1
2
3
4
5
{{< gallery class="content-gallery" >}}
  {{< img src="/images/one.jpg" >}}
  {{< img src="/images/two.jpg" >}}
{{< /gallery >}}
{{< img src="/images/three.jpg" >}}

Result

1
2
3
4
5
<div class="content-gallery">
    <img src="/images/one.jpg" class="content-gallery-image">
    <img src="/images/two.jpg" class="content-gallery-image">
</div>
<img src="/images/three.jpg">

Call Partials instead of Shortcodes

More flexible than nested shortcodes.

Call Shortcodes inside Shortcodes

4
5
<!-- Inside shortcode -->
{{< other-shortcode >}}

Direct shortcode calls are not allowed.

Call Partials inside Shortcodes

4
5
<!-- Inside shortcode -->
{{ partial "something.html" . }}

That’s all. Congratulations! 👏