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}}">
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.
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
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>
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
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?
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?
jumbo.html
jumbo_intro.html
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.
kascme
August 11, 2020, 9:48am
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
Thank you for the simple solution !
system
Closed
August 13, 2020, 8:23pm
11
This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.