[SOLVED] Iterate over map in content front matter

support
1

Hi, I have the following in my product front matter:

---
title: Wood & Slate Lap & Dowel Mirror
short_name: Wood & Slate Mirror
draft: false
product_id: WSM001
category: Wall decor
price: '100'
summary: 'A unique and attractive mirror in a rustic, farmhouse style.'
materials: 'Reclaimed wood, welsh slate and mirror glass'
hero_image: /images/uploads/wood-slate-002.jpg
gallery_images:
  - image: /images/uploads/farmhouse001.jpg
  - image: /images/uploads/farmhouse002.jpg
  - image: /images/uploads/mirror.jpg
---

In my template, I create a variable {{ $gallery_images := .Param "gallery_images" }} and when I print out this variable, I get a map of the data but can’t seem to access it in the template.

What I am trying to achieve is an image carousel in my Hugo template where I iterate through gallery_images to get the value of image and add to my carousel. However, for some reason I can not seem to make it work in my template.

Any help would be greatly appreciated.

2

I would suggest looking at page bundles and image resources to better handle such galleries.

But in any case, here’s the answer to your question at hand:

  • gallery_images is a slice (or a list). So you need to range through it.
  • It is a slice of maps. In your example, each map has just one key (image), and its value. So that value is retrieved using index.
{{ with .Params.gallery_images }}
    {{ range . }}
        {{ $image_key_value := (index . "image") }}
        {{ printf "Image path: %s<br />" $image_key_value | safeHTML }}
    {{ end }}
{{ end }}
3

Great, that worked a treat for this instance. Thank you @kaushalmodi

I’ll check out the resources you mentioned in order to better handle this scenario.

All the best.