Use a partial inside a markdown file

support
1

Right now I have (in a markdown file):

![Black Friday](/images/uploads/black-friday.jpg)

But I want to use a partial to serve up responsive images (outwith the scope of the question). So ideally I’d like to do:

{{ partial "html/helper/image" (dict "context" . "base" "/images/uploads/black-friday" "extension" "jpg" "alt" "Black Friday") }}

(hopefully you get the idea, the content isn’t too important)

When I include this call to a partial in my Markdown file its just rendered to the browser as is. How can I tell Hugo/Markdown to call this, execute it, give me the result, do the business as if it was in an HTML file.

I have spent some time trying to find this out but with no luck so apologies if this is easy or already answered. Thanks in advance.

2

Partials may be called from templates (including shortcodes), but not from content (markdown, etc.).

Shortcodes may be called from content.

3

Thanks for the reply. I gave shortcodes a whirl but I couldn’t work out how to get it to work, that page doesn’t mention partials unfortunately. Ultimately to be able to call something like:

{{< partial "html/helper/image" "base" "/images/uploads/black-friday" "extension" "jpg" "alt" "Black Friday" >}}

which does look for a shortcodes/partial.html file but its how to process that correctly that’s got me stumped.

4

Maybe the trick is not to try and call a partial but instead just reproduce the partial functionality in a short code and use that:

5

So if it helps someone else. I ended up using:

(in Markdown)

{{< meat base="/images/black-friday" extension="jpg" alt="Black Friday" >}}

And in shortcodes/meat.html

<img src="{{ .Get "base" }}.{{ .Get "extension" }}" alt="{{ .Get "alt" }}" />

Now I can of course make this into a responsive picture/srcset etc. Thanks!

6

If you want to keep things DRY, you can use a partial from a shortcode. The trick is to remember that partials called from shortcodes do not have access to site.blah or $.Site.blah variables because shortcodes context only has access to .Page (and consequently the .Param function is unavailable, BUT (at least with modern Hugo) you can use .Page.Site.blah so you can use default or testing .Page.params and .Page.Site.params to achieve the same result.

It might be easiest to do {{ partial "somepartial" .Page }} from within the shortcodes/someshortcode.html and when writing the partial make sure to avoid site.blah, .Param etc.

That way the partial can be used as usual as well as from a shortcode.

1 Like
7

Thank you for that info. I think I just had my epiphany at the same time. Inside shortcode/meat.html I can do (as you suggested):

{{ partial "resp-img" (dict "base" (.Get "base") "extension" (.Get "extension") "alt" (.Get "alt")) }}

(contrived example, I have more parameters but hopefully you get the idea)

Fantastic, DRY averted. Thanks for your help.

1 Like
8

Are you stuck with Black Friday? Using GoldMark you could use Render Hooks.

1 Like
9

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