# Not able to resize an image from params!

**URL:** <https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902>\
**Category:** support\
**Created:** [August 26, 2023, 2:37pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902 "2023-08-26T14:37:46Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 2:37pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/1 "2023-08-26T14:37:46Z")

</div>

Hi there,

I currently us this code in layout and it works

```auto
# layouts/partials/components/card.html
<img
      class="object-cover aspect-[4/3]"
      src="{{ .Params.coverImage }}"
      alt=""
    />

```

I try to modify this so I can resize image such as

```auto
{{ $image := resources.Get .Params.coverImage }}
    {{ $imageresized := $image.Resize "400x" }}
    <img
      class="object-cover w-full h-48"
      src="{{ $imageresized.RelPermalink }}"
      alt=""
    />

```

but this doesn’t work, what can be possibly wrong with this code? Not able to understand what else it need

the project have:

```auto
# directory `content/plumbers/` and each page have front matter 
---
title: 1424
date: 2023-08-26T09:19:14.457Z
coverImage: images/83.jpg
---

```

I cannot define a static path in the layout such as “images/83.jpg” as each plumber have different image.

Any suggestion on how to get.resources from page front matter and resize it?

Thanks

---

<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:** [August 26, 2023, 2:53pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/2 "2023-08-26T14:53:45Z")

</div>

> [@gora](#):
>
> this doesn’t work

What does this mean?

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:00pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/3 "2023-08-26T15:00:26Z")

</div>

> [@gora](#):
>
> ```auto
> {{ $image := resources.Get .Params.coverImage }}
> {{ $imageresized := $image.Resize "400x" }}
> <img
> class="object-cover w-full h-48"
> src="{{ $imageresized.RelPermalink }}"
> alt=""
> />
> 
> ```

Hello @jmooring

this produce an error which I am not able to understand

```auto
# /layouts/partials/components/card.html:4:30"
# [0m: execute of template failed at <$image.Resize>: 
# nil pointer evaluating resource.Resource.Resize  
# render: failed to render pages: render of "home" failed: 
# : nil pointer evaluating resource.Resource.Resize 

 <div class="flex-shrink-0">
    {{ $image := resources.Get .Params.coverImage }}
    {{ $imageresized := $image.Resize "400x" }}
    <img
      class="object-cover w-full h-48"

```

Thanks

> **line 4 of the layout**
>
> ```auto
> <div class="flex flex-col">
> <div class="flex-shrink-0">
> {{ $image := resources.Get .Params.coverImage }}
> {{ $imageresized := $image.Resize "400x" }}
> <img
> class="object-cover w-full h-48"
> src="{{ $imageresized.RelPermalink }}"
> alt=""
> />
> 
> ```

```auto
# full image path 
content/en/agents/images/83.jpg

# full page path 
content/en/agents/1446.md

```

---

<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:** [August 26, 2023, 3:01pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/4 "2023-08-26T15:01:17Z")

</div>

> [@gora](#):
>
> `coverImage: images/83.jpg`

What is the full path to the image from the root of your project directory?

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:07pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/5 "2023-08-26T15:07:30Z")

</div>

I also use in the list.html

```auto
# content/en/plumbers/
<div class="grid gap-6 mx-auto">
    {{ range where .Site.RegularPages "Section" "plumbers" }} {{
    partial "components/card.html" . }} {{ end }}
  </div>

```

and also

```auto
# content/en/agents/
<div class="grid gap-6 mx-auto">
    {{ range where .Site.RegularPages "Section" "agents" }} {{
    partial "components/card.html" . }} {{ end }}
  </div>

```

---

<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:** [August 26, 2023, 3:07pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/6 "2023-08-26T15:07:57Z")

</div>

What is the full path to the image from the root of your project directory?

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:16pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/7 "2023-08-26T15:16:48Z")

</div>

Hi @jmooring

DO you mean like this?

`/Users/goralaal/Documents/andrew-j/content/en/agents/images/83.jpg`

Not sure what root of image is

```auto
# the project

├── content/
│ ├── en/
│ │ ├── agents/
│ │ │ ├── images/
│ │ │ └── 83.jpg
│ │ ├── 1446.md
│ │ └── _index.md
│ │ ├──plumbers/
│ │ │ ├── images/
│ │ │ └── 104.jpg
│ │ ├── 16.md
│ │ └── _index.md
│ └── _index.md
├── layouts/
└── config.toml

```

does this help?

thanks

---

<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:** [August 26, 2023, 3:24pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/8 "2023-08-26T15:24:02Z")

</div>

There are three types of resources:

- page (use `.Resources.Get`, etc.)
- global (use `resources.Get`, etc.)
- remote (use `resources.GetRemote`)

See documentation to understand where the resource must be located.  
[https://gohugo.io/content-management/image-processing/#image-resources](https://gohugo.io/content-management/image-processing/#image-resources)

If I were you, I would organize my content like this:

```plaintext
content/
├── agents/
│ ├── 1446/
│ │ ├── images/
│ │ │ └── cover.jpg
│ │ └── index.md
│ └── 1971/
│ ├── cover.jpg
│ └── index.md
└── _index.md

```

Then render the `img` element like this:

```plaintext
{{ with .Resources.GetMatch "**cover.*" }}
  {{ with .Resize "400x" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

```

The `with` constructs above eliminate the need to initialize more variables, and the entire block is skipped if the image doesn’t exist.

Also, by consistently using the same image name (cover.\*), we don’t need to specify an image path in front matter.

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:29pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/9 "2023-08-26T15:29:51Z")

</div>

Thanks @jmooring

there are only 2 issues that I have with this

1.` {{ $image := .Resources.Get "sunset.jpg" }}` I cannot define image path as it will make it impossible to show different image for each agent/plumber

1. I am using netlify cms which restrict me from doing some things

Is there another possibility where I tell Hugo to get the image that is defined in the front matter `.Params.coverImage` and then for example take the list of image provided again in the front matter

```auto
---
images:
 - image1.jpg
 - image2.jp
---

```

etc.

thanks

---

<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:** [August 26, 2023, 3:32pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/10 "2023-08-26T15:32:35Z")

</div>

> [@gora](#):
>
> it will make it impossible to show different image for each agent/plumber

Not if you organize your content as I described.

> [@gora](#):
>
> the image that is defined in the front matter

If you carefully read the documentation that I linked to, you will see that global resources must be in the assets directory, or a directory mounted to assets.

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:34pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/11 "2023-08-26T15:34:49Z")

</div>

> [@jmooring](#):
>
> Not if you organize your content as I described.

I am restricted by the netlify cms so the below structure is not possible for me

```auto
content/
├── agents/
│ ├── 1446/
│ │ ├── images/
│ │ │ └── cover.jpg
│ │ └── index.md
│ └── 1971/
│ ├── cover.jpg
│ └── index.md
└── _index.md

```

I suppose the only option I have is move the images to the global resources

```auto
assets/
└── images/
    └── sunset.jpg <-- global resource

```

Thanks again I will try to use this

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 3:57pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/12 "2023-08-26T15:57:33Z")

</div>

Hi @jmooring

1 last question, if I place image in global resources

```auto
assets/
└── images/
    └── sunset.jpg <-- global resource

```

and if in the page frontmatter I define:

```auto
---
title: 1424
date: 2023-08-26T09:19:14.457Z
coverImage: images/83.jpg
---

```

how can I tell Hugo to get the image from page front matter, will this method work?

`{{ $image := resources.Get .Params.coverImage }}`

and then resize this image?

Thanks

---

<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:** [August 26, 2023, 4:27pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/13 "2023-08-26T16:27:04Z")

</div>

> [@gora](#):
>
> will this method work?

Have you tried it?

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 4:38pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/14 "2023-08-26T16:38:45Z")

</div>

Hi @jmooring

Yes I try this: `{{ $image := resources.Get .Params.coverImage }}`

and this: `{{ $image := .Page.Resources.GetMatch .Params.coverImage }}`

and a much more complex one like this:

```auto
# in layouts/partials/components/card.html
{{- $image := .coverImage }}

{{ $coverImage := $image.Resize "x720" }}

```

then in

```auto
# layouts/_default/list.html

{{ range where .Site.RegularPages "Section" "agents" }}
      {{- $mediaAssetsDir := replace .RelPermalink .Site.LanguagePrefix "" }}
      {{- with .Params.assetsImages }}
      {{- $mediaAssetsDir = . }}
      {{- end -}}
      {{ $coverImage := index (resources.Match (printf "images/%s%s" $mediaAssetsDir .Params.coverImage)) 0 -}}
      {{ partial "components/card.html" (dict "c" . "coverImage" $coverImage) -}}
      {{ end }}

```

but no luck if there is an existing example on how to get an image from the page front matter and resize it will be greatly helpful.

I have seen many examples and lost the plot now.

thanks

---

<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:** [August 26, 2023, 5:43pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/15 "2023-08-26T17:43:31Z")

</div>

> [@gora](#):
>
> but no luck

What does this mean? You need to be specific.

---

<div class="post-metadata">

**Author:** ![gora](https://avatars.discourse-cdn.com/v4/letter/g/ba8739/32.png) [@gora](https://discourse.gohugo.io/u/gora)\
**Post date:** [August 26, 2023, 6:07pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/16 "2023-08-26T18:07:13Z")

</div>

Hi @jmooring

all of these variations I try after reading multiple blogs and Hugo documentations, doesn’t work for me as they produce one or the other error.

for example this one:

```auto
execute of template failed: template: partials/components/card.html:7:20: executing "partials/components/card.html" at <$image.RelPermalink>: nil pointer evaluating resource.Resource.RelPermalink

```

Do you know of a theme or website which make use of images from the page front matter and then resize them?

Thanks

---

<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:** [August 26, 2023, 8:45pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/17 "2023-08-26T20:45:54Z")

</div>

Hugo is throwing the error because one or more of the pages rendered by this template does not have a coverImage parameter in front matter. You need to code defensively.

In my initial response I provided an example of how to do that.

```plaintext
{{ with resources.Get .Params.coverImage }}
  {{ with .Resize "250x webp" }}
    <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
  {{ end }}
{{ end }}

```

Here’s a simple example. Three of the five pages have a coverImage parameter. They work fine. The other two silently fail, as expected.

```plaintext
git clone --single-branch -b hugo-forum-topic-45902 https://github.com/jmooring/hugo-testing hugo-forum-topic-45902
cd hugo-forum-topic-45902
hugo server

```

---

<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:** [September 3, 2023, 2:02pm UTC](https://discourse.gohugo.io/t/not-able-to-resize-an-image-from-params/45902/20 "2023-09-03T14:02:44Z")

</div>

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