Shortcode - nested shortcode, multiple inner

support
1

How can I display multiple inner depending on the nested shortcode function?

{{< jumbo name="test" >}}

  {{< jumbo_intro title="Jumbo Title" >}}
    Text Text Text
  {{< /jumbo_intro >}}

  {{< jumbo_gallery name="" >}}
      {{< jumbo_gallery_img src="test1.jpg" >}}
      {{< jumbo_gallery_img src="test1.jpg" >}}
      {{< jumbo_gallery_img src="test1.jpg" >}}
  {{< /jumbo_gallery >}}

{{< /jumbo >}}

jumbo.html

{{- $tab_set_id := .Get "name" -}}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <div class="row">
      <div class="col-6">
          {{ .Inner }}
      </div>
      <div class="col-5 offset-1">
         {{ .Inner }}
      </div>
    </div>
  </div>
</div>

jumbo_intro.html

{{- $title := .Get "title" -}}
<h4 class="">{{$title}}</h4>
<p class="lead">
{{ .Inner }}
</p>

jumbo_gallery.html

{{- $tab_set_id := .Get "name" -}}
<div>
  {{ .Inner }}
</div>

jumbo_gallery_img.html

{{- $src := .Get "src" -}}
<img src="{{$src}}">
2

I am not sure where to link to the “definite” explanation, but I changed my shortcodes to {{% and %}} instead of {{< and >}} when the inner markdown was not rendered properly. Other than that your code (on quick check only, not tested) looks good to me and I would expect it to work.

3

Not a real answer but…

You could use the frontmatter:

jumbo:
  name: test
  title: Jumbo Title
  text: |
    My jumbo text with *markdown*
  images:
    - test1.jpg
    - test2.jpg

And then some code in your page template:

{{ with .Params.jumbo }}

Or a shortcode. Etc.

1 Like
4

well hidden in the doc

5

This will output jumbo_intro and jumbo_gallery in both {{ .Inner }}

<div class="jumbotron jumbotron-fluid">
  <div class="container">

    <div class="row">
      <div class="col-6">
          {{ .Inner }}
      </div>
      <div class="col-5 offset-1">
         {{ .Inner }}
      </div>
    </div>
  </div>
</div>
6

I may found a solution. But this one is not printing all the HTML.

{{- $jumbo := .Scratch.Get "jumbo" -}}

{{- if .Inner -}}
{{- end -}}

<div class="jumbotron jumbotron-fluid">
  <div class="container">

    <div class="row">
      <div class="col-6">

        {{- range $e := $jumbo -}}
          {{ if eq (index $e "name") "intro" }}
            {{- with .content -}}
              {{- . -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}

      </div>
      <div class="col-5 offset-1">
        {{- range $e := $jumbo -}}
          {{ if eq (index $e "name") "gallery" }}
            {{- with .content -}}
              {{- . -}}
            {{- end -}}
          {{- end -}}
        {{- end -}}
      </div>
    </div>


  </div>
</div>
{{ if not (.Parent.Scratch.Get "jumbo") }}
   {{ .Parent.Scratch.Set "jumbo" slice }}
{{ end }}

{{ with .Inner }}
<h4 class="">{{$title}}</h4>
<p class="lead">
    {{ $.Parent.Scratch.Add "jumbo" (dict "name" "intro" "content" .) }}
</p>
{{ end }}

h4 and p is mssing in the output. How can I add it to the content variable?

{{ if not (.Parent.Scratch.Get "jumbo") }}
	   {{ .Parent.Scratch.Set "jumbo" slice }}
	{{ end }}

  {{ with .Inner }}
  <div>
    {{ $.Parent.Scratch.Add "jumbo" (dict "name" "gallery" "content" . ) }}
  </div>
{{ end }}

Same here. Div is missing

7

can you please add the filenames for the shortcodes to your last message? maybe the filename is not fitting to to the shortcode name you are using?

8

can you please add the filenames for the shortcodes to your last message? maybe the filename is not fitting to to the shortcode name you are using?

  1. jumbo.html
  2. jumbo_intro.html
  3. jumbo_gallery.html

The scratch add is only adding the content of the inner shortcode. I need to find a way to add the inside of the “with .Inner” statement as well.

9

If I understand you correctly, you cannot define “which inner” shortcode you want to address. .Inner is always the whole content. In this case both inner shortcodes.

I had a similar problem and solved it like this. Put something like this in the shortcode that comes first (I assume the order will not change, so in your case jumbo_intro), this should be the very last thing of the file:

--break-me-here--

Then in your jumbo shortcode, you break the .Inner content into an array and pull the right thing in the right place:

{{- $children := split .Inner "--break-me-here--" -}}
<div class="jumbotron jumbotron-fluid">
  <div class="container">
    <div class="row">
      <div class="col-6">
          {{- index $children 0 | safeHTML -}}
      </div>
      <div class="col-5 offset-1">
         {{- index $children 1 | safeHTML -}}
      </div>
    </div>
  </div>
</div>
3 Likes
10

Thank you for the simple solution !

11

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.