Featured images don't load on home page

rwaal commented 3 years ago

Describe the bug

I have just updated the theme to version 2.0.1. The featured images that I have configured in my posts are not displayed on the home page anymore. When using the Developer tools of my browser, I see that the images are not loaded and that a 404 error is shown. However, when I open my posts, the image are loaded successfully in the post page itself.

I noticed that the path to the images is not correct on the home page. It's expecting the path to be http://localhost:1313/myimage.jpg. However I am using page bundles, so the images are stored in the following path: http://localhost:1313/posts/<postname>/myimage.jpg

Again, when opening an individual post the images are loaded just fine. Only not on the home page.

Expected behavior

On the home page, for each post a featured image should be displayed.

Screenshots

The image below shows the Developer tools of my browser. You can see that the images are not loaded on the home page.

Build Environment

OS: MacOS 11.2.3
Theme version/commit: 2.0.1, 4e7b1fd
Hugo version: 0.81.0 extended

Please try to use Hugo extended version before opening the issue.

Preview Environment

OS: MacOS 11.2.3
Browser: Chrome, Safari

uPagge commented 3 years ago

Didn't quite understand the problem

What do you mean are not displayed on the home page?

On the main page, by design, only the feature-image is displayed. What images are in question, maybe you can tell me how to reproduce this problem.

rwaal commented 3 years ago

I'm not a Hugo expert, so forgive me if I am not using the right terms here.

Each of my blog posts have a featured image. These image are configured in my post with the featuredImage statement, like so:

---
title: "My awesom blog post"
date: 2021-03-13
draft: false
featuredImage: "myimage.jpg"
---

When you open one of the blog posts, the featured image is loaded just fine. However, on the main page the image is not loaded correctly.

To illustrate, I have added screenshots. The first image a screenshot of main page. You can see that the featured image is not loaded. The second image is a screenshot where the post is opened. The the image loads successfully.

As mentioned earlier, I am using page bundles. So the image files for the featured images are not located in the static directory, but in the content/posts/<postname> directory.

Screenshot of main page

Screenshot of a post page

Admonstrator commented 3 years ago

@rwaal Did you make sure that your blog-post-file (not sure how to call it, ha) is named index.[language].md? So usually you use page bundles like /posts/posttitle/index.en.md

rwaal commented 3 years ago

Hi @Admonstrator, the file name for all my posts is index.md. This has always been the case, which worked just fine before the upgrade to the new 2.x theme version. I tested what would happen if would rename to index.en.md. There's no difference, the problem persists.

Just to make it clear; this problem did not exist (for me at least) with version 1.x of the theme. Nothing has changed, other than upgrading to the latest theme version.

I might be missing something obvious here. But I don't know what. Any help would be highly appreciated.

uPagge commented 3 years ago

I will try today or tomorrow to figure out what the problem is.

In general, I recommend using this style is better.

resources:
- name: "featured-image"
   src: "featured-image.jpg"
- name: featured-image-preview
   src: featured-image-preview.jpg

In the near future, I planned to abandon any other methods of inserting the main image and the first

Admonstrator commented 3 years ago

I tried it by myself now (upgrading from previous version to 2.0.1) - same error. So I can confirm that something is wrong :-) @uPagge

If you do the resources-trick it will work fine. But tbh this does not seem to be a good way because it will make it really hard to upgrade your site because you have to edit all posts :(

rwaal commented 3 years ago

I will try today or tomorrow to figure out what the problem is.

In general, I recommend using this style is better.
resources:
- name: "featured-image"
   src: "featured-image.jpg"
- name: featured-image-preview
   src: featured-image-preview.jpg
In the near future, I planned to abandon any other methods of inserting the main image and the first

Hi @uPagge, I can confirm that using resources it all works without issues. I changed my posts to use resources instead of featuredImage. This is an acceptable solution for me. Thanks for helping out. 👍

uPagge commented 3 years ago

@rwaal The resources are really great, this is a great hugo feature in my opinion :)

GregHilston commented 3 years ago

Just for future readers, I'm in the process of converting my Hugo site from a different theme to using this theme. Just so everyone knows, I already had the resources block but the featured-image was not displaying on my Posts page until I named my markdown file index.md.

uPagge commented 3 years ago

Just for future readers, I'm in the process of converting my Hugo site from a different theme to using this theme. Just so everyone knows, I already had the resources block but the featured-image was not displaying on my Posts page until I named my markdown file index.md.

As far as I know, this is a feature of hugo behavior. Only index files can have resources

uPagge / uBlogger