Markdown editor for text with images readable by both editor & Hugo

[Ged]

Hi… I’m working on my first Hugo site.
I usually use the Obsidian markdown editor to create pages and insert images. I drag an image into the editor and I can see the image in the editor preview (works great). But when I launch Hugo and it creates a site from my pages - I see a line like ![[image1.jpg]] instead of pictures (and this is not a link, but just plain text)
I took another editor Markdown and inserted the image in it - after launching Hugo, I saw the line /Users/user/start/files/image1.jpg instead of the image (and this is again plain text)
I understand that it is possible to process these lines into links and pictures will be shown normally - but I have hundreds of pages and thousands of pictures. I need Hugo to read image-in-text pages directly after the editor and display them as pages with images (I will place the jpg files themselves in acc. site directories).
May be I need to change Obsidian to another editor? Which one?
Or use some settings in Hugo?

[jmooring]

First, disable Wiki style links in Obsidian preferences. Wiki style links are not valid markdown.

Second, where do you intend to store images? Please provide a specific path relative to the root of your project.

[Ged]

Disabling Wiki style links in Obsidian - partially helped. Now links have appeared instead of images But they are distorted in a strange way. When I insert image file ‘albufera.jpg’ into Obsidian - it makes a link . In the image file name is added ‘%201’ before extension. In Obsidian it all looks good, I see images. When I run Hugo, he of course does not find such images with ‘%201’ in names and in their place on the page is empty…

[chrillek]

I’m afraid that this is getting nowhere. Hugo’s requirements are quite clear: CommonMarkup syntax for images. So,
![alt text](url "title") works just fine. If you’re using Obsidian or any other text editor (VS Code works fine for me, btw), doesn’t matter. As long as you adhere to the syntax.

If your editor doesn’t do what it should, you should use another one. Obsidian is notorious for “improving” Markdown. Therefore, it might not be the best choice to work with Hugo. Alternatively, it might help to not drag/drop the image into the editor and simply type the file’s name.

[jmooring]

You didn’t answer my question:

@jmooring

Second, where do you intend to store images?

Making Hugo, Obsidian, and VS Code place nicely together is simple.

Vault structure:

Obsidian vault settings (app.json):

{
  "attachmentFolderPath": "attachments",
  "newFileFolderPath": "content",
  "newFileLocation": "folder",
  "newLinkFormat": "relative",
  "showFrontmatter": true,
  "useMarkdownLinks": true
}

Hugo configuration:

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

[[module.mounts]]
source = 'attachments'
target = 'static/attachments'

Try it:

git clone --single-branch -b hugo-forum-topic-43912 https://github.com/jmooring/hugo-testing hugo-forum-topic-43912
cd hugo-forum-topic-43912
hugo server

[Ged]

Sorry I didn’t explain clearly. I don’t have a file location problem.
The point now is that Obsidian changes the NAME of each image when creating a link. I use drag and drop or copy/paste, insert for example ‘abs.jpg’ file to page - it puts the file in the right directory location but on the page it creates a link to file called ‘abs%201.jpg’. And so every time: cala_dor.jpg → on page link to ‘cala_dor%201.jpg’. In Obsidian it all looks good, I see images.

But when I run Hugo, it does not find such images with ‘%201’ in names.
Obsidian is installed with default settings, I did not change anything. No plugins installed.
I can type the file’s name properly by hand but it’s too slow when there are a lot of files.

[jmooring]

I’m unable to reproduce the problem. When I drag and drop into Obsidian, I see:

I suggest you raise an issue here:
https://forum.obsidian.md/c/get-help/19

[chrillek]

If you’re on a Mac, that looks like a copy of the file name: abc.jpg –> abc 1.jpg
The %20 is just an encoded space character.

[Ged]

You’re right! I found what was the problem. If I copy/paste an image that is already in the project file directory - then Obsidian does not create file copy (it use existing file with normal name) - but it makes a link with ‘%201’ in name. If I use this file the third time - it make link with ‘%201%201’ in name. Inside Obsidian it all looks good. I’m on a Windows 10. Now i will test it on Mac.