# Help regarding range loop and data to create a grid system

**URL:** <https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878>\
**Category:** support\
**Created:** [June 6, 2017, 7:16am UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878 "2017-06-06T07:16:30Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![xhmikosr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xhmikosr/32/3306_2.png) [@xhmikosr](https://discourse.gohugo.io/u/xhmikosr)\
**Post date:** [June 6, 2017, 7:16am UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/1 "2017-06-06T07:16:30Z")

</div>

Hello to everyone.

I’m using Hugo for the first time and I’m coming from Jekyll, so please bear with me 🙂

In Jekyll I was able to loop through a data file and retrieve the values and make a grid like this:

```auto
{% for member in site.data.team %}
  {% assign name = member.name %}
  {% assign description = member.description %}
  {% cycle 'add row' : '<div class="row">', nil %}
    <div class="col-xs-12 col-sm-4 {% cycle 'add offset' : 'col-sm-offset-2', nil %}">
        <div class="thumbnail">
            <img src="/assets/img/team/{{ name | replace: ' ', '_' }}.png" alt="{{ name }} Photo" width="131" height="130">
            <div class="caption">
                <h3 class="text-center">{{ name }}</h3>
                <p>{{ description }}</p>
            </div>
        </div>
    </div>
  {% cycle 'end row' : nil, '</div>' %}
  {% cycle 'end offset' : nil, nil %}
{% endfor %}

```

Now, with Hugo, I had to convert the YAML data file to TOML because I was getting a marshalling error. That is OK, I can live with that. Here’s my team.toml just in case I’ve made something wrong here:

```auto
[[member]]
name = "First Last"
description = "Foo dev"

[[member]]
name = "FirstName LastName"
description = "Bar dev"

```

And this is what I have in `team.md`:

```auto
{{ range .Site.Data.team.member }}
    <div class="thumbnail">
        <img src="/assets/img/team/{{ .name | replace ' ' '_' }}.png" alt="{{ .name }} Photo" width="131" height="130">
        <div class="caption">
            <h3 class="text-center">{{ .name }}</h3>
            <p>{{ .description }}</p>
        </div>
    </div>
{{ end }}

```

And here’s my directory structure. Maybe I’m missing a template file?

```auto
 Directory of C:\Users\xmr\Desktop\project-hugo

06/06/2017 13:09 <DIR> .
06/06/2017 13:09 <DIR> ..
06/06/2017 13:06 1.630 config.yml
06/06/2017 13:06 <DIR> content
06/06/2017 09:49 <DIR> data
06/06/2017 12:53 <DIR> layouts
05/06/2017 11:55 <DIR> static

 Directory of C:\Users\xmr\Desktop\project-hugo\content

06/06/2017 13:06 <DIR> .
06/06/2017 13:06 <DIR> ..
06/06/2017 08:37 1.384 404.md
06/06/2017 13:04 3.612 team.md

 Directory of C:\Users\xmr\Desktop\project-hugo\data

06/06/2017 09:49 <DIR> .
06/06/2017 09:49 <DIR> ..
06/06/2017 10:02 1.696 team.toml

 Directory of C:\Users\xmr\Desktop\project-hugo\layouts

06/06/2017 12:53 <DIR> .
06/06/2017 12:53 <DIR> ..
05/06/2017 19:46 52 index.html
06/06/2017 12:53 <DIR> partials
05/06/2017 12:17 125 robots.txt
05/06/2017 20:04 920 sitemap.xml
06/06/2017 13:05 <DIR> _default

 Directory of C:\Users\xmr\Desktop\project-hugo\layouts\partials

06/06/2017 12:53 <DIR> .
06/06/2017 12:53 <DIR> ..
06/06/2017 10:24 4.334 footer.html
06/06/2017 09:42 1.871 header.html
05/06/2017 19:16 1.051 nav.html

 Directory of C:\Users\xmr\Desktop\project-hugo\layouts\_default

06/06/2017 13:05 <DIR> .
06/06/2017 13:05 <DIR> ..
05/06/2017 21:18 0 list.html
06/06/2017 13:05 72 single.html

 Directory of C:\Users\xmr\Desktop\project-hugo\static

05/06/2017 11:55 <DIR> .
05/06/2017 11:55 <DIR> ..
05/06/2017 11:55 <DIR> assets

```

Now with this, I get the exact html code output; it’s like Hugo doesn’t parse that and just copies it as is.

How can I achieve the same with Hugo?

Thanks in advance!

---

<div class="post-metadata">

**Author:** ![bep](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/bep/32/3332_2.png) [@bep](https://discourse.gohugo.io/u/bep)\
**Post date:** [June 6, 2017, 10:40am UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/2 "2017-06-06T10:40:11Z")

</div>

You can not have template syntax directly in content files (there are shortcodes, but that isn’t relevant here, I think). There are several ways to get to where you want, but I suggest you have a look at template files.

---

<div class="post-metadata">

**Author:** ![xhmikosr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xhmikosr/32/3306_2.png) [@xhmikosr](https://discourse.gohugo.io/u/xhmikosr)\
**Post date:** [June 6, 2017, 2:11pm UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/3 "2017-06-06T14:11:46Z")

</div>

OK, I managed to solve the issue with a shortcode and checking for odd/even value.  
Perhaps it’s not the best solution but it works…

```auto
{{ range $i, $member := .Site.Data.team.member }}
{{ if modBool $i 2 }}
<div class="row">
{{ end }}
    <div class="col-xs-12 col-sm-4{{ if modBool $i 2 }} col-sm-offset-2{{ end }}">
        <div class="thumbnail">
            <img src="/assets/img/team/{{ replace $member.name " " "_" }}.png" alt="{{ $member.name }} Photo" width="131" height="130">
            <div class="caption">
                <h3 class="text-center">{{ $member.name }}</h3>
                <p>{{ $member.description }}</p>
            </div>
        </div>
    </div>
{{ if not (modBool $i 2) }}
</div>
{{ end }}
{{ end }}

```

I wonder if this could be improved but it’s micro optimization anyway.

Thanks for the prompt reply! I really appreciate the support since I will probably have to ask more questions I dig into Hugo more and more 🙂

---

<div class="post-metadata">

**Author:** ![xhmikosr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xhmikosr/32/3306_2.png) [@xhmikosr](https://discourse.gohugo.io/u/xhmikosr)\
**Post date:** [June 6, 2017, 3:26pm UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/4 "2017-06-06T15:26:48Z")

</div>

Actually, the above works, but there’s the case where one has even members and `</div>` won’t be output 😕

I tried playing with `len` but it seems I can’t make the check to work…

```auto
{{ if (not (modBool $i 2)) or (eq (len $member) 6)}}
</div>
{{ end }}

```

---

<div class="post-metadata">

**Author:** ![moorereason](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/moorereason/32/592_2.png) [@moorereason](https://discourse.gohugo.io/u/moorereason)\
**Post date:** [June 6, 2017, 7:52pm UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/5 "2017-06-06T19:52:01Z")

</div>

`or` doesn’t work like that. Use it as `or x y`:

```nohighlight
{{ or (not (modBool $i 2)) (eq (len $member) 6) }}

```

---

<div class="post-metadata">

**Author:** ![xhmikosr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/xhmikosr/32/3306_2.png) [@xhmikosr](https://discourse.gohugo.io/u/xhmikosr)\
**Post date:** [June 7, 2017, 6:51am UTC](https://discourse.gohugo.io/t/help-regarding-range-loop-and-data-to-create-a-grid-system/6878/6 "2017-06-07T06:51:13Z")

</div>

Thanks!

I managed to solve the issue with this:

```auto
{{ $len := len .Site.Data.team.member }}
{{ range $i, $member := .Site.Data.team.member }}
{{ if modBool $i 2 }}
<div class="row">
{{ end }}
    <div class="col-xs-12 col-sm-4{{ if modBool $i 2 }} col-sm-offset-2{{ end }}">
        <div class="thumbnail">
            <img src="/assets/img/team/{{ replace $member.name " " "_" }}.png" alt="{{ $member.name }} Photo" width="131" height="130">
            <div class="caption">
                <h3 class="text-center">{{ $member.name }}</h3>
                <p>{{ $member.description }}</p>
            </div>
        </div>
    </div>
{{ if (or (not (modBool $i 2)) (eq (add $i 1) $len)) }}
</div>
{{ end }}
{{ end }}

```

`len` seems to be 1-based since it’s always off by 1 so I had to use `add`.