Per-post thumbnail through filename convention?

support
1

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!

2

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?

3

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

4

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

5

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!

6

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

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

7

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: