Output of shortcode as argument to other shortcode

support
1

I’m trying to include the output of one shortcode as parameter value for another shortcode, something like:

{{< figure src="{{% imagesrc "example.jpg" %}}" >}}

where the imagesrc shortcode is simply {{ .Site.BaseURL }}media/{{ .Get 0 }}

This errors with:

ERROR Rebuild failed: assemble: [...] got positional parameter 'example.jpg'. Cannot mix named and positional parameters

(I think the error is because the shortcode is getting a parameter named src with value {{% imagesrc " followed by positional argument example.jpg)

I’ve tried to escape the quotes, mix double with single quotes, and remove quotes with the shortcode returning the quoted path, but nothing seems to work. I’ve also read on nested shortcodes but I think what you call nested shortcodes is not quite this (or maybe I’m missing something).

To avoid the XY problem, what I’m trying to do is to reference files in the static directory as arguments to figure, as in:

{{< figure src="path-to-site-root/images/example.jpg" >}}

The solutions I’ve found on this forum seem to suggest two options:

  1. use page bundles instead of static files but these images are shared between many pages

  2. use absolute paths to the images, e.g., /images/example.jpg but this site is not at the root so I need to get .Site.BaseURL somehow in the src parameter

2 
{{< figure src="{{% imagesrc "example.jpg" %}}" >}}

This construct is not supported.

Override the built-in figure shortcode, and pass the src param through the relURL or relLangURL function.

Or place your images within the assets directory, and rewrite the figure shortcode to use resources.Get.

3

You mean copying tpl/tplimpl/embedded/templates/shortcodes/figure.html to my theme and make the changes there? Is there not some solution that:

  1. works with other shortcodes that also need a path to files in the static directory
  2. would inherit any future fixes/improvements in those shortcodes

I thought of something like having a staticfigure shortcode that could be:

// This is layouts/shortcodes/staticfigure
{{% figure src="{{ .Site.BaseURL }}{{ .Get "src" }}" .{{ .Get all other params except src }} %}}

so I one could just use {{< staticfigure ... >}} instead of {{< figure ... >}} but I haven’t figured out how to call shortcodes from inside other shortcodes either. Is such construct also not supported?

4

See my previous response for recommended approaches.

For the most part, placing images in the static directory is an outdated construct, replaced with page and global resources.

5

I’m sorry but I don’t quite understood the recommended approaches on your previous response. I meant with my question if you could clarify if I understood correctly.

On your first approach you say “override the built-in figure shortcode” but I don’t quite see how to override it without replacing it locally by copying the code of the built-in figure shortcode.

On your second approach you say “rewrite the figure shortcode” which, again, I think you mean copying the code of the built-in figure shortcode.

6

Override built-in or theme templates by placing a copy of it your project’s layout directory, mirroring the path.

For example, to override themes/some-theme/layouts/_default/single.html…

mkdir -p layouts/_default
cp themes/some-theme/layouts/_default/single.html layouts/_default
7

Thank you, I understand what you mean now. That is helpful. Still, I was hoping to avoid those approaches (because of the reasons I mentioned earlier).

You also say that “placing images in the static directory is an outdated construct, replaced with page and global resources” but I don’t quite understand how to use that applies herein this situation. My reading of the documentation is that:

A global resource is a file within the assets directory, or within any directory mounted to the assets directory.

So I guess the different is how to access those resources (instead of path from static/). However, It’s not obvious to me how one then references those resources on the content pages themselves, i.e., from markdown.

8

This article might be helpful.

This example site is served from a subdirectory and contains examples of images:

  • In the static directory
  • In the assets directory
  • In a page bundle
  • Served remotely
git clone --single-branch -b hugo-forum-topic-46544 https://github.com/jmooring/hugo-testing hugo-forum-topic-46544
cd hugo-forum-topic-46544
hugo server

Then visit http://localhost:1313/foo/

1 Like
9

Thank you. This is article is very clear and useful. I was not aware of markdown render hooks and your render-image.html hook works like a charm (and thank you for the ready to use git repo).

The render-image and render-link hooks, and the local override of the figure shortcode cover pretty much all my issues with getting the right paths.

10

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