Images not rendering

[abrahamalen]

I have added images to my posts and preview image for the website and none of the images are not loading.
link to the website repo : link
Code screenshot is below:

[luizdepra]

You are using front matter options from other themes. ShowToc, TocOpen and cover don't exist on hugo-coder.
Try using featuredImage in your post's front matter, or add the image with ![alt textl](img_url). Also, you don't need to put static in the image path.

[abrahamalen]

You are using front matter options from other themes. ShowToc, TocOpen and cover don't exist on hugo-coder. Try using featuredImage in your post's front matter, or add the image with ![alt textl](img_url). Also, you don't need to put static in the image path.

so i need to add images in that resources itself?

[luizdepra]

About the images' path?
No, you should keep them inside the static folder. Ex: static/images/01.jpg. But, when referencing the image inside your content files, you need to remove the static in the path string. Ex: ![My Image](images/01.jpg). This is necessary because Hugo move all the content of the static folder to the root folder of the built project.

The resources folder is used to store assets that are processed by the Hugo's Asset Pipeline. This theme only process SCSS and JS files with this feature.

[abrahamalen]

About the images' path? No, you should keep them inside the static folder. Ex: static/images/01.jpg. But, when referencing the image inside your content files, you need to remove the static in the path string. Ex: ![My Image](images/01.jpg). This is necessary because Hugo move all the content of the static folder to the root folder of the built project.

The resources folder is used to store assets that are processed by the Hugo's Asset Pipeline. This theme only process SCSS and JS files with this feature.

Yeah, I understood.
I kept the same as static and only the avatar.png image is loading but the cover-image of my post is not resulting.

[luizdepra]

Hmm. The problem here is the front matter for the featured image. It should be only this:

title: "Resources: Web Development - Part-1"
date: 2021-09-12T12:56:25+05:30
weight: 160
draft: false
summary: "A collection of resources by Alen to make your web development process easier."
tags: ["resources", "web-development"]
categories: ["resources"]
aliases: [/web-development]
featuredImage: "images/web-development-resources-part1/cover-image.jpg"

Double-check the path because I might have typed something wrong.

[abrahamalen]

I am getting the same result...!

[abrahamalen]

@luizdepra

any idea on the issue

[luizdepra]

Yup. I cloned your repo and found two issues:

• Your baseURL is wrong. It should be https://abrahamalen.github.io/ and not https://abrahamalen.github.io/alen-abraham.github.io/.
• Put a / at the beginning of the featuredImage url. Like this /images/web-development-resources-part1/cover-image.jpg. This way, your page will look for the image starting by the root folder of your site.

[abrahamalen]

Yup. I cloned your repo and found two issues:

* Your `baseURL` is wrong. It should be `https://abrahamalen.github.io/` and not `https://abrahamalen.github.io/alen-abraham.github.io/`.

* Put a `/` at the beginning of the `featuredImage` url. Like this `/images/web-development-resources-part1/cover-image.jpg`. This way, your page will look for the image starting by the root folder of your site.

• baseURL is not wrong my username and repo name is different.
  • username - abrahamalen and repo-name - alen-abraham
• Added the / and ran it in the local, images are still not rendering.
  

[abrahamalen]

You can give a PR if you were able to fix any issue.
@luizdepra

[luizdepra]

Sorry, I failed to see that there is problem in the way this theme handle relative URLs for the featuredImage. I thought you have configured your baseUrl wrong, but it is correct in fact. I can fix that later today, and you will need to update the theme version. But, let me help you with a temporary workaround.

The image is not loading because your baseUrl has a folder in it. This is ok, this is the way we host things on GH Pages. So, if you configure featuredImages with the following option and inspect the HTML in your browser, you will see that:

• with /images/web-development-resources-part1/cover-image.jpg, your browser will try to find the image at https://abrahamalen.github.io/images/web-development-resources-part1/cover-image.jpg and this path does not exist.
• with images/web-development-resources-part1/cover-image.jpg, your browser will try to find the image at https://abrahamalen.github.io/alen-abraham.github.io/posts/web-development-resources-part1/images/web-development-resources-part1/cover-image.jpg and it does not exist either.

Your image is being served at https://abrahamalen.github.io/alen-abraham.github.io/images/web-development-resources-part1/cover-image.jpg, so the easiest workaround is to put the extra path in the featuredImage value. Like this /alen-abraham.github.io/images/web-development-resources-part1/cover-image.jpg. See your avatar image for example, its src points to /alen-abraham.github.io/images/avatar.png.

I think there is another way to solve this problem, but I never used it to be sure. Some people create a directory structure for every post containing every image inside it. Something like this:

content/
  posts/
    web-development-resources-part1/
      _index.md <-- your post content is here
      images/
          cover-image.jpg
    web-development-resources-part1/
      _index.md
      images/
          cover-image.jpg
   ...

This way, your featuredImage should be only images/cover-image.jpg. A relative path, without the / in front. As a said earlier, I never used this structure, so I can't guarantee that it will work.

[abrahamalen]

Hey, thank you very much @luizdepra for the help.

Yeah the username and repo-name mismatch was the real clash.
/alen-abraham.github.io/images/web-development-resources-part1/cover-image.jpg by adding this, the issue is resolved.

I got many more issues and I am trying to fix those, will open an issue again if not able to resolve it 😄 .

Meanwhile, I will try the second option you gave to me, just to try it out how it goes on.

Check out the url, I have made the commits and images is up and running now.

[luizdepra]

Hey. I just pushed a change that helps fixing the issue.

Now, you can set the cover image path like this:

featuredImage: "/images/web-development-resources-part1/cover-image.png"

The initial / is important. You also need to set canonifyURLs in your config file to true. More info here. But, the workaround we made should still work.

[abrahamalen]

Oh that's cool
thanks, mate @luizdepra

I didn't get a PR anyways.

I am trying to fix these issues currently -

• to open external links in a new tab.
• my subscription form on subscribe page is not coming up
• and my archives pages too.

I haven't committed these files, so you won't be able to see them.

Do I need to commit, so you can take a look at it.

[luizdepra]

to open external links in a new tab.

See #505. The issuer was trying to do something similar to what you want.

• my subscription form on subscribe page is not coming up
• and my archives pages too.

This is normally a problem with the menu item's URL. Inspect to see if they are pointing to the correct page.

[abrahamalen]

to open external links in a new tab.

See #505. The issuer was trying to do something similar to what you want.

• my subscription form on subscribe page is not coming up
• and my archives pages too.

This is normally a problem with the menu item's URL. Inspect to see if they are pointing to the correct page.

Oh okay will take a look on it

[abrahamalen]

@luizdepra didn't find much from #505. They are also still looking out for a solution for the same.

[abrahamalen]

I think, there is not a proper solution available for that issue @luizdepra
You can assign a label for the issue and wait for some awesome PRs from the contributors.

Meanwhile we can work on other issues 👀

[radirobi97]

Hi @abrahamalen,

could you please take look at a similar issue? What was the solution for your problem?
#679

[abrahamalen]

Hi @abrahamalen,

could you please take look at a similar issue? What was the solution for your problem? #679

hey @radirobi97
I saw the issue is closed
Is it resolved or yet to figure out?

[radirobi]

@abrahamalen
My issue is still ongoing and very similar to yours, however I do now what is missing from my side. You can check the details on the issue #679

[abrahamalen]

@abrahamalen My issue is still ongoing and very similar to yours, however I do now what is missing from my side. You can check the details on the issue #679

Yeah, I saw the issue. It looks very similar to mine, but you haven't provided the repo link, to take a look at your codebase.

[radirobi]

@abrahamalen
Thank you for pointing this out, I have added the repo in the comment section.

[abrahamalen]

@abrahamalen Thank you for pointing this out, I have added the repo in the comment section.

cool.
will take a look at the repo.

[radirobi]

Dear @abrahamalen, were you able to notice something ?