# Per-post thumbnail through filename convention?

**URL:** <https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693>\
**Category:** support\
**Created:** [August 3, 2017, 1:51pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693 "2017-08-03T13:51:18Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ptrvrhvn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ptrvrhvn/32/4007_2.png) [@ptrvrhvn](https://discourse.gohugo.io/u/ptrvrhvn)\
**Post date:** [August 3, 2017, 1:51pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/1 "2017-08-03T13:51:18Z")

</div>

Hi, total newb to Hugo (and go), I’m trying to list thumbnails on my index page.  
For some heinous reason I would prefer doing this by using a filename rather than specifying it in the front matter.  
I’ve read some of the documentation, but for whatever reason my budget-level brain cannot figure it out.

eg. content/section/post/thumb.jpg

So on my home page I want to loop first through sections, then posts, then description with a thumbnail.  
Just the last part that’s giving me trouble.

Thanks!

---

<div class="post-metadata">

**Author:** ![gaetawoo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/gaetawoo/32/16789_2.png) [@gaetawoo](https://discourse.gohugo.io/u/gaetawoo)\
**Post date:** [August 3, 2017, 3:19pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/2 "2017-08-03T15:19:29Z")

</div>

Probably can make the link to the thumbnail in your targeted post into a front matter parameter. Then you can pull it with your loop. Maybe?

---

<div class="post-metadata">

**Author:** ![ptrvrhvn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ptrvrhvn/32/4007_2.png) [@ptrvrhvn](https://discourse.gohugo.io/u/ptrvrhvn)\
**Post date:** [August 3, 2017, 5:47pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/3 "2017-08-03T17:47:44Z")

</div>

Turns out all I needed to do was append the filename to the permalink. Ugh. Thanks anyway 🙂

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [August 3, 2017, 7:02pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/4 "2017-08-03T19:02:12Z")

</div>

There is a way to do this automatically @ptrvrhvn

First of all you need to place your photos in folders that have the same name as your post title.

Then in the following folder `/static/images/index/` place these folders.

For example for a post with the .Title Blue create `/static/images/index/blue/`

The same for a post called Yellow, its image will go under `/static/images/index/yellow/`

Then create a partial over here `/layouts/partials/index-posts.html`

Inside the partial you need to include the following:

> ```
> {{ range where .Data.Pages "Section" "post" }}
> {{ $url := (printf "/images/index/%s" .Title) }}
> {{ $folder := (printf "/static/images/index/%s" .Title) }}
> {{ $files := readDir $folder }}
> <div class="index-post">
> <a href="{{ .Permalink }}">
> {{ range $files }}
> <figure>
> <img src="{{ $url }}/{{ .Name | urlize }}">
> </figure>
> {{ end }}
> </a>
> </div>
> {{ end }}
> 
> ```

Here is an explanation of what is inside this partial

> ```
> {{ range first 5 (where .Data.Pages "Section" "post") }}
> 
> ```

We are going to render the first 5 content pages from the posts section. These content files are located under `/content/posts/`

> ```
> {{ $url := (printf "/images/index/%s" .Title) }}
> 
> ```

Defined a URL variable with the `printf` function so that it looks for folders corresponding to the titles of the above posts under `/static/images/index/`

> ```
> {{ $folder := (printf "/static/images/index/%s" .Title) }}
> 
> ```

Defined a Folder path variable as above

> ```
> {{ $files := readDir $folder }}
> 
> ```

Then with the `readDir` function I am getting the files that are contained in the folders.

> ```
> {{ range $files }}
> 
> ```

We are using another range function to render the images

Then in index.html simply this partial like so `{{ partial "index-posts.html" . }}`

You may change the section name and the HTML structure to whatever suits you.

**Enjoy!**

This is based on the work of @fedelibre with some modifications by me.

Notes  
.Name turns a string Uppercase so you need to name your folders accordingly.  
This works also with titles that are more than one word e.g `Blue Post`

---

<div class="post-metadata">

**Author:** ![ptrvrhvn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ptrvrhvn/32/4007_2.png) [@ptrvrhvn](https://discourse.gohugo.io/u/ptrvrhvn)\
**Post date:** [August 5, 2017, 11:14am UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/5 "2017-08-05T11:14:06Z")

</div>

Hey, thanks for the very complete and thorough answer. One question though: doesn’t using the title mean you cannot have spaces in the title? I just tried it and it does seem to give me issues, but perhaps I’m missing something?

To be honest, I think I prefer having it the way I have now, with all my images sitting in a folder in /content/, where the folder has the same name as the markdown file. Seems like an orderly approach to me. Is there a downside to this method? Regardless, it’s always nice to know of alternatives. Certainly holding onto this post for future reference!

---

<div class="post-metadata">

**Author:** ![alexandros](https://avatars.discourse-cdn.com/v4/letter/a/ecc23a/32.png) [@alexandros](https://discourse.gohugo.io/u/alexandros)\
**Post date:** [August 5, 2017, 12:22pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/6 "2017-08-05T12:22:21Z")

</div>

> [@ptrvrhvn](#):
>
> To be honest, I think I prefer having it the way I have now, with all my images sitting in a folder in /content/, where the folder has the same name as the markdown file. Seems like an orderly approach to me.

In Hugo 0.26 there will be a new feature called something like “page bundles” and what you want will be supported by Hugo itself. See: [https://github.com/gohugoio/hugo/issues/3651](https://github.com/gohugoio/hugo/issues/3651)

> [@ptrvrhvn](#):
>
> One question though: doesn’t using the title mean you cannot have spaces in the title? I just tried it and it does seem to give me issues, but perhaps I’m missing something?

You are correct. Replace the `img src` part of the above partial with the following:

> `<img src="{{ range $files }}{{ $url }}/{{ .Name }}{{ end }}" alt="{{ .Title }}">`

Right. I fixed this on my end before but for some reason I posted the previous version I had. Go figure…

Basically `urlize` was causing the issues you encountered. Since it converts spaces to dashes. See here for more on the function: [urls.URLize | Hugo](https://gohugo.io/functions/urlize/#readout)

---

<div class="post-metadata">

**Author:** ![ptrvrhvn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/ptrvrhvn/32/4007_2.png) [@ptrvrhvn](https://discourse.gohugo.io/u/ptrvrhvn)\
**Post date:** [August 6, 2017, 4:48pm UTC](https://discourse.gohugo.io/t/per-post-thumbnail-through-filename-convention/7693/7 "2017-08-06T16:48:04Z")

</div>

Thank you! I read through some of the propositions, a bit afraid things would become to complex, but it all seems pretty sensible. Nice to see Hugo evolving. I’ll consider this answered. 🙂