Loop multiple arrays into a range

support
1

Dear Hugo community,

I just started with Hugo and wanted to know how to loop multiple arrays into a range?

This is what I have in my Front matter:

---
title: "Billy"
img: [“img1.jpg”, “img2.jpg”]
---

And my range:

 {{ range .Params.img }}
        <img src="{{ . }}" alt="{{ .Title }}">
    {{ end }}

But Iget an error as it can’t find .Title? I am setting up a test repo now but just wanted to know if it was possible to have multiple arrays in a range?

Sorry for the messy code still getting used to this page.

2

So this part is right

{{ range .Params.img }}

But this is incorrect

alt="{{ .Title }}"

When you loop through that map of images, each item is a string. So a string doesn’t have a title. Maybe this is what you want

alt="{{ . }}"
3

@zwbetz thank you for the quick reply! Amazing! I tried {{ . }} but then I just see img1.jpg and so on, I wanted to have Billy as the alt tag?!

Or can I haveimg: [“img1.jpg”, “img2.jpg”] and then img_alt: [“img1 Alt”, “img12 Alt”] ?

4

So when you loop through that img param, the context of the dot changes. So you need to grab title before you’re inside the loop

{{ $title := .Title }}
{{ range .Params.img }}
  <img src="{{ . }}" alt="{{ $title }}">
{{ end }}

Read more about scope, dot, and context here

1 Like
5

This is what I am looking for!! Thank you so much, I need to do a lot more reading! You’re a gentleman! Thanks again,