Keep images & content together

@cdupont yes, it would help to see your source.

Note that:

 ![alt text](images/myimage.jpg)

… is different from:

 ![alt text](/images/myimage.jpg)

Here is the file in my website: https://github.com/Waziup/waziup.io/blob/master/content/tutorials/usecases/water/index.md

If you look at the first tag:

![buoy_ghana](images/presentation_buoy_ghana.jpg)

This image is present locally, but will not render. If I include it in /static/images, it renders.

Hello - yes, if you take a look at the html source of the web page, you can see how the path is being set. The web server will look for the image, according to how you set the path. If you put the image in /static/images then the image is available at:

 http://www.mysite.com/images/presentation_buoy_ghana.jpg

When you specify a path in image markup in your markdown file, hugo is assuming it’s in static not bundling. If you want to access the image file bundled in the same folder as the markdown, you need to specify it with a shortcode. It can also be accessed via template codes from, say, your single.html.

Take a look here:

… and search for the shortcode layouts/shortcodes/imgproc.html. You could use that, to do this, or, just use simple markdown syntax and access them from within static.

This general info is relevant:

https://www.w3schools.com/html/html_filepaths.asp

That’s not necessarily true… I have been accessing images bundled in the content dir using the regular, but slightly tweaked* figure shortcode instead of using the Markdown style image link that creates just an img tag (or resources image processing).

@cdupont If you prefer to have an img tag instead of figure, you can modify the figure shortcode to derive your own img shortcode… just ensure to leave the link-concatenation piece in there.

  • I haven’t tried, but an alternative might be to set canonifyURLs to true.

* The tweak is to just prefix the relative links in src field with the Page Permalink, so that if that image ends up in summary, the links are correct from the home page or any list page too.

I don’t find that to be the case. Standard markdown image links work fine for bundled images here …

Thanks for the corrections. I have some experiments to do then.

Do they? Last time I checked Hugo couldn’t find them.

Calling .Resources in the template without shortcodes generates the Bundle images but the markdown syntax images in a Bundle content file render as broken images in the source of the generated page.

Markdown syntax images are different from .Resources images as far as I know.

I would love for them to be the same but that is simply not the case.

As long as you canonicalize the figure link, it works…

Here’s an example from my site:

Look for the figure shortcode in the Markdown source.

I saw the figure shortcode in your markdown. It’s a shortcode not a plain markdown syntax image in the form of ![alt](some.jpg) and I thought that this is what @bluefuzz meant.

The plain Markdown image link would also work, if you create a shortcode to canonicalize the image link…

![foo]({{< canonicalize "images/bar.png" >}})

I would do that if I didn’t want to use the figure shortcode.


Haven’t tried but may be setting canonifyURLs to true also does the same, and then you might not need that shortcode.

I’ve already done that and posted about it above. My hack puts the shortcode within the angle brackets that are meant for the alt attribute of a markdown image.

I’ll try yours. I’m curious to see if the image gets rendered in an editor with Markdown preview with your version.

No it doesn’t. It’s the old catch 22 pre Page Bundles. Hugo cannot find assets alongside content files. That’s why Page Bundles were developed.

Hmm. Perhaps I misunderstand, but I can’t get them to not work. IOW I can link to any image in a bundle folder directly with a standard markdown ![MyImage](myimage.jpg) without doing anything clever. I don’t know how to do anything clever … :wink:

@bluefuzz
That image link will break if that happens to end up in your post summary, and you are printing post summaries on your homepage or a section page.

After the R&D about baseURLs with subdirs in the other thread, I have updated my figure shortcode. The absURL doesn’t do the “right thing” if the baseURL has a subdir… this update to my custom figure shortcode fixes that.

Sure. I’m aware of that, but straight images in the content seem to work fine.

1 Like

That’s what my experience is too. So I am not aware of the catch 22 issue that @alexandros mentioned… It could also be that whatever that issue was got fixed once the Page Bundles feature was added… admittedly I didn’t try putting image in content dir before that happened.

1 Like

Ok. I just had to see this with my own eyes @kaushalmodi and @bluefuzz and you’re both right.

Cool. This wasn’t the case with Page Bundles when they were first released in Hugo around 0.32-0.33 (I had tested again and again because I work mainly with images).

This must have been fixed at a later Hugo version and I hadn’t noticed. Thank you both for the heads up.

You’re welcome. Sadly, vanilla markdown’s lack of support for classes on anything makes the point rather moot.