HUGO

[SOLVED] Display cover image on post list

support
#1

So, I’m having a bit of trouble trying to understand page bundles (things have changed a lot since the last time I made a website with Hugo). I want to have a list of posts that shows the cover image of that post (whose filename can change) and its title.

So, what I understand is that you can organize your posts this way:

|── posts
|   ├── post without image.md
|   ├── post with image
|   |   └── index.md
|   |   └── theimage.jpg

But now I don’t know how to display that image on the list template (nor in the single template). I’m a bit lost. Can anyone help me?

#2

Hi there, I think You can manage cover image with Page Resource

#3

Also, check Image Processing.

You can either be consistent with naming the images you want to use as a cover (cover.jpg?) or just get the first image in the content to serve as one. can Then you can use something like this to generate a cover/thumbnail image for posts:

{{ with .Resources }}
    {{ with .GetMatch "{cover.*,*.jpg,*.png,*.jpeg}" }}
         {{ $cover := .Resize "600x" }}
         {{ with $cover }}
              <img src="{{ .Permalink }}"/>      
         {{ end }}
    {{ end }}
{{ end }}

If it doesn’t find a cover.* file, the first image file would be used as a fallback.

3 Likes
#4

Thank you! This worked perfectly. Thanks.