Not able to resize an image from params!

support
1

Hi there,

I currently us this code in layout and it works

# 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

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

# 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

1 Like
2

What does this mean?

3

Hello @jmooring

this produce an error which I am not able to understand

# /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 
<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=""
    />

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

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

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

1 Like
5

I also use in the list.html

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

and also

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

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

7

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

# 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

8

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

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

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

Then render the img element like this:

{{ 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.

2 Likes
9

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

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

etc.

thanks

10

Not if you organize your content as I described.

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.

1 Like
11

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

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

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

Thanks again I will try to use this

12

Hi @jmooring

1 last question, if I place image in global resources

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

and if in the page frontmatter I define:

---
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

13

Have you tried it?

14

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:

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

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

then in

# 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

15

What does this mean? You need to be specific.

16

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:

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

17

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.

{{ 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.

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
2 Likes
20

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