How to get a resource by param?

1

Hello!

I’ve a frontmatter like this:

+++
name = "Robin"
photo = "robin.jpg"
+++

How can I load this resource in the template? I’ve tried many variations like:

{{ $image := .Resources.GetMatch (.Params.Photo) }}

I’ve also been searching for documentation which explains the syntax a bit. What I’ve found is https://gohugo.io/templates/introduction/, but I think it doesn’t go far enough. Is there already someone working on that or should I just start sending some PRs?

Thank you in advance!
Robin

2

Not sure why the above does not work, but you can make it more flexible with printf.

{{ $image := .Resources.GetMatch (printf "**%s" .Params.photo) }}

But.

I think it is better to either

  1. Create a naming standard for yourself (“featured.jpg”)
  2. Or combine that with the “resource metadata renaming” feature

@kaushalmodi should have some input on this.

1 Like
3

Did you miss this detailed example here:

Here’s another example from my Hugo Sandbox site… you can see that header_image.html partial doing its magic to show that image on the Sandbox homepage.

1 Like
4

Also, I encourage people to use the more “standard” images list variable in the front-matter, as that’s what’s used in the inbuilt opengraph and twitter_cards templates.

So the equivalent would be:

images = ["robin.jpg"]

I use a slightly tweaked version of the twitter_cards.html template, where you see the use of .Params.images.

1 Like
5

Thank you for your quick answer.

Building sites … ERROR 2018/04/13 23:05:36 Failed to render "theme/section/about.html": reflect: Method on nil interface value

That’s the error message I get. Maybe I’m doing something else wrong? This is the whole template:

<section id='about'>
    <div class='center-block'>{{ .Content }}</div>
    {{ range .Pages }}
        {{ .Params.Name }}
        {{ .Params.Role }}
        {{ $image := .Resources.GetMatch (.Params.Photo) }}
        <img src="{{ $image.RelPermalink }}">
    {{ end }}
</section>

What would you advice me? I get quite often stuck with such things. Is there an easy way to debug the source and learn from there?

6

Most likely, one of the pages doesn’t have that param set, and thus that nil related error.

I’d wrap the resource fetching in {{ with .Params.photo }} to avoid this. You can refer to my example I linked earlier.

In my experience, using with is always good.

Also, if the param is lower case photo, don’t capitalize it in the .Params call.

7

I suspect it is the image itself that is missing in some pages.

So this should be better:

   {{ $image := .Resources.GetMatch (.Params.Photo) }}
{{ with $image }}
        <img src="{{ .RelPermalink }}">
{{ end }}
2 Likes
8

Right… the error makes more sense considering that… it was actually trying to do “nil.RelPermalink”…

9

Thank you for your answers.

I just don’t get it to work.

image
image.png1919×274 36 KB

On the screenshot the template for this section is visible.

How does the resource matching looking for the image?
I’ve tried the following arguments:

  • robin.jpg
  • about/robin.jpg
  • **/robin.jpg
  • **/robin*
  • …

I’ve checked https://gohugo.io/content-management/page-resources/. What am I doing wrong?

Robin

10

First of all, it’s not clear where you have that template. It should be list.html or similar because your about content is a branch bundle (_index.md).

If you have done that, the resource fetching must then live outside that range of pages.

Try putting the .Resource.GetMatch before that range line.

If it doesn’t yet work, please share your site source.

11

And… if you plan to have multiple people with their own photos in “about”, you need a structure like this:

content/
  about/ (branch bundle)
    _index.md
    foo/ (leaf bundle)
      index.md 
      person.jpg 
    bar/ (leaf bundle)
      index.md
      person.jpg

Then you can do the resource fetching for each leaf bundle inside that range.

You need to understand the “context” you are in when inside that range.

12

Awesome! Thank you very much for taking the time to give me this answer :slight_smile: It works!