imageConfig uses incorrect path for finding file

[tyler71]

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

v0.69.0-4205844B/extended

I'm trying to get the width / height of a image
In the code below, $img outputs files/stats/img/my_image.png
The file is located at

/var/www/mydomain/assets/files/stats/img/my_image.png

When calling imageConfig, it shows this error:

at <imageConfig $img>: error calling imageConfig: open /var/www/mydomain/files/stats/img/my_image.png: no such file or directory

Note the missing mydomain/assets/files

{{ $img := resources.GetMatch (.Get 0)}} 
{{ if $img }} 
<figure>                                                                        
    <img
        src="{{ $img.RelPermalink }}"                                           
        alt="{{ .Get 1 }}"                                                      
        {{ with imageConfig $img }}                                             
        height="{{ .Height }}"                                                  
        width="{{ .Width }}"                                                    
        {{ end }}                                                               
        />                                                                      
    <figcaption>{{ .Get 1 }}</figcaption>                                       
</figure>                                                                       
{{ else }}                                                                      
<p>NO IMAGE MATCH</p>                                                           
{{ end }}

[tyler71]

A hacky workaround. Still seems to be broken in v0.68.3-157669A0

{{ $hackedString := printf "assets/%s" $img.RelPermalink }}

{{ $img := resources.GetMatch (.Get 0)}} 
{{ if $img }} 
{{ $hackedString := printf "assets/%s" $img.RelPermalink }}
<figure>                                                                        
    <img
        src="{{ $img.RelPermalink }}"                                           
        alt="{{ .Get 1 }}"                                                      
        {{ with imageConfig $hackedString }}                                             
        height="{{ .Height }}"                                                  
        width="{{ .Width }}"                                                    
        {{ end }}                                                               
        />                                                                      
    <figcaption>{{ .Get 1 }}</figcaption>                                       
</figure>                                                                       
{{ else }}                                                                      
<p>NO IMAGE MATCH</p>                                                           
{{ end }}

[NathanLovato]

I can confirm the issue, I've had to do something similar for images that are in my content directory. Paths that exist according to the function fileExists do not work with imageConfig.

Here's my image render hook, for a website with hundreds of pictures in both /content/ and /static/:

{{ $width := 0 }}
{{ $height := 0 }}

{{ $path := add .Page.RelPermalink (.Destination | safeURL) }}
{{ if not (fileExists $path) }}
    {{ $path = printf "%s%s" "static" (.Destination | safeURL) }}
{{ end }}

{{ if (fileExists $path) }}
    {{ $fullPath := $path }}
    {{ if not (findRE "^static" $path 1) }}
    {{ $fullPath = add "content" $fullPath }}
    {{ end }}

    {{ with (imageConfig $fullPath) }}
        {{ $width = .Width }}
        {{ $height = .Height }}
    {{ end }}
{{ else }}
    {{ warnf "<img/> render hook: %q not found" $path }}
{{ end }}

<img
    src="{{ .Destination | safeURL }}"
    alt="{{ .Text }}"
    loading="lazy"
    {{ if ne $width 0 }}width="{{ $width }}"{{ end }}
    {{ if ne $height 0 }}height="{{ $height }}"{{ end }}
    {{ with .Title}}title="{{ . }}"{{ end }}
/>

Also, paths with a leading ./ won't resolve correctly. I've had to remove ./ from all my image paths, e.g. use img/some-picture.png instead of ./img/some-picture.png

[stale]

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.

[cascading-jox]

I have the same problem on v0.80.0/extended linux/amd64. Using the following code I get the full path of the file:

{{ with imageConfig .imageUrl }}
  {{ .Width }} x {{ .Height }}
{{ end }}

[NathanLovato]

I can still confirm the issue. I've got a PR open with that, freshly updated, with code that prints warning messages with image paths.

It's still the same issue as the comments above, but here's the repo and PR if it can help with testing: GDQuest/website#233

Static images are mounted as assets/img to make them accessible as resources (iirc).

[[module.mounts]]
source = "static/img"
target = "assets/img"

And the output of hugo server

WARN 2021/02/16 20:36:10 "//localhost:1313/docs/guidelines/style-guides/game-art/samples/landscape-platformer.svg"
WARN 2021/02/16 20:36:10 "samples/landscape-platformer.svg" image
WARN 2021/02/16 20:36:10 "imgs/spacemacs-gtags-search-operators.png" image
WARN 2021/02/16 20:36:10 "img/obs-mixer.png" image
WARN 2021/02/16 20:36:10 "krita-tutorial-banner.jpg" image
WARN 2021/02/16 20:36:10 "img/waveform.png" image
WARN 2021/02/16 20:36:10 "img/key-mon.png" image
WARN 2021/02/16 20:36:10 "painterly-game-art-banner.jpg" image
WARN 2021/02/16 20:36:10 "img/pointer-arrow-demo.png" image
WARN 2021/02/16 20:36:10 "img/template-arrow-select.png" image
Built in 490 ms
Error: Error building site: "/home/gdquest/Repositories/website/layouts/_default/_markup/render-image.html:26:32": execute of template failed: template: _default/_markup/render-image.html:26:32: executing "_default/_markup/render-image.html" at <.Width>: error calling Width: *resources.genericResource is not an image

[jmooring]

I am not convinced that there is a problem, though there may be room for improvements to the documentation.

The imageConfig function takes a single parameter, a path relative to the project's root directory, with or without a leading slash.

The resources.GetMatch function take a single parameter, a path (glob pattern) relative to the project's assets directory, with or without a leading slash.

This content:

assets
└── files
    ├── a.jpg
    └── b.jpg

With this this template code:

{{/* imageConfig expects path relative to the project's root directory. */}}
{{ $img_a_path := "assets/files/a.jpg" }}
{{ $img_a := imageConfig $img_a_path }}
{{ printf "$img_a data type: %T" $img_a }}<br>
{{ printf "$img_a.Width: %d" $img_a.Width }}<br>
{{ printf "$img_a.Height: %d" $img_a.Height }}<br><br>

{{/* resources.GetMatch expects path relative to the project's assets directory. */}}
{{ $img_b_path := "files/b.jpg" }}
{{ $img_b := resources.GetMatch $img_b_path }}
{{ printf "$img_b data type: %T" $img_b }}<br>
{{ printf "$img_b.Width: %d" $img_b.Width }}<br>
{{ printf "$img_b.Height: %d" $img_b.Height }}<br>

Produces this output:

$img_a data type: image.Config
$img_a.Width: 400
$img_a.Height: 266

$img_b data type: *resources.resourceAdapter
$img_b.Width: 300
$img_b.Height: 200

In the original description of this issue, @tyler71 passes a resourceAdapter instead of a path to imageConfig. Although the imageConfig function accepts this data type, the interpreted value is a path relative to the project's assets directory instead of a path relative to the project's root directory.

When working with images as global resources (resources.Match or resources.GetMatch) or page resources (.Resources.Match or .Resources.GetMatch), do not use imageConfig to obtain image dimensions. The image dimensions are available as resource properties: .Width and .Height.

[NathanLovato]

That'd be definitely nice to have in the docs, and perhaps in errors too.

If the problem is a matter of passing the wrong argument type, the error currently doesn't mention that, and we don't have type info in the templating language.

I'll test code changes later, thanks! I've been unable to get this to work, and other people had the same issue on the discourse community. It'd be great if the fix could be so simple!

[jmooring]

@NathanLovato

1) If you would like to see changes to the documentation, create issues (or preferably pull requests) here: https://github.com/gohugoio/hugoDocs.

2) If you feel that the imageConfig function needs type checking, please create a separate issue (proposal).

[github-actions]

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.