How to properly link images in blog posts?

[maaaaaaaaaatt]

Hey folks. Working on getting a Hugo blog up and running, but struggling to wrap my head around the best way to link to images in each post.

Currently, I have my posts organized in page bundles, which I understand to be best practice. So the structure looks like this:

└── content/
    └── posts/
        └── hello-world/
            ├── hello-world.md
            └── javier.jpg

however, when I try to include an image in the body of my markdown file:

![alt](javier.jpg)

the link is broken, both locally and after I push to github pages. In doing testing, I’ve managed to get it to work by jumping up a folder in my link:

![alt](../javier.jpg)

but that’s 1. messy, and 2. doesn’t work on my homepage, when that relative link is no longer the same.

I think I’m missing an understanding of my structure that’s causing this link to be broken. Any help? What’s the simplest way to include an image in my blogposts??

Repo is here, for reference.

[jmooring]

@maaaaaaaaaatt

── content/
    └── posts/
        └── hello-world/
            ├── hello-world.md
            └── javier.jpg

Rename hello-world.md to index.md, then read this:
https://discourse.gohugo.io/t/markdown-style-images-with-full-path-when-baseurl-includes-subdirectory/52487/2

[maaaaaaaaaatt]

many thanks, per usual @jmooring !

[maaaaaaaaaatt]

also, looking like for images that I would want to remain linked when pulled through a Summary on my homepage (like here), I’d want to link it as a global resource, yeah?

Is there a good way to not include any images in my content section when it’s pulled into the shorter summary on my homepage?

[jmooring]

@maaaaaaaaaatt

want to remain linked when pulled through a Summary

Did you enable the embedded image and link render hooks as described in the linked topic?

[maaaaaaaaaatt]

I did, placed the following into my hugo.toml config file:

[markup.goldmark.renderHooks.image]
enableDefault = true

[markup.goldmark.renderHooks.link]
enableDefault = true

[jmooring]

Well, as long as you or your theme has not overridden the embedded render hooks, image destinations will be correctly resolved regardless of where the content (or summary portion of the content) is displayed.

[jmooring]

The theme you are using provides its own image render hook:
https://github.com/colorchestra/smol/blob/master/layouts/_default/_markup/render-image.html

And that render hook overrides the embedded render hook. So, do the following:

mkdir -p layouts/_default/_markup
touch layouts/_default/_markup/render-image.html

Then copy this into the file you just created.

[maaaaaaaaaatt]

Took some cache clearing on my browser, but this did the trick. Thanks, @jmooring !