# Failure to use image methods on image resource

**URL:** <https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527>\
**Category:** support\
**Tags:** images\
**Created:** [November 25, 2024, 3:40pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527 "2024-11-25T15:40:05Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![rra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rra/32/17788_2.png) [@rra](https://discourse.gohugo.io/u/rra)\
**Post date:** [November 25, 2024, 3:40pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/1 "2024-11-25T15:40:05Z")

</div>

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](https://discourse.gohugo.io/t/select-first-image-from-page-content/42535/4)).

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?

```auto
{{$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:

> **[use first image in content as featured image using regex, hugo forum topic...](https://git.autonomic.zone/ruangrupa/lumbung.space/commit/86c9df0c66ed3a6fb81e45f8b7fadfcaf9837e09#diff-b5e326f1aa87cb5caae070cf6a6b9871fd7d1d15)**
>
> lumbung.space - A social and publishing platform for sharing harvests by all members online. It is non-extractive, co-governed by the users, and is built on open platforms.

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 25, 2024, 3:55pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/2 "2024-11-25T15:55:41Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![rra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rra/32/17788_2.png) [@rra](https://discourse.gohugo.io/u/rra)\
**Post date:** [November 25, 2024, 4:06pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/3 "2024-11-25T16:06:31Z")

</div>

I’ve added a source!

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 25, 2024, 4:11pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/4 "2024-11-25T16:11:30Z")

</div>

Hugo version?

---

<div class="post-metadata">

**Author:** ![rra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rra/32/17788_2.png) [@rra](https://discourse.gohugo.io/u/rra)\
**Post date:** [November 25, 2024, 4:12pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/5 "2024-11-25T16:12:54Z")

</div>

> [@rra](#):
>
> I’m currently using `hugo v0.111.3+extended linux/amd64 BuildDate=2023-03-16T08:41:31Z VendorInfo=debian:0.111.3-1`

As in the original post

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 25, 2024, 4:16pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/6 "2024-11-25T16:16:58Z")

</div>

Here’s what I did:

```plaintext
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:

```plaintext
{{/* .Width */}}

```

To this:

```plaintext
{{ .Width }}

```

Then I build the site with v0.111.3…

```plaintext
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.

---

<div class="post-metadata">

**Author:** ![rra](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/rra/32/17788_2.png) [@rra](https://discourse.gohugo.io/u/rra)\
**Post date:** [November 25, 2024, 5:17pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/7 "2024-11-25T17:17:41Z")

</div>

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](https://git.autonomic.zone/ruangrupa/lumbung.space/commit/d0fd3f018e7921b117d750e7e23151b4af85b06b)

---

<div class="post-metadata">

**Author:** ![jmooring](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/jmooring/32/4214_2.png) [@jmooring](https://discourse.gohugo.io/u/jmooring)\
**Post date:** [November 25, 2024, 6:06pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/8 "2024-11-25T18:06:23Z")

</div>

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

```plaintext
{{ 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](https://github.com/gohugoio/hugo/issues/11779)

---

<div class="post-metadata">

**Author:** ![system](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/system/32/1_2.png) [@system](https://discourse.gohugo.io/u/system)\
**Post date:** [November 27, 2024, 6:06pm UTC](https://discourse.gohugo.io/t/failure-to-use-image-methods-on-image-resource/52527/9 "2024-11-27T18:06:44Z")

</div>

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.