Images in markdown relative to content #1240

garvincasimir · 2015-07-01T21:32:39Z

Hi,
I like the idea of having my images close to my content so I create my articles like this:

post/my-post.md
post/images/my-post-img.png

This displays the images on the single template when ugly urls are turned on but does not display it on the list pages or on any page when ugly urls are turned off. The relative path for the image never gets transformed even with canonifyurls turned on. Maybe there is a setting I am messing?

![my img](images/my-post-img.png)

I see issue #147 had a discussion that might be related to this. The images are being copied but I am not getting the correct urls in the generated pages.

Any thoughts on this?

The text was updated successfully, but these errors were encountered:

bep · 2015-07-02T12:42:40Z

This is currently not possible, but it is (or should be) in front of @spf13's brain ...

Currently you have to have to path relative to the context root (/post/images/...).

garvincasimir · 2015-07-02T16:15:55Z

I would send a pull request but the go code makes me feel dumb. But seriously great to see @spf13 take up this issue. I know it complicates rendering because the link to the image would vary based on the final path of the page it is rendered on.

tcurdt · 2015-08-09T09:35:29Z

I would love to have support for

posts/2015/some-post-slug/index.md
posts/2015/some-post-slug/image.png
posts/2015/some-post-slug/archive.zip
posts/2015/other-post-slug/index.md

and I want would like that to appear in the output as

/2015/some-post-slug/index.html
/2015/some-post-slug/image.png
/2015/some-post-slug/archive.zip
/2015/other-post-slug/index.html

tcurdt · 2015-08-09T16:41:28Z

This actually seems to be working out of the box now.
Getting rid of "posts" folder is a problem though. A work around is to use:

permalinks:
  post: /:year/:slug/

which isn't quite the same thing though.

SvenDowideit · 2015-09-10T12:23:30Z

@spf13 have you got some ideas on how to implement this? we need it for the Docker docs, but pointers will get me up to speed faster :) (its on my list of things for the next 4 days :)

SvenDowideit · 2015-09-14T00:37:24Z

initial version added in #1398

AlexZeitler · 2016-01-14T00:15:43Z

Is there any progress on using images in markdown relative to content?

jygastaud · 2016-01-14T17:56:44Z

@AlexZeitler : As suggest in #147 I'm using the following workaround.

Contents are in content/project/my-content/index.md folder
Images are stored in static/project/my-content/my-image.png folder

And in my markdown I can do ![my-image](my-image.png)

Hugo just will copy the structure without the first "static" folder so generation the html file will have acces to the image.

Hope it helps!

AlexZeitler · 2016-01-14T20:01:49Z

@jygastaud Thanks for your reply.

I created this structure now:

content/blog/test-with-path/index.md
static/blog/test-with-path/mypng.png

In the md I referenced it this way ![some png](mypng.png)

I also tried

content/blog/test-with-path/index.md
static/blog/test-with-path/mypng.png/mypng.png

None did work.

jygastaud · 2016-01-14T20:53:14Z

That's weird.
That works for me. See jygastaud/jygastaud.github.io@a415264 which result to http://gastaud.io/article/entityconnect-d8/conversion-form-instance/

You can see structure here : https://github.com/jygastaud/jygastaud.github.io/tree/source

garvincasimir · 2016-01-15T03:03:57Z

@jygastaud please take a look at the original issue again. If you only ever display images on the actual post page then you can work around it. However, if your list pages display posts with images where the image is located relative to the content then the image will not display. Hugo would probably need to take the mark down and write different urls to the same asset based on the context of the page render.

For example, your list page is www.yoursite.com/blog/ and it has your last 3 posts. A post at www.yoursite.com/blog/mypost.html with a relative image in /blog/images/img1.jpg can use a relative url in mypost.html to reference that image but that url will be incorrect for displaying your last 3 posts. It also gets tricky when you think about ugly vs no ugly urls. My hope was that Hugo could compensate for these different nuances and always write the correct url to the asset. I hope that clarifies it.

jygastaud · 2016-01-15T08:54:30Z

@garvincasimir oh sorry I missed the part that explains that it works on single page but not on list :/
Sorry for the noise.

Wysie · 2016-06-28T04:40:35Z

This issue gets more complicated when permalinks are used. For now I've just turned off permalinks so I can put images in the same folder as my content. It'd be good if the images gets copied along to the permalink folder structure instead of just the generated HTML file. Thanks!

riverib · 2016-08-02T19:42:19Z

It would be good to be able to put images relative to content, since github can preview and display them correctly. With images in /static folder github does not view/preview the images. It's very convenient for less technical users.

We may like it or not, making it work better with github/gitlab is helpful. Currently images don't display on github for hugo projects.

saifulwebid · 2016-10-20T00:27:37Z

Any update to this issue?

bep · 2016-10-20T06:30:33Z

Any update to this issue?

You just updated it and made me look. Other than that => no.

kburns · 2017-02-16T19:59:18Z

Hi, I'm also interested in this use-case. I've noticed that if you use a root-relative image path (eg "/gallery/post/image.jpg") in the post content, and set relativeURLs="true" in the site config, then things work fine, and both the list and post html pages get their proper page-relative path for the image ("../gallery/post/image.jpg" in /gallery/index.html and "../../gallery/post/image.jpg" in /gallery/post/index.html).

However, the types of content-relative image paths we'd rather use in the post content (eg "image.jpg" or "./image.jpg") don't seem to be modified by setting relativeURLs="true". So perhaps extending the relativeURLs routine to first convert these content-relative paths to root-relative paths, and then performing its current function, would be a good approach for making this work?

timbunce · 2017-03-06T14:56:33Z

A content file like content/foo/bar.md results in an output file like publish/foo/bar/index.html I figured that I could create a content/foo/bar/ directory and put any 'asset files' referred to by the content file into that directory.

Using @garvincasimir original example...

post/my-post.md
post/my-post/my-post-img.png

and then in post/my-post.md we'd refer to the image using:

![my img](my-post-img.png)

This seems natural and works fine for our needs (we're not using features like summary pages).

madeso · 2017-07-24T18:29:25Z

Not sure if this is solved or not out of the box, and I'm guessing it's not since the issue is still open, but I've solved it for my theme using a few regexes and where/paginatiors in a few files. Im also not sure if it is robust as my site is only one folder deep, and I've only tried it with pretty urls. I also dont use figure, only standard markdown images, relative to the current folder. Anyways, heres what I did for my custom theme to make it work, hope it is of help to someone :)

A post is like this:
blog/first-post/bones1.png The image I want to display
blog/first-post/_index.md: ![weird bones 1](bones1.png)
actual example

To make the page display correctly in listings and taxonomies I have a partial that (among other things fixes the urls):

{{ $newImage := (print "<img src=\"" .Permalink "$1\" alt=$3 $4>") }}
{{ $c2 := $c | replaceRE "<img src=\"(([a-zA-Z0-9]+/)*[a-zA-Z0-9]+\\.[a-zA-Z]+)\" alt=(.*) (.*)>" $newImage }}

like this

Finally, thre is just one thing left to do, make sure the posts are displayed on stuff.
I do this with a paginator on lists and taxonomies:

{{$section := .Section }}
{{ $paginator := .Paginate (where (where .Site.Pages "Section" $section) "RelPermalink" "!=" (printf "/%s/" $section)) }}

and a range on the rss template:

{{ range first 15 (where (where .Site.Pages "Section" $section) "RelPermalink" "!=" (printf "/%s/" $section)) }}

and a if on both lists and rss to keep the the post appearing when viewing only _index.md page:
{{ if eq .RelPermalink (printf "/%s/" .Section) }}

The section variable might not be necessary anymore but I had scoping problems when I used several ifs instead of a this oneliner.

rss template

Hugo code custom theme and content: https://github.com/madeso/homepage/
Live: http://madeso.github.io/tags/fail/ (this tag currently contains 3 _index.md posts with local images)

garvincasimir · 2017-07-24T22:25:52Z

Interesting solution @madeso I will definitely try it. Thank you.

stale · 2017-12-06T10:55:17Z

This issue has been automatically marked as stale because it has not had recent activity. The resources of the Hugo team are limited, and so we are asking for your help.
If this is a bug and you can still reproduce this error on the master branch, please reply with all of the information you have about it in order to keep the issue open.
If this is a feature request, and you feel that it is still relevant and valuable, please tell us why.
This issue will automatically be closed in the near future if no further activity occurs. Thank you for all your contributions.

nhoizey · 2017-12-21T08:48:54Z

Isn't this covered by #3651 ?

bep · 2017-12-22T20:41:03Z

Isn't this covered by #3651

Yes, and thanks: I will add this to the list of issues that the commit for that fixes.

This commit also improves on the following: * Symbolic links are now allowed anywhere inside /content Fixes gohugoio#3651 Closes gohugoio#3158 Fixes gohugoio#1014 Closes gohugoio#2021 Fixes gohugoio#1240 Updates gohugoio#3757

This commit is not the smallest in Hugo's history. Some hightlights include: * Page bundles (for complete articles, keeping images and content together etc.). * Bundled images can be processed in as many versions/sizes as you need with the three methods `Resize`, `Fill` and `Fit`. * Processed images are cached inside `resources/_gen/images` (default) in your project. * Symbolic links (both files and dirs) are now allowed anywhere inside /content * A new table based build summary * The "Total in nn ms" now reports the total including the handling of the files inside /static. So if it now reports more than you're used to, it is just **more real** and probably faster than before (see below). Fixes gohugoio#3651 Closes gohugoio#3158 Fixes gohugoio#1014 Closes gohugoio#2021 Fixes gohugoio#1240 Updates gohugoio#3757

This commit is not the smallest in Hugo's history. Some hightlights include: * Page bundles (for complete articles, keeping images and content together etc.). * Bundled images can be processed in as many versions/sizes as you need with the three methods `Resize`, `Fill` and `Fit`. * Processed images are cached inside `resources/_gen/images` (default) in your project. * Symbolic links (both files and dirs) are now allowed anywhere inside /content * A new table based build summary * The "Total in nn ms" now reports the total including the handling of the files inside /static. So if it now reports more than you're used to, it is just **more real** and probably faster than before (see below). A site building benchmark run compared to `v0.31.1` shows that this should be slightly faster and use less memory: ```bash ▶ ./benchSite.sh "TOML,num_langs=.*,num_root_sections=5,num_pages=(500|1000),tags_per_page=5,shortcodes,render" benchmark old ns/op new ns/op delta BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 101785785 78067944 -23.30% BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 185481057 149159919 -19.58% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 103149918 85679409 -16.94% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 203515478 169208775 -16.86% benchmark old allocs new allocs delta BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 532464 391539 -26.47% BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 1056549 772702 -26.87% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 555974 406630 -26.86% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 1086545 789922 -27.30% benchmark old bytes new bytes delta BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 53243246 43598155 -18.12% BenchmarkSiteBuilding/TOML,num_langs=1,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 105811617 86087116 -18.64% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=500,tags_per_page=5,shortcodes,render-4 54558852 44545097 -18.35% BenchmarkSiteBuilding/TOML,num_langs=3,num_root_sections=5,num_pages=1000,tags_per_page=5,shortcodes,render-4 106903858 86978413 -18.64% ``` Fixes gohugoio#3651 Closes gohugoio#3158 Fixes gohugoio#1014 Closes gohugoio#2021 Fixes gohugoio#1240 Updates gohugoio#3757

cdupont · 2018-04-12T16:54:26Z

Hi guys,
how to make this work with both Hugo and Github?
I have my documentation in markdown with images in the same folder. I would like to render it both with Hugo and Github...
I use Hugo V0.38 with bundles.
If I understood, I need to add some code in the markdown, such as:

{{ $logo := .Resources.GetByPrefix "logo" }}

But this won't work with Github.

venky999 · 2020-09-15T17:57:14Z

Any thoughts on how it works on both GitHub and Hugo

RMStoica-zivver · 2020-09-16T11:38:09Z

@cdupont obviously hugo shortcodes aren't supported in GitHub and probably never will be
one should never use them if one wishes to maintain portability

nhoizey · 2020-09-16T12:10:14Z

If there is no Hugo based solution, I wonder if you could:

use standard Markdown syntax for images, so that they show up in Github,
use Hugo to generate the pages HTML with your own templates,
and then transform the HTML with images-responsiver, a Node.js library (disclaimer: I created it)

It should work well with a few pages, but probably be pretty slow with many.

cdupont · 2020-09-16T13:33:31Z

Actually, I got it working both in Github and vanilla Hugo.
See here for example: https://github.com/Waziup/waziup.io/blob/master/content/documentation/wazidev/sensors/index.md
I address the images like this:

![LM35 sensor](./media/lm35.png)

The images are showing in Github.

nhoizey · 2020-09-16T13:59:46Z

@cdupont perfect! 👍

sn0ot · 2020-12-31T20:08:35Z

For those still looking for a solution to this issue (as it is not documented in the hugo docs) I will leave a solution here.

To achieve relative image paths in Hugo in markdowns files, you should organize your content using Hugo's newish Page Bundles structure, specifically Leaf Bundles. This requires using an index.md file (not to be confused with _index.md used in branch bundles).

You are probably used to writing posts inside of a markdown file with the name of the file as the post title , for example post_about_blah.md and blah_blah_post.md. And linking images from the static/ directory.

|--content
|  \__posts
|  |  |--post_about_blah.md  
|  |  |--blah_blah_post.md  
|--static
|  \__images
|  |  |--picture_1.jpg   
|  |  |--picture_2.jpg               
|  |  |--picture_3.jpg   
|  |  |--picture_4.jpg
|  |  |--picture_5.jpg   
|  |  |--picture_6.jpg

Images would be rendered as such:

http://examplesite.com/images/picture_1.jpg
http://examplesite.com/images/picture_2.jpg
http://examplesite.com//images/picture_3.jpg
http://examplesite.com//images/picture_4.jpg
http://examplesite.com//images/picture_5.jpg
http://examplesite.com//images/picture_6.jpg

And therefore, images would have to be linked from inside the markdown posts as such:

![image](images/picture_1.jpg)
![image](images/picture_2.jpg)
![image](images/picture_3.jpg)
![image](images/picture_4.jpg)
![image](images/picture_5.jpg)
![image](images/picture_6.jpg)

Now you have to keep track of which image goes with which post, no name conflicts, etc.

To link images in your markdown file relative to your post, consider the following leaf bundle directory tree:

content
 \__posts 
 |  \__post_about_blah
 |  |  |--index.md
 |  |  |--picture_1.jpg
 |  |  \__images
 |  |  |  |--picture_2.jpg               
 |  |  |  |--picture_3.jpg      
 |  \__blah_blah_post
 |  |  |--index.md
 |  |  |--picture_1.jpg
 |  |  \__images
 |  |  |  |--picture_2.jpg               
 |  |  |  |--picture_3.jpg

In the leaf bundle directory tree example above, index.md contains the "words" of your post and the directory in which index.md is (in our case content/posts/post_about_blah and content/posts/blah_blah_post) will be the generated url. The images will be rendered to to following links

http://examplesite.com/posts/post_about_blah/picture_1.jpg
http://examplesite.com/posts/post_about_blah/images/picture_2.jpg
http://examplesite.com/posts/post_about_blah/images/picture_3.jpg
http://examplesite.com/posts/blah_blah_post/picture_1.jpg
http://examplesite.com/posts/blah_blah_post/images/picture_2.jpg
http://examplesite.com/posts/blah_blah_post/images/picture_3.jpg

Therefore inside of the respective index.md files you can link to images as follows:

![image](picture_1.jpg)
![image](images/picture_2.jpg)
![image](images/picture_3.jpg)
![image](picture_1.jpg)
![image](images/picture_2.jpg)
![image](images/picture_3.jpg)

NOTE: I made a poor choice of directory names and it looks like linking is the almost the same - so read carefully :)

ACupofAir · 2021-12-05T06:18:04Z

Hi, I like the idea of having my images close to my content so I create my articles like this:
post/my-post.md
post/images/my-post-img.png
This displays the images on the single template when ugly urls are turned on but does not display it on the list pages or on any page when ugly urls are turned off. The relative path for the image never gets transformed even with canonifyurls turned on. Maybe there is a setting I am messing?
![my img](images/my-post-img.png)
I see issue #147 had a discussion that might be related to this. The images are being copied but I am not getting the correct urls in the generated pages.

Any thoughts on this?

I find a feasible method: just follow this office tutor, and change the hook, here is my render-image.html

<p class="md__image">
  {{ if .Title }}
  <img src="{{ .Destination  }}" alt="{{ .Text }}">
  {{ else }}
  <img src="../{{ .Destination }}" alt="{{ .Text }}">
  {{ end }}
</p>

If you need ref a image link with http://xxxx, you need link it like this: ![image](https://xxx "title"
If you need ref a image in the res fold you just link it ![image](res/image.png)

github-actions · 2022-01-14T01:54:27Z

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

bep added the Enhancement label Jul 2, 2015

spf13 self-assigned this Jul 2, 2015

NuLL3rr0r mentioned this issue Jan 11, 2016

Post Asset Folder feature in Hugo #1768

Closed

stale bot added the Stale label Dec 6, 2017

stale bot removed the Stale label Dec 21, 2017

bep closed this as completed in 3cdf19e Dec 27, 2017

dependencies bot mentioned this issue Dec 31, 2017

Update https://github.com/gohugoio/hugo in repo_dependencies.yml from v0.31 to v0.32 matrixik/dobek.pro#5

Closed

SamBroner mentioned this issue Aug 18, 2020

Update Hosts & Loaders + Fix Image issue microsoft/FluidFramework#3242

Merged

gundamew mentioned this issue Jun 7, 2021

Relative images not working gundamew/hugo-bingo#6

Closed

github-actions bot added the Outdated label Jan 14, 2022

github-actions bot locked as resolved and limited conversation to collaborators Jan 14, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Images in markdown relative to content #1240

Images in markdown relative to content #1240

garvincasimir commented Jul 1, 2015

bep commented Jul 2, 2015

garvincasimir commented Jul 2, 2015

tcurdt commented Aug 9, 2015

tcurdt commented Aug 9, 2015

SvenDowideit commented Sep 10, 2015

SvenDowideit commented Sep 14, 2015

AlexZeitler commented Jan 14, 2016

jygastaud commented Jan 14, 2016

AlexZeitler commented Jan 14, 2016

jygastaud commented Jan 14, 2016

garvincasimir commented Jan 15, 2016

jygastaud commented Jan 15, 2016

Wysie commented Jun 28, 2016

riverib commented Aug 2, 2016

saifulwebid commented Oct 20, 2016

bep commented Oct 20, 2016

kburns commented Feb 16, 2017

timbunce commented Mar 6, 2017

madeso commented Jul 24, 2017

garvincasimir commented Jul 24, 2017 •

edited

Loading

stale bot commented Dec 6, 2017

nhoizey commented Dec 21, 2017

bep commented Dec 22, 2017 •

edited

Loading

cdupont commented Apr 12, 2018

venky999 commented Sep 15, 2020

RMStoica-zivver commented Sep 16, 2020

nhoizey commented Sep 16, 2020

cdupont commented Sep 16, 2020 •

edited

Loading

nhoizey commented Sep 16, 2020

sn0ot commented Dec 31, 2020

ACupofAir commented Dec 5, 2021

github-actions bot commented Jan 14, 2022

Images in markdown relative to content #1240

Images in markdown relative to content #1240

Comments

garvincasimir commented Jul 1, 2015

bep commented Jul 2, 2015

garvincasimir commented Jul 2, 2015

tcurdt commented Aug 9, 2015

tcurdt commented Aug 9, 2015

SvenDowideit commented Sep 10, 2015

SvenDowideit commented Sep 14, 2015

AlexZeitler commented Jan 14, 2016

jygastaud commented Jan 14, 2016

AlexZeitler commented Jan 14, 2016

jygastaud commented Jan 14, 2016

garvincasimir commented Jan 15, 2016

jygastaud commented Jan 15, 2016

Wysie commented Jun 28, 2016

riverib commented Aug 2, 2016

saifulwebid commented Oct 20, 2016

bep commented Oct 20, 2016

kburns commented Feb 16, 2017

timbunce commented Mar 6, 2017

madeso commented Jul 24, 2017

garvincasimir commented Jul 24, 2017 • edited Loading

stale bot commented Dec 6, 2017

nhoizey commented Dec 21, 2017

bep commented Dec 22, 2017 • edited Loading

cdupont commented Apr 12, 2018

venky999 commented Sep 15, 2020

RMStoica-zivver commented Sep 16, 2020

nhoizey commented Sep 16, 2020

cdupont commented Sep 16, 2020 • edited Loading

nhoizey commented Sep 16, 2020

sn0ot commented Dec 31, 2020

For those still looking for a solution to this issue (as it is not documented in the hugo docs) I will leave a solution here.

To link images in your markdown file relative to your post, consider the following leaf bundle directory tree:

ACupofAir commented Dec 5, 2021

github-actions bot commented Jan 14, 2022

garvincasimir commented Jul 24, 2017 •

edited

Loading

bep commented Dec 22, 2017 •

edited

Loading

cdupont commented Sep 16, 2020 •

edited

Loading