Per-post thumbnail through filename convention?

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.


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?

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

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 }}
      <img src="{{ $url }}/{{ .Name | urlize }}">
  {{ end }}
{{ 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.


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

.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

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!

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:

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:

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. :slight_smile: