Details shortcode from hugo-book theme does not respect inner markdown

support
1

Details is defined as

<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
  <summary>{{ $summary | .Page.RenderString }}</summary>
  <div class="markdown-inner">
    {{ .Inner }}
  </div>
</details>

In https://github.com/jpritikin/coach/blob/groups/content/_index.md, I have

  - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.  
      {{< details "Reveal my selfie with Chris" >}}
      ![Burris](burris-2023.webp)
      {{< /details >}}

But the image is rendered as the text instead of an image. See https://groups.coach-2x4.pages.dev/

What am I doing wrong?

2

When you indent markdown 4 or more spaces it is an indented code block. Remove the indentation.

{{< details "Reveal my selfie with Chris" >}}
  ![Burris](burris-2023.webp)
{{< /details >}}
3

Okay, I tried your suggestion but it still renders as text.

4

Sorry, I didn’t notice the shortcode notation—you’re using {{< >}}, but, with the way the shortcode is written, you need to use {{% %}} when .Inner contains markdown. And you must not indent the markdown between the opening and closing tags by more than 3 spaces.

{{% details "Reveal my selfie with Chris" %}}
  ![Burris](burris-2023.webp)
{{% /details %}}

But this isn’t great, because the theme author is passing the .Summary through the markdown renderer, which means the .Summary is rendered to HTML twice.

<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
  <summary>{{ $summary | .Page.RenderString }}</summary> 
  <div class="markdown-inner">
    {{ .Inner }}
  </div>
</details>

If it were me, I’d override the shortcode with my own, and consistently call it with one notation or the other.

5

When I used {{% %}} then the nested list got incorrectly unnested. That’s why I switched to {{< >}} which seems to work as expected with respect to the surrounding list.

Great, can you suggest an improved shortcode?

6

What nested list?

7

Look at the surrounding markup. That’s why I had the indent before:

- [Internal Family Systems](https://ifs-institute.com/practitioners/all/110287)
  - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.  
{{< details "Reveal my selfie with Chris" >}}
![Burris](burris-2023.webp)
{{< /details >}}
  - [Intimacy from the Inside Out](https://www.toniherbineblank.com/trainings.html) relationship therapy Basic Training (IFS Level 2) completed Jun 2023.
8

So you want the details element to be part of previous list item? If yes…

markdown 
My list:

- [Internal Family Systems](https://ifs-institute.com/practitioners/all/110287)
  - [Creating Healing Circles](https://burriscounseling.com): Using the IFS Model in Group Therapy completed Aug 2023.
    {{< details "Reveal my selfie with Chris" >}}
      ![Burris](/burris-2023.webp)
    {{< /details >}}
  - [Intimacy from the Inside Out](https://www.toniherbineblank.com/trainings.html) relationship therapy Basic Training (IFS Level 2) completed Jun 2023.

layouts/shortcodes/details.html 
<details {{ if or (.Get "open") (in .Params "open") }}open{{ end }}>
  {{- $summary := cond .IsNamedParams (.Get "title") (.Get 0) -}}
  <summary>{{ $summary | .Page.RenderString }}</summary>
  <div class="markdown-inner">
    {{ .InnerDeindent | .Page.RenderString }}
  </div>
</details>

Always use the {{< >}} notation when calling this revised shortcode.

1 Like
9

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