Retrieve a mapped parameter in the font matter

support
1

Hello,

I am trying to retrieve a parameter (an url of an image) that is included in a 3 level front matter map.

I hope you can help me find the solution.

Thank you in advance!

Here is my front matter:

content
- itemType: image
- image: 
  - url: 'myfile.jpg'

In my layout:

With {{ .url }}, it does not return anything:

{{ range .Params.content }}
{{ if eq .itemType "image" }}
​    <img src="{{ .url }}" />
{{ end }}
{{ end }}

With {{ . }}, I get in frontend:

map[url:myfile.jpg]]

2

I think the problem you are having is, that technically speaking below - image there might be multiple - url parts. That’s why Hugo loads it as map.

Try this:

{{ range .Params.content }}
{{ if eq .itemType "image" }}
{{ range .image }}
​    <img src="{{ .url }}" />
{{ end }}
{{ end }}
{{ end }}

the dash in the front matter implies that what follows could have multiples… like

content
- itemType: image
- image: 
  - url: 'myfile.jpg'
  - url: 'myfile2.jpg'

I would have to read the TOML documentation, but try without the dash… could result in what you expected.

3

Hello @davidsneighbour,

Thank you so much for your reply!

I tried your code, but it does not recognize the field url (error message : “can’t evaluate field url in type interface”).

I tried with {{ . }} to test :

{{ range .Params.content }}
{{ if eq .itemType "image" }}
{{ range .image }}
    <img src="{{ . }}" />
{{ end }}
{{ end }}
{{ end }}

And it however “correctly” displays all the parameters of the same level (image fields like format or width) incl. URL:

<img src="https://www.datocms-assets.com/604/1509090647-01_free-stationery-psd-mockup.jpg" />
<img src="jpg" />
<img src="900" />

Really strange. Do you have another idea?

Thanks again!

4

Hmmmmm… I think you should have a look into page bundles. Put the images into the same folder as the .md file and then use resources to use the files…

5

Thank you again @davidsneighbour ! Unfortunately it does not answer my need because it is in the context of an integration with the Dato CMS: https://www.datocms.com/docs/static-generators/hugo/modular-content.

6

Well, then… have a look at their support forum:

1 Like
7

Hello! Solution found:

<img src="{{ (index .image).url }}" alt="" />