Image relative url at markdown format

support
1

Hello Hugo community,

I will re-ask a question about markdown notation and relative image path.

Today to display image in Hugo website I write this part of code

![my image](/my-image.png)

Image are put in public directory and everything is fine.

I wish to get relative image for non coder writer and image display during writing in their editor and I want to store image relative to markdown file like

|
content/
├─ article/
│  ├─ article.md
│  ├─ _images/
│  │  ├─ image.png

And syntax in article.md file are like


my article, blah blah blah

![my image](_images/image.png)

Is it possible now with Hugo improvement, in which version :slight_smile:
If you need some tuning configuration have you an example ?

Thanks for your help !

2

Hi @Olopost ,

did you check this similar topic?

3

Yes, but I don’t clearly understand how to create/adapt render-image.html (ticket).
I put in _default/markup/render-image.html

<p class="md__image">
  <img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title}} title="{{ . }}"{{ end }} />
</p>

but not working

Have you some example that I can adapt ? maybe it’s only due to image are not copied with the html folder ?

4 
content/
├── posts/
│   ├── _index.md
│   ├── a.jpg
│   ├── post-1.md
│   └── post-2.md
└── _index.md

In the example above, a.jpg is not logically associated with either post-1 or post-2. Instead, it is logically associated with the posts branch bundle, available as a page resource for content/posts/_index.md.

If you really want to use this markdown in content/posts/post-1.md…

![alt](a.jpg)

…you need to use an image render hook, starting with Hugo’s embedded render hook as an example, then modify it to fall back to a parent page resource:

layouts/_default/_markup/render-image.html 
{{- $u := urls.Parse .Destination -}}
{{- $src := $u.String -}}
{{- if not $u.IsAbs -}}
  {{- with or (.PageInner.Resources.Get $u.Path) (.PageInner.Parent.Resources.Get $u.Path) (resources.Get $u.Path) -}}
    {{- $src = .RelPermalink -}}
  {{- end -}}
{{- end -}}
{{- $attributes := merge .Attributes (dict "alt" .Text "src" $src "title" .Title) -}}
<img
  {{- range $k, $v := $attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k $v | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}>
{{- /**/ -}}

The diff between the embedded image render hook and the example above is:

diff --git a/layouts/_default/_markup/render-image.html b/layouts/_default/_markup/render-image.html
index 013e31235..34ecb4ebc 100644
--- a/layouts/_default/_markup/render-image.html
+++ b/layouts/_default/_markup/render-image.html
@@ -1,7 +1,7 @@
 {{- $u := urls.Parse .Destination -}}
 {{- $src := $u.String -}}
 {{- if not $u.IsAbs -}}
-  {{- with or (.PageInner.Resources.Get $u.Path) (resources.Get $u.Path) -}}
+  {{- with or (.PageInner.Resources.Get $u.Path) (.PageInner.Parent.Resources.Get $u.Path) (resources.Get $u.Path) -}}
     {{- $src = .RelPermalink -}}
   {{- end -}}
 {{- end -}}

The above requires Hugo v0.125.0 or later.

2 Likes