# .Resources.GetMatch not recognizing jpg as Image kind?

**URL:** <https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659>\
**Category:** support\
**Created:** [March 20, 2019, 4:19am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659 "2019-03-20T04:19:16Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 20, 2019, 4:19am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/1 "2019-03-20T04:19:16Z")

</div>

I’m trying to use image processing to ensure a consistent image size in my output. I am getting the following error, which makes it look like I either haven’t set the correct `Kind` (which I thought was supposed to be magic), or image handling isn’t compiled into my hugo distro:

```auto
Rebuild failed:

Failed to render pages: render of "section" failed: "/<path>/layouts/board/board.html:58:42": execute of template failed: template: board/board.html:58:42: executing "board/board.html" at <$headshotR.Fill>: can't evaluate field Fill in type resource.Resource

    {{ range .Pages }}
    {{ $headshotR := .Resources.GetMatch "images/placeholder.jpg" }}
    {{ $headshot := $headshotR.Fill "150x150" }}
    <section class="section container">

Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown

```

Git repo: [https://github.com/paul-archeryincoloradoorg/archeryincolorado.org](https://github.com/paul-archeryincoloradoorg/archeryincolorado.org)

---

<div class="post-metadata">

**Author:** ![davidsneighbour](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/davidsneighbour/32/24507_2.png) [@davidsneighbour](https://discourse.gohugo.io/u/davidsneighbour)\
**Post date:** [March 20, 2019, 5:48am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/2 "2019-03-20T05:48:53Z")

</div>

The error comes when you try to resize it, not when loading it. So either the image has some errors (open in a graphics editor, save as jpg sometimes helps) or the line `{{ $headshot := $headshotR.Fill "150x150" }}` is wrong. Why not use .Resize instead of .Fill? There is no cropping going on and the original is 1:1 in size.

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [March 20, 2019, 5:54am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/3 "2019-03-20T05:54:39Z")

</div>

Hi,

Your pages in `content/board` are not organised as [page bundles](https://gohugo.io/content-management/page-bundles/), so they never have `.Resources`. This means your `$headshotR` is `nil`, giving you that error.

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 20, 2019, 5:59am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/4 "2019-03-20T05:59:46Z")

</div>

Ok, so the case at hand is silly, but I expect that I won’t always have perfect images, and I don’t want to always manage the images by hand (why else use a template generator for this?).

On the off-chance the image was bad, I ran `mogrify -format jpg -quality 85 placeholder.jpg` which rewrote the file according to imagemagick, which probably does not emit bad images.

I also used “resize” instead of “fill”, and I still get a similar error:

```auto
ERROR 2019/03/19 23:55:26 Failed to render pages: render of "section" failed: "/<path>/layouts/board/board.html:32:30": execute of template failed: template: board/board.html:32:30: executing "board/board.html" at <$headshotR.Resize>: can't evaluate field Resize in type resource.Resource

```

So, it would appear that there is some kind of issue with `.Resources.GetMatch` setting the class so that the image methods like `.Fill` and `.Resize` are attached to the reference.

I guess my question then is: Did I do something wrong, or is hugo broken?

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 20, 2019, 6:02am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/5 "2019-03-20T06:02:47Z")

</div>

How is that not a bundle? Isn’t a bundle just a directory under `/content` that has an `index.md` or `_index.md` (depending on if it’s leaf or branch)?

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [March 20, 2019, 6:05am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/6 "2019-03-20T06:05:24Z")

</div>

> [@paulprogrammer](#):
>
> How is that not a bundle?

`/board/` is a branch bundle: it has `_index.md`.  
`/board/loremipsum.md` is not: it does not have `index.md`.

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 20, 2019, 6:09am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/7 "2019-03-20T06:09:39Z")

</div>

Wow, so because I’m within the `range` context, `.GetMatch` will not work? And further, it doesn’t error until I try to do something with the content it couldn’t find?

That’s astonishing. I feel like that ought to be a bug.

Anyway, do you have an idea on how to use the information in the front matter of an article to reference an image file as a resource so that it can be manipulated in a list/section page?

(yes, the current example uses a hardcoded string, but the idea is to use the hardcoded string only when the data are not present in the front matter)

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [March 20, 2019, 6:29am UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/8 "2019-03-20T06:29:58Z")

</div>

> [@paulprogrammer](#):
>
> it doesn’t error until I try to do something with the content it couldn’t find?

There’s nothing wrong with a `nil` value in itself. Maybe you are checking for absence of `.Resources`. It is essentially `nil.Fill` that doesn’t work, because `nil` does not have a `.Fill` method.

> [@paulprogrammer](#):
>
> Anyway, do you have an idea on how to use the information in the front matter of an article to reference an image file as a resource so that it can be manipulated in a list/section page?

Convert your `board/loremipsum.md` pages into page bundles `board/loremipsum/index.md`. You need to have the images as [page resources](https://gohugo.io/content-management/image-processing/#the-image-page-resource) to be able to use the image processing methods. You could also put your images in your `static` folder, and have urls in the front matter, but you won’t be able to use the image processing features on them.

If you want to use your `placeholder.jpg` as a fallback page resource, you could ‘attach’ it to the `board/_index.md` bundle. Note that you will need to have it in the same directory as the `_index.md` (ie `/board/placeholder.jpg`) as per the docs on page bundles.

```auto
{{ $boardpage := .GetPage "/board/_index.md" }}
{{ $placeholder := $boardpage.Resources.GetMatch "placeholder.jpg" }}

```

Then in your `range`, (assuming page bundles) check first if there are resources, and use the placeholder if not found.

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 20, 2019, 8:52pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/9 "2019-03-20T20:52:50Z")

</div>

I have restructured the location to try to access as a page resource. My structure is as follows:

```nohighlight
board/
   + _index.md
   + placeholder.jpg
   + loremipsum/
   | - index.md
   + dalorsitamet/
      - index.md

```

Within the `.../layouts/board/board.html` template, I have done the following outside the `range` context:

```nohighlight
    <pre>
    {{ . }}
    {{ $boardpage := .GetPage "/board/_index.md" }}
    {{ $boardpage }}
    {{ $placeholderR := .Resources.GetMatch "placeholder.jpg" }}
    {{ $placeholderR }}
    {{/* $placeholder := $placeholderR.Fill "150x150" */}}
    </pre>

```

The output is:

```nohighlight
Page(/board/_index.md)

Page(/board/_index.md)

```

What I have attempted to do is:

1. Prove that `.` is-a page (it seems to be).
2. Prove that `.GetPage "/board/_index.md"` is the same as `.` (it seems to be)
3. try to load the resource from `.` or `$boardpage`
4. emit something that shows me if I was successful.

If I try to run `.Resize` or `.Fill` on the resource, I get the same error as above. It doesn’t matter if I use `.` or `$boardpage` as the context.

Is this expected behavior?

---

<div class="post-metadata">

**Author:** ![pointyfar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/pointyfar/32/5797_2.png) [@pointyfar](https://discourse.gohugo.io/u/pointyfar)\
**Post date:** [March 20, 2019, 11:37pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/10 "2019-03-20T23:37:37Z")

</div>

With this structure,

```auto
content/board/
├── _index.md
├── ....md
└── placeholder.jpg

```

this in `layouts/board/board.html`

```auto
{{ $boardpage := .GetPage "/board/_index.md" }}
{{ $placeholder := $boardpage.Resources.GetMatch "placeholder.jpg" }}

dot context: {{.}}<br>
$boardpage: {{$boardpage}}<br>
$placeholder: {{ $placeholder }} / {{ .Resources.GetMatch "placeholder.jpg" }}

<hr> 

($placeholder.Fill "150x150").Permalink: <br>
{{ ($placeholder.Fill "150x150").Permalink }}

<hr>

img src = ($placeholder.Fill "150x150").Permalink
<img src="{{ ($placeholder.Fill "150x150").Permalink }}" >

```

I get this output:

![screenshot-placeholder-fill](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/f/f72d1805b29e0703cbad2ce15994254844353474.png)

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 21, 2019, 5:14pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/11 "2019-03-21T17:14:25Z")

</div>

I’m starting to suspect there’s something more going on here. I’m running the following:

```nohighlight
    <pre>
    Dotcontext: {{ . }}
    {{ $boardpage := .GetPage "/board/_index.md" }}
    $boardpage: {{ $boardpage }}
    {{ $placeholderR := $boardpage.Resources.ByType "images" }}
    $placeholderR: {{ $placeholderR }}
    </pre>

```

and my output is as follows, indicating that hugo did not find anything of type image, even though I have placeholder.jpg in the same directory with `_index.md`. Note that I’ve also done the above using `.Page.Resources.ByType` and `$boardpage.Resources.ByType` with the same results.

```nohighlight
    Dotcontext: Page(/board/_index.md)
    
    $boardpage: Page(/board/_index.md)
    
    $placeholderR: []

```

Directory structure:

```nohighlight
❱ ls -la
total 24
drwxr-xr-x 8 myusername primarygroup 256 Mar 20 14:11 .
drwxr-xr-x 6 myusername primarygroup 192 Mar 19 23:10 ..
-rw-r--r-- 1 myusername primarygroup 374 Mar 19 23:03 _index.md
drwxr-xr-x 3 myusername primarygroup 96 Mar 20 14:06 loremipsum
drwxr-xr-x 3 myusername primarygroup 96 Mar 20 14:06 dalorsetamet
-rw-r--r--@ 1 myusername primarygroup 4523 Mar 20 14:11 placeholder.jpg

```

Here’s my hugo install, courtesy of homebrew.

```nohighlight
❱ hugo version
Hugo Static Site Generator v0.54.0/extended darwin/amd64 BuildDate: unknown

```

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [March 21, 2019, 5:42pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/12 "2019-03-21T17:42:04Z")

</div>

I recursively cloned your repo, ran it locally, and took a full page screenshot of `http://localhost:1313/board/`. Just to make sure I’m on the same page, the below is not your expected output?

 ![screencapture-localhost-1313-board-2019-03-21-12_40_12](https://canada1.discourse-cdn.com/flex036/uploads/gohugo/original/2X/6/654617f0d6fba8c4964ee4b915b165c03399e5f7.png)

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 21, 2019, 5:55pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/13 "2019-03-21T17:55:19Z")

</div>

Yep, that’s my expected output. But it’s not what I’m getting. ☹

The difference is in the `<pre>` block where I’m outputting variables as a debugging mechanism. Where you get the `Resource(image: placeholder.jpg)` I get `nil`.

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [March 21, 2019, 6:10pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/14 "2019-03-21T18:10:30Z")

</div>

I would run `git status` and make sure you don’t have any unwanted changes. And you can always do a `git reset --hard` to get back to last commit

You could also try passing the garbage collection flag on your next run

```nohighlight
hugo server --gc

```

---

<div class="post-metadata">

**Author:** ![paulprogrammer](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/paulprogrammer/32/7322_2.png) [@paulprogrammer](https://discourse.gohugo.io/u/paulprogrammer)\
**Post date:** [March 21, 2019, 6:46pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/15 "2019-03-21T18:46:40Z")

</div>

I’m 100% sure that it’s not because of unwanted changes. I have only wanted changes in there right now.

Running with the garbage collector flags seemed to solve the problem.

Is the server not totally reliable to rebuild on demand?

---

<div class="post-metadata">

**Author:** ![zwbetz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.gohugo.io/zwbetz/32/16088_2.png) [@zwbetz](https://discourse.gohugo.io/u/zwbetz)\
**Post date:** [March 21, 2019, 7:01pm UTC](https://discourse.gohugo.io/t/resources-getmatch-not-recognizing-jpg-as-image-kind/17659/16 "2019-03-21T19:01:31Z")

</div>

What `--gc` does per the [docs](https://gohugo.io/commands/hugo_server/)

> enable to run some cleanup tasks (remove unused cache files) after the build

So perhaps a cache of that image was causing your issue