Retrieve Hugo First Image in Blog Post to Display Thumbnails on List Page

support
1

Forgive me for my limited coding knowledge but I’m very confused on this particular topic.

I’ve recently added image processing and resizing based on this blog posts recommendations using a short code. https://alexlakatos.com/web/2020/07/17/hugo-image-processing/ My images are located in the assets/ folder under assets/images.

When I inspect the page I see:

<img sizes="(min-width: 35em) 720px, 100vw" srcset="
  
    /images/test/duck_hu99efd98e34c17dd60a546cac55d5d98a_299349_500x0_resize_box_3.png 500w
  
  
    , /images/test/duck_hu99efd98e34c17dd60a546cac55d5d98a_299349_800x0_resize_box_3.png 800w
  
  
    , /images/test/duck_hu99efd98e34c17dd60a546cac55d5d98a_299349_1200x0_resize_box_3.png 1200w
  " src="/images/test/duck.png" data-src="" alt="yo">

I’m using the Hugo W3 Simple Theme, specifically the index.html under /_defaults for the home page, trying to generate thumbnails for my blog posts.

I understand one way is to use metadata, but this code inside the index.html seemed to work for rendering images without metadata (grabbing first image in post content using hugo’s regex)

Everything was working as described until I added image resizing and now I’m wondering how to grab the first image of the blog post.

I hope this is clear enough and I’d be happy to break it down further, thank you for the help.

2

Get image from page bundles to display in list page

Is there a workaround so I don’t have to use cover.jpg?

3

It would be helpful to see your repository.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.