Failure to use image methods on image resource

support
1

Hello,

I’m trying to build a template which gets the first image in the page content to use as a featured image (as suggesed here).

I have the file in the page bundle, manage to find it with regex in the index.html (which supplies the content), match it with a resource and render it.

The thing is, I can not use the specific “image resource” methods such as {{.Width}} on it ( execute of template failed at <.Width>: error calling Width: this method is only available for image resources).

However {{.ResourceType}} and {{.MediaType}} will return image and image/png respectively. Am I doing something wrong or did I encounter a bug?

{{$first_image := ""}}
{{$matches := findRESubmatch `<img\s.*?src=(?:'|")([^'">]+)(?:'|")` .Content 1 }}
{{range $matches}}{{$first_image = index . 1}}{{end}}
  {{with .Resources.GetMatch $first_image}}
    {{/* These work*/}}
    {{.ResourceType}}
    {{.MediaType}}
    <img src="{{ .Permalink }}" alt="">
   {{/* This throws an error */}}
    {{.Width}}
    {{end}}

I’m currently using hugo v0.111.3+extended linux/amd64 BuildDate=2023-03-16T08:41:31Z VendorInfo=debian:0.111.3-1

The source can be found here:

2

You are more likely to receive a prompt and accurate response if you post a link to your project’s Git repository.

See Requesting Help.

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

I’ve added a source!

4

Hugo version?

5

As in the original post

6

Here’s what I did:

git clone --recurse-submodules https://git.autonomic.zone/ruangrupa/lumbung.space
cd lumbung.space
git checkout regex

Then I edited themes/lumbung-theme/layouts/partials/pen_card.html, changing this:

{{/* .Width */}}

To this:

{{ .Width }}

Then I build the site with v0.111.3…

Start building sites … 
hugo v0.111.3-5d4eb5154e1fed125ca8e9b5a0315c4180dab192+extended linux/amd64 BuildDate=2023-03-12T11:40:50Z VendorInfo=gohugoio

                   | EN  
-------------------+-----
  Pages            | 45  
  Paginator pages  |  0  
  Non-page files   |  9  
  Static files     | 29  
  Processed images |  2  
  Aliases          | 17  
  Sitemaps         |  1  
  Cleaned          |  0  

Total in 109 ms

No problems.

2 Likes
7

Thank you!

Having gone through all the material, I’ve found the culprit, which is a specific tiff image (not included in the smaller set I sent prior). I’ve made a workaround in the template logic, to test for the existence of .ResourceType to work around the issue. I share the image & workaround in question here, in case there is a way this is useful to hugo development: found the culprit · d0fd3f018e - lumbung.space - Git with solidaritea

1 Like
8

In a more robust approach you would include only those media types that Hugo can process as images. For example:

{{ range .Resources.ByType "image" }}
  {{ if in (slice "bmp" "gif" "jpeg" "png" "webp") .MediaType.SubType }}
    {{ with .Resize "200x" }}
      <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
    {{ end }}
  {{ end }}
{{ end }}

In the above note that files with media type image/tiff are excluded. Although Hugo can process this media type as an image, browsers do not support this image format. So unless you’re going to process to another format (e.g., jpeg or webp), exclude tiff images.

This would be a bit easier with something like this:
https://github.com/gohugoio/hugo/issues/11779