How to use page ressources in an abritary content markdown file within a branch bundle?

support
1

Hi, I (again) need some help: So I did create my own figure shortcode to use page ressources. I now can use pictures as page ressources I define in the front matter and then use the figure shortcode within the markdown. That works well for index files (_index.md) within branch bundles, but fails for other content files (content1.md, content2.md, ect.) within the branch bundle. If I try to call the figure shortcode within content1.md I receive following error message:
"/project/content/foo/content1.md:29:1": failed to render shortcode "figure": failed to process shortcode: "/project/themes/bar/layouts/shortcodes/figure.html:2:19": execute of template failed: template: shortcodes/figure.html:2:19: executing "shortcodes/figure.html" at <$img.Params.Get>: nil pointer evaluating resource.Resource.Params
The offending line in the figure.html shortcode is:
{{- if or ($img.Params.Get "caption") ($img.Params.Get "attr") -}}<p>

What did I do wrong? How to solve the issue?

figure shortcode template:

{{ $img := $.Page.Resources.GetMatch (.Get "src")}}
<figure{{ with $img.Params.Get "class" }} class="{{ . }}"{{ end }}>
    {{- if $img.Params.Get "link" -}}
        <a href="{{ $img.Params.Get "link" }}"{{ with $img.Params.Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
    {{- end }}
    <img src="{{ $img.RelPermalink }}"
         {{- if or ($img.Params.Get "alt") ($img.Params.Get "caption") }}
         alt="{{ with $img.Params.Get "alt" }}{{ . }}{{ else }}{{ $img.Params.Get "caption" | markdownify| plainify }}{{ end }}"
         {{- end -}}
         {{- with $img.Params.Get "width" }} width="{{ . }}"{{ end -}}
         {{- with $img.Params.Get "height" }} height="{{ . }}"{{ end -}}
    /> <!-- Closing img tag -->
    {{- if $img.Params.Get "link" }}</a>{{ end -}}
    {{- if or (or ($img.Title) ($img.Params.Get "caption")) ($img.Params.Get "attr") -}}
        <figcaption>
            {{ with ($img.Title) -}}
                <h4>{{ . }}</h4>
            {{- end -}}
            {{- if or ($img.Params.Get "caption") ($img.Params.Get "attr") -}}<p>
                {{- $img.Params.Get "caption" | markdownify -}}
                {{- with $img.Params.Get "attrlink" }}
                    <a href="{{ . }}">
                {{- end -}}
                {{- $img.Params.Get "attr" | markdownify -}}
                {{- if $img.Params.Get "attrlink" }}</a>{{ end }}</p>
            {{- end }}
        </figcaption>
    {{- end }}
</figure>

font matter of content1.md:

resources:
- name: myressource
  src: myressource.jpeg
  title: MyRessource
  params:
    caption: Lorem ipsum
    width: 100%
    alt: dolor est

The figure shortcode call within content1.md:
{{<figure src="myressource" >}}

Directory/file structure:

content/
├── foo
│   ├── _index.md
│   ├── content1.md
│   └── myressource.jpeg

Any help appreciated. :slight_smile: Many thanks in advance!

2

See https://gohugo.io/content-management/page-bundles

  Leaf Bundle Branch Bundle
Where can the Resources live? At any directory level within the leaf bundle directory. Only in the directory level the branch bundle directory i.e. the directory containing the _index.md

As content1.md is neither a leaf bundle nor a branch bundle, it has no page resources.

3

Ah, I see (I falsely thought, that the complete directory content was the bundle, not just the _index.md file).
So what is the best/most elegant/hugo way to solve it? (I’m probably not the only person wanting to include images in content files. :slight_smile: )

4 
content
├── foo/
│   ├── content1/
│   │   ├── b.jpg
│   │   └── index.md
│   ├── a.jpg
│   └── _index.md
└── _index.md
1 Like
5

That’s easy. :slight_smile: Too easy, as that I thought about it… :-/
Thanks for quick & competent help. Works flawless. :slight_smile:

6

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