Article compatibility with Github

I’d like to keep images close to my articles. I use the following structure:

/content/tutorials/_index.md
/content/tutorials/tutorial1/index.md
/content/tutorials/tutorial1/images/image.jpg

Here is my markdown:

![my picture](images/image.jpg)

This works well when rendered in Github.
How should I write my front matter, to render it also in Hugo?
I tried:

---
title: Urban waste management
resource:
    src: images/image.jpg
---

But the image is not accessible.

If you use a recently new Hugo version, that should be possible, but it is impossible to judge by the little you post. A link to the site source would maybe help us help you.

Here is the file I’m working on: https://github.com/Waziup/waziup.io/blob/hugo/content/tutorials/usecases/waste/_index.md
The images are located in: https://github.com/Waziup/waziup.io/tree/hugo/content/tutorials/usecases/waste/images

The pictures are rendering in Github, but not in Hugo.
I use Hugo V0.38.2

You need to read up on bundles in Hugo, esp. around the distinction of leaf and branch bundles.

@cdupont, it should work as-is (and you don’t need the resource front matter). I just downloaded your repo and it worked fine on my machine.

@vassudanagunta really?
I don’t see the photos in the article http://localhost:1313/tutorials/usecases/waste
Do you?
What could it be? My version of Hugo? Should I clean some cache?

Yup. Works perfectly for me on Hugo v0.40.3. I cloned your repo and ran Hugo against it as-is, no changes. But I don’t see why it shouldn’t work with v0.38.2. Good luck!

@vassudanagunta thank you soooo much for helping me!!
I see I didn’t commit correctly.
Could you clone again?

git clone git@github.com:Waziup/waziup.io.git
git checkout hugo
hugo server &
firefox localhost:1313/tutorials/usecases/waste/index.html

I don’t see the first two pictures (waste_bin.jpg and waste_bin_elec.jpg). However, they are in the folder ./images/

Sorry brother, you have all the tools necessary to figure it out, since you can diff the working version on GitHub and the one that doesn’t work. I simply don’t have time to hold your hand, especially since you can do it yourself. Good luck!

@vassudanagunta I find your reply slightly offending. If you don’t have time, you shouldn’t bother to reply at all :wink: That’s just my opinion.

Anyway, I think I found the answer: I had this in my head.html:

<script type="text/javascript">
  theBaseUrl = "http://" + location.host + "/";
  document.write('<base href="' + theBaseUrl + '"/>');
</script>

This “base href” would prevent any relative image src to open.
I don’t know where this tag came from. God, I can tell you it’s been month this was bothering me! :sob::joy:

I took time to help you. And I provided the critical fact that you missed for a month: That the problem was introduced in your recent code changes since the checked-in version worked perfectly. Something you didn’t bother to do.

But then without spending any time to do the diff first, you immediately ask me to download your current code. You wanted me to do your work for you before you even tried.

It is I who should be offended for you not respecting other people’s time. Now I almost regret helping you. Almost.

vas

3 Likes

I initially suspected that the problem was with my understanding or usage of Hugo… That’s why I posted here.
Actually it was unrelated! The bundles was not working because of this “href base” (which was in my code base since forever)…
Anyway, thanks for the help, it was useful to put me on track.