Obsidian relative image paths w/ Hugo

support
,
1

Hello,

I cannot get my images to show up on my Hugo test site. My posts get authored in an Obsidian Blog folder that has an attachments subfolder. I’m using relative paths, so the markdown shows this link

![](attachments/cat-typing-4031388285.gif)

For Hugo I have the following in VCS

My Hugo repo:

My posts repo:
Located inside the above repo in the “content/posts”

My post repo is a sub-module inside my Hugo repo. Whenever I add a post, a pipeline kicks off to re-run hugo --minify and publishes my site to my web-server.

I did see jmooring’s post here: Is there a simple way to display images in hugo?
which helped initially but my path’s are different as my attachments folder is in my content/posts folder. I’ve tried a number of different paths, but nothing is sticking. Can someone point me in the right direction?

2

Why not place it in the root of the content directory?

Or completely outside of the content directory?

And this is still a really stupid Obsidian limitation:
https://forum.obsidian.md/t/start-absolute-path-with-a-leading-slash/32501/

3

Also, please change permissions/visibility of https://git.theoswalds.com/richardoswald/hugo-theme-terminal so that we can recursively clone your site, e.g.,

git clone --recurse-submodules https://git.theoswalds.com/public/hugo-richard
1 Like
4

Thanks for your reply @jmorring. I fixed the sub-modules so everything should be public now and anyone should be able to clone with the recurse command.

I can’t currently and would rather not put the attachments folder at the root of content, because they currently are inside the posts folder/submodule.

5

they currently are inside the posts folder/submodule

Sure, but what if you add another content section, e.g.:

content/tutorials/foo.md

Where would you place the images?

6

Excellent point. I was trying to have a single Obsidian vault for private and blog/Hugo posts, but having attachments at root I won’t be able to do this. So I now changed my setup so I have a single vault for my blog/Hugo (probably better that way in case I “oops” and upload a private note). So with this new setup I moved the location of the “Hugo-richard-posts” submodule to my content folder. Now my posts don’t show at all :confused: but the content is there in the public folder. I know I changed a number of items, so I have to slow down and see where it broke (one step forward, two steps back lol).

7

Thank you mooring! I was smiling from ear to ear when I say my site load w/ pictures for the first time! https://blog.theoswalds.com

Moving the attachments folder to the root of contents did the trick with the following in the hugo.toml

[[module.mounts]]
source = 'attachments'
target = 'content/posts/attachments'

Adding more context to my above post, I cloned my hugo-richard-posts as a submodule in my contents/posts folder, and Hugo-richard-posts if a new dedicated Obsidian vault.

8

Ah, I just noticed the images display on the homepage but not on individual posts. I noticed the links are different:
homepage image url:
https://blog.theoswalds.com/attachments/cat-typing-4031388285.gif
post url:
https://blog.theoswalds.com/posts/picture-test/attachments/cat-typing-4031388285.gif

Is my TOML setting correct?

9

I cloned your site a few minutes ago. I changed your module mounts to this:

[module]
  [[module.mounts]]
    source = 'assets'
    target = 'assets'

  [[module.mounts]]
    source = 'content/posts/attachments'
    target = 'assets/attachments'

And everything seemed to work fine.

However, if I were you I would move the root of your vault and the attachments directory into the content directory (that means moving the content repository up a level too) and then adjust the mounts. That way your content repo can include posts and other content types. Placing the (global) attachments directory inside the posts directory doesn’t make sense to me.

10

Thank you jmooring for the handholding on this. I moved up directories so the items are now up a level in the content directory and I also added two different folders for different content types (“travel” and “tutorials”). I can’t figure out how to tell Hugo to show all folders though, I can only select one at a time with this.

[params]
contentTypeName = "tutorials"
11

If you’re talking about the home page, look at your “terminal” theme, specifically the home page layout. Override that to include whatever you want, perhaps just removing the where clause from line 15.

mkdir -p layouts/_default
cp themes/terminal/layouts/_default/index.html layouts/_default/

Then edit the file you just created.

12

I decided to create a “posts” top level folder in my obsidian vault. This sits along side the attachments folder. Inside the posts folder I have sub-folders for “travel” and “tutorials”. This is currently showing all the posts.

Two follow-up questions:

  1. Besides “posts” what other content types could there be?
  2. Do you see any issues down the road with the current setup?
13

I cannot answer either of those questions. What you have right now looks okay for right now.

1 Like
14

Understood. Thank you for the great help @jmooring. Consider this solved!

15

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.