# Loop through a folder of images and List them in HTML

**URL:** <https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188>\
**Category:** support\
**Created:** [September 13, 2018, 12:21am UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188 "2018-09-13T00:21:13Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![LifeOfATitan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lifeofatitan/32/6861_2.png) [@LifeOfATitan](https://discourse.gohugo.io/u/LifeOfATitan)\
**Post date:** [September 13, 2018, 12:21am UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188/1 "2018-09-13T00:21:13Z")

</div>

Sup Hugo Community

Been struggling with this problem for a while. I’m creating a hugo theme for ecommerce websites.  
I created the product page. I divided the page in two sections. 1 section for the image carousel of the products and the other section for the product description price and buy button.

My problem arises in the carousel section. I am trying to loop into a folder of images and display them in the carousel. Here’s the code I have so far:

```auto
 <div class='carousel-container'>
                    {{ $url := .Title | printf "/products/%s"}}
                    {{ $folder := .Title | printf "/themes/ecom/static/products/%s"}}
                    {{ $files := readDir $folder }}
                    {{ range $files }}
                <div class='carousel-item has-background is-active'>
                  <img class="is-background" src="{{$files}}" alt="" style="width:940px;height:600px;"/>
                </div>
                    {{ end }}
</div>

```

My goal is to include the image folder for each product in the front matter. And from the single page template, I can just call the image source in the above code and have it display. So far that codes doesn’t show any error but it doesn’t display anything either. Would appreciate any help as I’ve looked everywhere but nobody seems to have this issue.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [September 13, 2018, 12:46am UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188/2 "2018-09-13T00:46:22Z")

</div>

Hi,

It’s difficult to say what’s going wrong without the full repo, but at least one thing jumps out:

> [@LifeOfATitan](#):
>
> ```auto
> {{ range $files }} 
> ...
> src="{{$files}}" 
> ...
> {{ end }}
> 
> ```

Once you are inside a `range` the context, or ‘the dot’ changes:

- [Templating | Hugo](https://gohugo.io/templates/introduction/#iteration)
- [Templating | Hugo](https://gohugo.io/templates/introduction/#the-dot)

> … Inside of an iteration, however, it will have the value of the current item in the loop;

---

<div class="post-metadata">

**Author:** ![LifeOfATitan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lifeofatitan/32/6861_2.png) [@LifeOfATitan](https://discourse.gohugo.io/u/LifeOfATitan)\
**Post date:** [September 13, 2018, 12:57am UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188/3 "2018-09-13T00:57:41Z")

</div>

thanks for the reply. I put the whole thing on Github. You can check it out here: [https://github.com/LifeOfATitan/ecomTheme](https://github.com/LifeOfATitan/ecomTheme)

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [September 13, 2018, 1:01pm UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188/4 "2018-09-13T13:01:54Z")

</div>

Hi,

If I understood you correctly, you want to have images related to the product show up on each product page. To fix your code snippet without changing anything else, let’s break down your snippet:

1. Why this does not work:

```auto
{{ $url := .Title | printf "/products/%s"}}
{{ $folder := .Title | printf "/themes/ecom/static/products/%s"}}

```

Taking the `pie.md` as an example, you do not actually have `title` defined in the front matter of your individual content files, so `{{.Title}}` is empty. You seem to have `name` defined though, so maybe we could use those. We can’t just print out `.Name` however because it is not in the list of [Page Variables](https://gohugo.io/variables/page/#page-variables) available. We need to use it as a [Page-level Param](https://gohugo.io/variables/page/#page-level-params) `{{.Params.name}}` instead.

```auto
---
name: "Pie"
description: "Good Ass Pie"
price: "$50.29"
size: "Large"
img: "/data/pie/"
---

```

`Pie` is capitalised in the front matter, so we also need to pipe it to `lower`.

```auto
{{ $url := .Params.name | lower | printf "/products/%s"}}
{{ $folder := .Params.name | lower | printf "/themes/ecom/static/products/%s"}}

```

* * *

If you try running `{{ $files := readDir $folder }}` at this point, you will probably get errors complaining about “No such file or directory” because you do not have a similar folder structure in place for the other content files (banana, pineapple, etc). So we check if it exists before trying to `readFile` by using [`fileExists`](https://gohugo.io/functions/fileexists/#readout):

```auto
{{ if fileExists $folder }}
    {{ $files := readDir $folder }}
    {{ range ...
     ...
{{ end }}

```

* * *

1. Syntax of `range`: use the ‘dot’ instead of `$files` inside your `range`

```auto
{{ range $files }}
...
<img class="is-background" src="{{$files}}" ...
...
{{ end }}

```

Example 1 [here](https://gohugo.io/templates/introduction/#iteration) shows how to use the `range` function and the dot. At this point, if you try:

```auto
{{ range $files }}
    {{ . }} 
{{ end }}

```

…the result is probably not what you want.

What actually is in `$files`? [The docs have this to say about `readDir`](https://gohugo.io/templates/files/#use-readdir):

> The readDir function returns an array of os.FileInfo

The example on the same link shows that we can get `.Size` and `.Name`. Let’s use `.Name`:

```auto
{{ range $files }}
 <img src="{{.Name}}" /><br>
{{end}}

```

… this should result in:

```auto
   <img src="pie.jpeg" />
   <img src="pie2.jpeg" />
   <img src="pie3.jpeg" />
   <img src="pie4.jpeg" />

```

At this point it _should_ be displaying images using the snippet you have.

**This is not the best way to do it, however.**

1. It’s generally not a good idea to have content-related files (e.g. product images) inside your `theme` folder. The idea of creating and using themes is that you can use the same theme in a different site, and a different theme on the same site. It does not make sense to have a `pie.jpeg` file in your theme static folder if the site is selling cars, for example. Similarly, if you decide to change themes, you will have to keep moving the various images to the new themes.

2. Consider organising your content into [Page Bundles](https://gohugo.io/content-management/page-bundles/) instead of putting your images in `static`. That would make it easier to manage your [Page Resources](https://gohugo.io/content-management/page-resources/) (i.e. your images).  
There are examples on both those pages as well as on this forum about how to do this.

3. If you prefer to put your product images under your `static` folder, do it under the top-level `static`, not `themes/<THEME>/static`, for reason #1 above.

One last note: it is generally not a good idea to commit your `node_modules` folder to git.

---

<div class="post-metadata">

**Author:** ![LifeOfATitan](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/lifeofatitan/32/6861_2.png) [@LifeOfATitan](https://discourse.gohugo.io/u/LifeOfATitan)\
**Post date:** [September 13, 2018, 2:00pm UTC](https://discourse.gohugo.io/t/loop-through-a-folder-of-images-and-list-them-in-html/14188/5 "2018-09-13T14:00:16Z")

</div>

Thanks so much for such a detailed explanation of how to do it my way and an explanation of how that way is not efficient at all. Really appreciate your help. It’s making me think in a different manner. Will be organizing my images in each products page bundle.

Also didn’t know about the node\_modules. Won’t make that mistake again hehehe.

Thanks again Pointy, you the real MVP