Hugo leaf bundle blog feature image

support
1

Hey hugo community. I’m coming at you guys with an issue I would love some guidance to help solve

I’m porting my blog site from wordpress to hugo. I’m running into an issue on my blog posts.

I organized my blog posts in a leaf bundle.

29
Screen Shot 2018-09-15 at 11.27.29.jpg414×532 25.3 KB

My blog posts from matter has a feature_image. I’m able to call this feature image in the blog list page by using {{ .Params.feature_image }}

Now when I go to edit the single.html of how the individual blog posts will look, I cannot display the image using {{ .Params.feature_image }}

I also tried it using {{ with .Params.feature_image }}Feature Image{{ end }}

Still displays nothing. Any idea on how I can manage to display the feature image on the blog post?

P.S when I run the web server and go to inspect the element. It says failed to load resource (not found)

2

after further study I found out that the list page feature image is found at localhost:1313/blog/life/4738.jpg

But on the single page, the same commands looks for the image at localhost:1313/blog/life/life/4738.jpg

I don’t understand why it appends the name of the blog post a second time in the link. Any ideas?

3

.Params.feature_image is just the filename or more? How do you build the image’s url?

A repo would be lovely.

1 Like
4

Not that proficient at Git. Having trouble pushing the current rep upstream.

But thanks to your comment I figure out something:

my feature_image file name goes like nameOfBlogPost/image.jpg

once I removed the nameOfBlogPost and just left feature_image name as image.jpg It loads fine in the single.html.

But now the list.html doesn’t load.

Here’s the repo but it’s not the current one yet: https://github.com/LifeOfATitan/RTP

[EDIT] -> Repo is now current one

5

So I solved this issue by having two different feature_images in front matter.

1 for the the blog post with the location as only the filename.jpg
2 for the blog list with the location as the blogPostName/filename.jpg

Still curious to know if there’s a better way to do this with only 1 feature_image in front matter

6

Yes there’s definitely a better way, you should check Page Resources.

Once you found that resource based on its filename, you can retrieve its .Permalink. Hugo will know where to look.

I wrote a post about it if you’re interested: https://regisphilibert.com/blog/2018/01/hugo-page-resources-and-how-to-use-them/

1 Like
7

Thanks your post was very helpful