Improving render-image.html hook to better work moving from domain to subdirectory based hosting

support
1

Hi,

using Hugo v0.151.0 we came across an issue with referencing images from assets and static folders using simple markdown syntax if hosted as subdirectories.

The issue we have is that we often use ![image](/success-static.jpg to reference images from the static folder and we haven’t defined any mounts. We did not recognize this until we moved to a subfolder based hosting (like e.g. from https://example.com to https://example.com/subsite.

I understand that static folder is NOT the preferred approach anymore and that ![image](/success-static.jpg is bad practice. But instead all media/images should be put into assets folder. (btw. I consider mountig static into assets a hack because then people still use static for what it is not earmarked no more).

Hence, my question is if the following would be a viable approach to cope with the situation:

a) accept images from static folder and absolute path references

b) but give a warning that this is not desired no more

e.g. by changing render-image.html to something like:

{{- warnf "image link is absolute path reference=%B" (hasPrefix .Destination "/") -}}

{{- /*make $src silently work, even if it is not referencing a resource but a static file with absolute path reference originally from domain based hosting */ -}}
{{- $u := strings.TrimPrefix "/" .Destination | urls.Parse  -}}
{{- $src := relURL $u  -}}
{{- warnf "after making it relative to baseURL src=%s" $src -}}
{{- if not $u.IsAbs -}}
  {{- $path := strings.TrimPrefix "./" $u.Path -}}
  {{- with or (.PageInner.Resources.Get $path) (resources.Get $path) -}}
    {{- $src = .RelPermalink -}}
    {{- warnf "relpermalink-src=%s" $src -}}
    {{- with $u.RawQuery -}}
      {{- $src = printf "%s?%s" $src . -}}
    {{- end -}}
    {{- with $u.Fragment -}}
      {{- $src = printf "%s#%s" $src . -}}
    {{- end -}}
  {{- else -}} 
    {{- warnf "The image render hook was unable to locate image as a resource from %s." $src -}}
  {{- end -}}
{{- end -}}

<img src="{{ $src }}" alt="{{ .PlainText }}"
  {{- with .Title }} title="{{ . }}" {{- end -}}
  {{- range $k, $v := .Attributes -}}
    {{- if $v -}}
      {{- printf " %s=%q" $k ($v | transform.HTMLEscape) | safeHTMLAttr -}}
    {{- end -}}
  {{- end -}}
>
{{- /**/ -}}

The warning then allows to recoginze such cases and if disered we can make hugo fail in warning.

2

I think this is a solution looking for a problem.
What’s under static/ is copied as is, including subdirectories, into the site’s root. Nothing more, nothing less. So if your content goes to a subdirectory, write it off under static too: static/going-to-subdir/something.jpg

If what you want is a subsite per immediate child of the root (mysite.example/sub1, mysite.example/sub2) and can’t be bothered writing the different addresses nor making a resource from assets, use a new renderhook with the adjustment in urls or the same but check each time the page’s kind/type/layout variable or a cascaded variable.

My module config is hella simple:

[[module.mounts]]
source = ‘assets’
target = ‘assets’
[[module.mounts]]
source = ‘static’
target = ‘assets’

same urls whether the image lies under assets/name.jpg or static/name.jpg. Sole difference is getting the resource then its .Permalink, or writing the url directly.
It’s good practice to make your own renderhooks anyway, the default behavior should be as unassuming and intuitive as possible, even if not necessarily what the average project would use.

1 Like
3

Never call a feature implemented through sweat and unpaid work for the good of the community a ‘hack’. It does not inspire confidence…

1 Like
4

sry, I do not want to give this impression. And thx for making me aware.

I love the mounting feature! My whole request is based on being new to hugo and not being confident in using which feature for which purpose. Being a non native speaker, I should phrased it differently in pointing that out. My consideration is about in which local enviroment and for which use cases it is good to use the mounting feature. Being unsure about the correct usage is based on reading the doc:

The static directory contains files that will be copied to the public directory when you build your site. For example: favicon.ico, robots.txt, and files that verify site ownership. Before the introduction of page bundles and asset pipelines, the static directory was also used for images, CSS, and JavaScript.

The assets directory contains global resources typically passed through an asset pipeline. This includes resources such as images, CSS, Sass, JavaScript, and TypeScript…

I like this clear distinction. IMHO then mounting static into assets blurs this distinction. However, of course there will be many good reasons to exactly do this. And that’s why it is great to have this feature. However, I am not sure which option is good for my projects migrating to Hugo. Should we keep all in static (and of course then mount) or follow Hugo’s distinction. Indeed, none of this would be a hack, but a choice.

5

Thx. This helps me a lot.

6

https://discourse.gohugo.io/t/where-to-place-image-files-when-using-the-markdown-content-format/55087/2

1 Like
7

Very helpful summary. If only I had found that before I wouldn’t have opened this topic.

1 Like