Does render-imge hook execute before a wrapping shortcode sees the internal markdown img syntax?

support
1

Say you have content file with {{% figcaption %}} ![AltText](photo.jpg "Title) {{% /figcaption %}}

And you have an render-image.html render hook.

Will the render hook take the image markdown syntax, render it into html, and then the shortcode will consume it thinking it is markdown? Or will the shortcode consume the markdown, and in the shortcode when the .Inner is rendered that’s when the render hook is called?

Or maybe more to what I’m really getting at now that I think about it more as I type, if I wanted to create my own method to render the standard image markdown syntax, and do so with passing extra params to the shortcode… something like this:

{{< renderImg caption="blahblah" attrb="Ansel Adams" >}} [AltText](photo.jpg "Title") {{< /renderImg >}}

Would the markdown rendering happen before the shortcode gets to consume the Inner or would the shortcode consume the Inner first and render it as specified by the shortcode into html, and the markdown rendering process wouldn’t ever see/touch it?

Edit: To my understanding, the shortcode with % indicates the inside is to be considered markdown, and with <> it’s to be considered simply text?

The docs at Shortcodes with Markdown give zero information about them.

The docs at Shortcodes: Rel and Relref appear to imply that the shortcode will render first, supplimenting the markdown in the returned shortcode output, and then the markdown rendering processes what results.

2

Thea above paragraph is hard to wrap a brain around :slight_smile:

If my memory serves me correct,

  • The outermost shortcode behaves differently than the inner ones.
  • With {{% figcaption %}} ![AltText](photo.jpg "Title) {{% /figcaption %}} you’re telling Hugo that the shortcode produces Markdown, so we will render it and then pass it on to Goldmark (or whatever engine you’re using). This way it can take part in the document state (with headings etc.)
  • Inner shortcodes marked as markdown, will be rendered by Goldmark (e.g.) on its own, e.g. {{% figcaption %}} ![AltText](photo.jpg "Title) {{%foo %}}**Hello**{{% /foo %}} {{% /figcaption %}}
3

Yea, I’m sorry for the word-salad. I had this idea and I couldn’t figure out how to communicate it.

I’ve done a little research into the differences of shortcodes with respect to the % and <> delimiters.

My understanding is thus:

  • Shortcodes delimited with % indicate that the output of the shortcode will be markdown and, as you said, will be passed along the other native markdown of the content file to the markdown engine.
  • Shortcodes delimited with <> indicate that the output of the shortcode will be HTML and thus will be ignored by the markdown rendering engine.

Are these accurate? And before Hugo v0.55, the % worked differently, but there isn’t any information left as to what it did.

So I guess the crux of my question is, if I:

  1. want to visualize images using standard markdown editors with the standard image markdown syntax
  2. want to render those images in a custom fashion on build

Can I use the standard markdown image syntax within an HTML shortcode?

I can’t (or don’t want to) use render hooks for images because I cannot pass any extra parameters to them and I don’t want to encode extra parameters into the 3 available attributes.

And I don’t want to use a full shortcode solution because then I can’t preview the image in markdown editors.

So would the below be valid to accomplish those goals?

{{< renderImg format="webp" caption="blahblah" attrb="Ansel Adams" >}} [AltText](photo.jpg "Title") {{< /renderImg >}}

Using <> since I want it rendered as HTML and not markdown?

4

Move title and src into your template and drop the standard markdown for images

{{< renderImg format="webp" caption="blahblah" attrb="Ansel Adams" title=Title" src=photo.jpg >}}

and build the HTML you want to have

PS: corrected spelling

5

I know I can do that, I’m wondering how I can do it the other way I described.