# Sharing .Scratch between shortcode outer and .Inner

**URL:** <https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968>\
**Category:** support\
**Created:** [March 21, 2024, 5:25pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968 "2024-03-21T17:25:56Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 5:25pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/1 "2024-03-21T17:25:56Z")

</div>

My goal is to enable responsive image sizes, where the `sizes` item is context-aware. First, I have a `gallery.html` shortcode that defines a number of columns for image galleries:

```golang
{{ $p := .Page }}
{{ $cols := int (.Get "cols") }}
{{ $p.Scratch.Set "columns" $cols }}

<div class="gallery gallery-cols-{{ $cols }}">
{{- print .Inner | $p.RenderString -}}
</div>

{{ $p.Scratch.Delete "columns" }}

```

Then, I overwrite the `layout/_default/_markup/render-image.html` with:

```golang
{{ $image := resources.Get .Destination }}
{{ $cols := .Page.Scratch.Get "columns" | default 0 }}
{{ $sizes := site.Params.Images.sizes }}

{{ if eq $cols 1 }}
  {{ $sizes = "(max-width: 992px) 100vw, (max-width: 1200px) 66.67vw, 50vw" }}
{{ else if eq $cols 2 }}
  {{ $sizes = "(max-width: 140px) 100vw, (max-width: 992px) 50vw, (max-width: 1200px) 33.33vw, 25vw" }}
{{ end }}

<img src={{ $image.RelPermalink }} alt="image"
    decoding="async" loading="lazy"
    sizes="{{ $sizes }}" srcset="..."
    width="{{ $image.Width }}" height="{{ $image.Height }}"
  />

```

Then in the Markdown page, I call:

```golang
{{% gallery cols="2" %}}
![](calibration-after.jpg)
![](calibration-before.jpg)
{{% /gallery %}}

```

This works properly on one website, not on the other. On the other, the scratch key `"columns"` seems to be created and deleted in `gallery.html` shortcode before its `.Inner` gets evaluated (in any case, its value is empty). The thing is, there can be more than one gallery per page, and the columns value needs to be properly scoped to the relevant gallery. What could be the problem here ?

(Using Hugo 0.124.1)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 5:44pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/2 "2024-03-21T17:44:24Z")

</div>

Your example does not show a nested shortcode. Please clarify.

Also, when testing, are you looking what is rendered by `hugo server` or are you examing the files rendered after running `hugo`?

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 5:51pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/3 "2024-03-21T17:51:56Z")

</div>

Yes, sorry, this is the gutted example where the upmost `{{ .Inner }}` is directly Markdown. In some other examples, `{{ .Inner }}` contains another nested shortcode (like `figure`). The logic is the same: I want to share a variable inside the context of the upmost shortcode.

I’m rendering using `hugo server --disableFastRender` on both websites (the working on and the un-working one).

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 5:53pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/4 "2024-03-21T17:53:05Z")

</div>

Before I spend any time digging into the details, please change all instances of `Page.Scratch` to `Page.Store` then test again.

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 5:56pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/5 "2024-03-21T17:56:02Z")

</div>

Changing `Page.Scratch` to `Page.Store` doesn’t fix it.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 5:56pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/6 "2024-03-21T17:56:53Z")

</div>

> [@aurelienpierre](#):
>
> this is the gutted example

Can you provide a non-gutted example? The goal is to create a minimal reproducible example…

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 5:57pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/7 "2024-03-21T17:57:31Z")

</div>

The gutted example is already failing.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 5:58pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/8 "2024-03-21T17:58:25Z")

</div>

So I don’t need to nest shortcodes to make it fail? If yes, please rename this topic.

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 5:59pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/9 "2024-03-21T17:59:52Z")

</div>

> [@jmooring](#):
>
> So I don’t need to nest shortcodes to make it fail?

No. Renamed. Sorry for the confusion.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 6:11pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/10 "2024-03-21T18:11:09Z")

</div>

Here’s an attempt to create a minimal reproducible example based on your description.

```plaintext
git clone --single-branch -b hugo-forum-topic-48968 https://github.com/jmooring/hugo-testing hugo-forum-topic-48968
cd hugo-forum-topic-48968
hugo server

```

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 6:18pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/11 "2024-03-21T18:18:12Z")

</div>

And with the above, I’m not seeing what the problem is. Can you clarify?

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 6:23pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/12 "2024-03-21T18:23:51Z")

</div>

I don’t either, your example works here. As is my other website.

Somehow, something is messing with my `.Page.Scratch` or `.Page.Store` states here, but I have checked and bypassed all calls to these methods and nothing fixes it.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 6:27pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/13 "2024-03-21T18:27:50Z")

</div>

If you can figure out the difference feel free to submit a PR against the `hugo-forum-topic-48968` branch of `https://github.com/jmooring/hugo-testing`.

Note that I’ve also tested this with a 100 page site, spot checked about 30 of them, and everything looks right.

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 7:50pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/14 "2024-03-21T19:50:44Z")

</div>

> [@jmooring](#):
>
> `https://github.com/jmooring/hugo-testing`.

Found it. [Pull requests · jmooring/hugo-testing · GitHub](https://github.com/jmooring/hugo-testing/pulls)

It was actually a problem of nesting shortcodes, but since the `container.html` shortcode took the whole block, I didn’t see it right away.

So what makes gallery break is:

```golang
{{% container %}}
{{% gallery cols="2" %}}
![](calibration-after.jpg)
![](calibration-before.jpg)
{{% /gallery %}}
{{% /container %}}

```

It breaks the same way either with `.Page.Scratch` or `.Page.Store`.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 8:11pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/15 "2024-03-21T20:11:46Z")

</div>

Call the inner shortcode using the `{{< .. >}}` notation.

```plaintext
{{% container %}}

{{< gallery cols="1" >}}
![](calibration-after.jpg)
![](calibration-before.jpg)
{{< /gallery >}}

{{% /container %}}

```

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 8:40pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/16 "2024-03-21T20:40:44Z")

</div>

Thanks ! That works. But I was under the impression that `{{% %}}` was meant to enable Markdown parsing for `.Inner`, did I got that wrong ?

Also, what happens for more than one nesting, like:

```golang
{{% row %}}
    {{< column >}}
        {{< figure src="calibration-after.jpg" />}}
    {{< /column >}}
{{% /row %}}

```

(This doesn’t work and I seem to have tested all possible combinations).

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [March 21, 2024, 8:41pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/17 "2024-03-21T20:41:53Z")

</div>

> [@aurelienpierre](#):
>
> `{{% %}}` was meant to enable Markdown parsing

You’re already doing that by passing `.Inner` through `.Page.RenderString`.

As for deeply nested shortcodes… you’re on your own. Nested shortcodes are, for me, difficult to reason about; I avoid them when possible.

---

<div class="post-metadata">

**Author:** ![aurelienpierre](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/aurelienpierre/32/18358_2.png) [@aurelienpierre](https://discourse.gohugo.io/u/aurelienpierre)\
**Post date:** [March 21, 2024, 8:49pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/18 "2024-03-21T20:49:55Z")

</div>

> [@jmooring](#):
>
> Nested shortcodes are, for me, difficult to reason about; I avoid them when possible.

I use deep nesting only on the homepage, to define content blocks that comply with responsive layouts and breaking points. Basically, in that context, shortcodes become reusable HTML macros that prevent from copy-pasting lots of `<div class="d-none d-lg-flex flex-none shadow-sm etc....">` in the Markdown content.

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [March 23, 2024, 8:49pm UTC](https://discourse.gohugo.io/t/sharing-scratch-between-shortcode-outer-and-inner/48968/19 "2024-03-23T20:49:58Z")

</div>

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