Hugo

Render Hooks (+ other shortcodes) in Shortcodes?

I have an markdown image within a shortcode (which is using {{ .Inner | markdownify }} ). I’m seeing standard .md to .html rendering and not the one defined in the custom render hooks.

is this correct? (or have hooks not yet been applied to shortcodes?)

See the new .RenderString method.

1 Like

Yup, i’ve checked that out, but it doesn’t process shortcodes? so it’s an either-or situation or will this change in the future?

That is correct, but I thoght your question was about rendering hooks re markdownify?

yes – just clarifying… and folding in some new questions (i’ll edit the thread title)

so, as of now, you cannot have a shortcode/partial which both processes shortcodes and processes render hooks?

That looks like a trick question …

haha, maybe more of an open ended question if there is a way to do both.

just for some context:
I saw that the Reveal-Hugo theme does not support Goldmark yet, so I thought that I might as well make a hugo theme which uses reveal.js (thought it would be a good exercise to understand it’s inner working and make a “hugo version” which matches my workflow). So, my thought was to delineate each slide within a shortcode which could take parameters. Within each slide there could be other shortcodes to handle formatting and interactivity. In this case we are dealing with nested shortcodes and content.

Yes, it’s possible, although it’s a little tricky. Below is what I just did on my site, as an example:

It uses three files:

  • layouts/partials/elements/picture.html: the partial (name doesn’t matter)
  • layouts/_default/_markup/render-image.html: the render hook (fixed name)
  • layouts/shortcodes/picture.html: the shortcode (name doesn’t matter)
  1. Create the partial, that makes all processing (e.g. create figure and picture elements, for captioned and responsive images)
  2. Create the render hook, that calls the partial with .Destination, .Text, .Title etc. as parameters
  3. Create the shortcode, that calls the partial with above parameters, plus others specified directly (e.g. attribution text)

In the partial, test non-required parameters for existence.

have you tried this with mixed content? (i.e. a mix of markdown and shortcodes within the op-level shortcode?)

No, just with one-level shortcodes.

I think I’m looking for this:

Once this is solved, then it will address my issue.


Though, if someone is interested in a example use case :

Say, I’m trying to make a slideshow with three slides, with some content in it… and maybe the last two slide are within what many presentation frameworks call a “section” (or a “stack”) which are slides that vertically scroll.


{{< slide >}}

# Slide 1

Hello, how are you?

{{< /slide >}}

{{< section >}}

{{< slide template="temp1" other-param="foo" >}}

We can do more complex things like adding parameters for styling.


{{< /slide >}}

{{< slide >}}

or use other shortcodes which can easily section content 

{{< gallery >}}
![img1](img1.png)
![img2](img2.png)
![img3](img3.png)
![img4](img4.png "And with Render Hooks we can add even more complex behavior".)
{{< /gallery >}}

{{< /slide >}}

{{< /section >}}

I just realized I didn’t understand your question before, and so my previous answer doesn’t answer the question at all. Sorry for the noise.