Iterate over Integers

1

The Range syntax is still really obscure to me.
I’m developing a simple image gallery. I have 10 images in the static folder and I want to write something like this for 10 times

<div class="item">
	<img src="{{.Site.BaseURL}}/img/gallery/cestlavieilfilm_001.jpg" alt="Gallery" />
</div>

changing the image name with an index. I come from middleman, where i would write something like this

1..10.each do |i|
...
end

How can i write something like it in Hugo? The docs are really bad, it seems to me there are no simple examples, only very convoluted ones about advanced topics.

1 Like
2

Hi Marek,

I found it a little hard to get my head around it too but thank you to the gentlemen here including @budparr, I’ve managed to do ok and am learning fast and seeing how powerful Hugo is.

Have a look at the “first” function which allows you to specify the number of iterations [https://gohugo.io/functions/first/]. This will allow you to specify how many images are looped through.

The following code may well give you a good start:

{{- $pathURL := "/img" -}}
{{- $path := "/static/img" -}}
{{- $files := readDir $path -}}
{{ range first 10 $files }}
<div class="item">
  <img src="{{ $pathURL }}{{ .Name | relURL }}" alt="{{ .Name }}" />
</div>
{{ end }}

…And here’s how you can use key, value pairs which you may find useful too.

{{- $pathURL := "/img" -}}
{{- $path := "/static/img" -}}
{{- $files := readDir $path -}}
{{- range $index, $element := first 10 $files -}}
<div class="item">
    <img src="{{ $pathURL }}{{ $element.Name | relURL }}" alt="you could put the name {{ $element.Name }} and the index here {{ $index }}" />
</div>
{{ end }}

I hope that this helps.

Thank you again to @budparr for helping me out in the same way - now passing your teachings on #hugoCommunity

Saul

1 Like
3

Thank you, so I can use readDir to iterate over a folder. Nice to know.
I think one of my problems is I don’t know GO and the syntax is a bit weird coming from PHP or Ruby.

That solves my problem, and it’s even better, but what if i want to iterate over a number, like my opening example?
Sometimes when i develop i know i want a list of N elements, but i don’t have the content yet, so i usually do a simple loop with 10 iterations like:

<ul>
<% 1..10.each do |element| %>
   <li> myelement </li>
<% end %>
</ul>

This saves me some copy/paste, is more similar to the final code, and i can make changes to the inner element in a DRY way. It’s just a temporary thing, but i find it useful. Can i replicate this in Hugo?

Thank you for the help, I can see how powerful Hugo is, I just feel the documentation assumes a lot of basic things that are not clear to new Hugo users.

1 Like
4

You’re very welcome Marek.

I hear you - my syntax background was very much Ruby/php/javascript based. GO took me a few steps back before I could move forward but I think if you’ve got the grounding in PHP and Ruby, give it a couple of weeks and you’ll be able to do some good data manipulation. I’ve been learning Elixir at the same time and am enjoying the learning process of both.

I believe that the seq function is what you need to achieve your desired effect. For example:

{{ range (seq 10)}}
<li> myelement </li>
{{ end }}

See more on usage in the docs:
https://gohugo.io/functions/seq/

Hope this helps.

Saul

3 Likes