Hugo Image References and Typhora

Problem: I paste image into Typora Markdown editor. Typora creates a link to that image that the markdown file can navigate to locally. However, in production navigation flows one level differently. Hugo complies content into a public folder with one less parent directory.

For example…

Pasting into Typora creates this: ../images/image.png

Locally you will see the image in Typora, but on production/dev you will see a bad link. By removing the .. from the link reference url image fails in Typora, but succeeds in Dev/Production.

Now… Options

Use Typora YAML

Typora has a built in, image tool that lets you use a different local root reference for images. See typora-root-url: ../. Unfortunately, my site is built with TOML. And, Typora does not support TOML yet. I’m going to stick with TOML for now, rather than rewrite the whole website in YAML. I find TOML cleaner to read than YAML.

###Just do it live!

I can just remove the .. when I’m ready to deploy the post. Though, when I look at it in my markdown editor, Typora, it will show a broken link. There’s got to be a better way.

###Add twice and ignore!

I’ve decided upon adding the file twice- the interaction doesn’t take much attention to do. When pasting an image into Typora the image will be saved to content/blog/images. That folder will be ignored in .gitignore. And the second copy will reside in /content/images. This will let me see image references locally on Typora and in production. Not pretty, but neither is this blog.