tpl/tplimpl: Embedded render hooks fail to get page resource when destination has leading ./

[andreashaerter]

The issue is comparable to #12163 but with languages in sub-dirs. Images with a relative URL in markdown of non-default languages are not copied to the destination subdir.

What version of Hugo are you using (hugo version)?

$ hugo version
hugo v0.126.1-3d40aba512931031921463dafc172c0d124437b8+extended linux/amd64 BuildDate=2024-05-15T10:42:34Z VendorInfo=gohugoio

Does this issue reproduce with the latest release?

Yes. The issue is reproducible with Hugo >= v0.123.0 up until the current v0.126.1 release. It works with Hugo v0.122.0.

How to reproduce

1. Fresh test site

Created as follows:

$ hugo new site issue
$ cd issue
$ git init
$ git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

Create a hugo.toml file with the following content:

baseURL = 'https://example.org/'
languageCode = 'de-de'
title = 'My New Hugo Site'
theme = 'ananke'
defaultContentLanguage = 'de'
defaultContentLanguageInSubdir = true

[languages]
  [languages.de]
    disabled = false
    languageCode = 'de'
    languageDirection = 'ltr'
    languageName = 'Deutsch'
    title = 'Problem'
    weight = 1

  [languages.en]
    disabled = false
    languageCode = 'en'
    languageDirection = 'ltr'
    languageName = 'English'
    title = 'Issue'
    weight = 2

2. Add a content page with a translation and a ![pic](./image.png)

$ pwd
/home/user/dev/issue-hugo/issue
$ tree ./content
./content
└── test
    ├── image.png
    ├── index.de.md
    └── index.en.md

with index.de.md content:

---
title: 'Test DE (Hauptsprache / main language)'
date: 2024-05-17T19:07:13+02:00
---

## Hauptsprache / main language (German, de)

Dies ist ein Test (This is a Test):

![pic](./image.png)

and index.en.md content:

---
title: 'Test EN (secondary language)'
date: 2024-05-17T19:07:13+02:00
---

## Secondary language (English, en)

This is a Test:

![pic](./image.png)

3. Expected result (=Hugo v0.122.0)

public/en/test/image.png exists when running hugo server --disableFastRender --cleanDestinationDir --renderToDisk:

$ tree ./public/
./public/
[...]
├── de
[...]
│   └── test
│       ├── image.png
│       └── index.html
├── en
[...]
│   └── test
│       ├── image.png
│       └── index.html
[...]

4. Actual result (=Hugo >= v0.123.0 up until current release v0.126.1)

public/en/test/image.png does not exists when running hugo server --disableFastRender --cleanDestinationDir:

$ tree ./public/
./public/
[...]
├── de
[...]
│   └── test
│       ├── image.png
│       └── index.html
├── en
[...]
│   └── test
│       └── index.html
[...]

Notice the missing image.png below en/test/

Misc notes / real world example

I ran into this while working on https://foundata.com/en/blog/ (where "de" (German) is the default language and "en" (English) is an additional translation). I added two blog postings and noticed that some images on the English homepage at /en/ as well as in the blog postings are missing.

It worked well with Hugo 0.122.0:

                  | DE | EN  
-------------------+----+-----
  Pages            | 86 | 84  
  Paginator pages  |  0 |  0  
  Non-page files   | 60 | 57  
  Static files     | 40 | 40  
  Processed images | 48 | 48  
  Aliases          | 19 | 17  
  Sitemaps         |  2 |  1  
  Cleaned          | 48 | 48 

but failed with the latest Hugo version 0.126.1 (Please notice the difference in the "EN" column (especially the Processed images [...] 0 instead of 48):

                   | DE | EN  
-------------------+----+-----
  Pages            | 88 | 85  
  Paginator pages  |  0 |  0  
  Non-page files   | 60 | 57  
  Static files     | 40 | 40  
  Processed images | 48 |  0  
  Aliases          | 19 | 17  
  Cleaned          | 48 | 48 

[jmooring]

With v0.123.0 and later, by default, we don't duplicate resources. See:
https://gohugo.io/content-management/page-resources/#multilingual.

This is the expected result:

public/
├── de/
│   ├── test/
│   │   ├── image.png  <-- this is a page resource for both languages
│   │   └── index.html
│   └── index.html
├── en/
│   ├── test/
│   │   └── index.html
│   └── index.html
└── index.html

If you change your markdown destination from ./image.png to image.png, the embedded image render hook will resolve the destination as expected.

The issue here is the leading ./.

---

Example site:

git clone --single-branch -b hugo-github-issue-12514 https://github.com/jmooring/hugo-testing hugo-github-issue-12514
cd hugo-github-issue-12514
hugo server

Then visit the English version of the test page.

[jmooring]

@bep I'll submit a PR to address this in the render hooks. That seems less invasive than altering the behavior of .Resources.Get and friends.

[andreashaerter]

The issue here is the leading ./.

Indeed, using ![pic](image.png) results in working HTML that links to the picture of the default language, with all versions I tested including v0.126.1.

Sorry, I overlooked the v0.123 change („Hugo does not duplicate shared page resources when building the site.“). I did not expect this to be a feature instead of a bug. :-D

Pointing this out was really useful: there are two parts on our page with things like <foo bar="./ where translated pages will fail because of this... and I guess it would have taken some time to figure it out and adapt to it. :-)

[jmooring]

The markdown bit will be resolved with #12515. But HTML img and a elements will not work with ./something paths. So you'll have to adjust those.

[andreashaerter]

But HTML img and a elements will not work with ./something paths. So you'll have to adjust those.

Thanks @jmooring .

As these are really rare edge-cases where an advanced shortcode makes no sense (mostly some images / videos on the main landing page with a bit of custom markup and classes around), I just created a partials/shortcodes/resourceRelref.html to solve this like <img src="{{< resourceRelref "foobar.png" >}}">:

{{- /*
  Get the relative permalink of

  1. a resource belonging to the current page's collection, or
  2. a global asset (if it does not exist in the current page's collection)

  given as the first parameter.

  This might be useful since Hugo v0.123.0, which does not duplicate shared
  page resources by default with a multilingual, single-host site. For more
  details, see https://github.com/gohugoio/hugo/issues/12514 and
  https://gohugo.io/content-management/page-resources/#multilingual.

  Example:

    {{< rawhtml >}}
      [...]
      <!-- requested file beside the current page or in assets/ -->\
      <img src="{{< resourceRelref `foobar.png` >}}">
    {{< /rawhtml >}}
*/ -}}

{{- $path := (.Get 0) }}
{{- $resource := default nil -}}

{{- /*
  A way to make relative path like "../../foo.png" possible would be
  nice but is not supported by this shotcode yet. Ideas welcome to match all
  page's resource. Hints:
    .Page == the page context from within a shortcode.
    $. == root context of the current template(!), not the page.
*/ -}}
{{- with .Page.Resources.Get $path -}}
    {{-  $resource = . -}}
{{- else -}}
    {{- with resources.Get $path -}}
        {{- $resource = . -}}
    {{- end -}}
{{- end -}}

{{- with $resource -}}
  {{- .RelPermalink -}}
{{- else -}}
  {{- errorf "[theme] partials/shortcodes/resourceRelref.html: Invalid resource %q in %q (not found in the page's collection nor as global resource in \"assets/\")." $path .Page.File.Path -}}
{{- end -}}

So basically like a relref for pages, just for the page's resources and/or an asset.