Documents posted on GitHub looks different from rendered by Hugo

support
1

Still no solution, documents posted on GitHub looks different from rendered by Hugo (
As example, I have

  • content\posts
    • article.md - main article
    • article.files\ - folder with images

Hugo fails this scheme because creates two different folders in public\posts (one for content and one for content). Obsidian, GitHub, VSCode and others shows fine this MD. If I rename article.files folder into just article, Hugo still can’t show images because link looks like article/article/image.png instead of article/image.png or even just image.png as he puts index.html to folder with content

2

I have read your post several times, and I do not understand the problem.

See https://discourse.gohugo.io/t/requesting-help/9132.

Let us see your code

Include a link to the source code repository of your project, because we really need the context of seeing your templates and partials to be able to help you. It is trivial to do a quick git clone on your repo, then run hugo server in your project, to help you out. On the other hand, recreating your code from screenshots, or sort of guessing at it, is not.

If you can’t share your repository for whatever reason, consider creating a dummy repo that you can share, which reproduces the problem you’re experiencing.

3

We had similar issues for some time, but I believe we found a solution today.

Problem: Images embedded with ![Test][Destination] into regular pages are either shown in GitHub preview or in the rendered site, but not both.

Our analysis: With pretty URLs, a regular page like content/section/page.md is rendered by Hugo as section/page/index.html. So the image Destination needs to be relative to section for GitHub but relative to section/page for the rendered site. (The content is not a problem if the Destination is also below content)

Our solution: We use the markdown render hook feature to override how the image Destination is treated. The logic is a bit complicated, but the basic idea is to add ../ for relative Destination in images appearing in regular pages:

{{- if strings.HasPrefix .Destination "http:" -}}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

{{- else if strings.HasPrefix .Destination "https:" -}}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

{{- else if strings.HasPrefix .Destination "/" -}}
{{ $destination := printf "%s%s" .Page.Site.BaseURL .Destination }}
<img src="{{ $destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

{{- else if .Page.BundleType -}}
<img src="{{ .Destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

{{- else -}}
{{ $destination := printf "../%s" .Destination }}
<img src="{{ $destination | safeURL }}" alt="{{ .Text }}" {{ with .Title }} title="{{ . }}"{{ end }} />

{{- end -}}

Unfortunately there is some logic involved in detecting a relative image Destination so we had to put this {{- else if -}} cascade.