Image Resizing Question

1

Hi There,

I am new to Hugo and not at all familiar with go, and am having some trouble getting the image resizing shortcodes to work in a custom layout template. This is a layout for my /content/projects/*.md files and other parts of the template work fine. Most of these markdown files have ‘featuredImage = “path/to/img.jpg”’ in the frontmatter, and I want to use this path to generate a resized thumbnail cover image for a grid portfolio page. Below is the relevant code:

# this range / index stuff is used to generate a bootstrap grid further down and seems to 
# work
{{ range $index, $element :=  first 8 (where .Site.Pages "Section" "projects") }}
{{ $c := add $index 1 }}

{{ if modBool (add $c 2) 3  }}
<div class="row">
{{end }}

  {{ if modBool $c 3 }}
  <div class="col-sm-4 project-item">

# BEGIN RELEVANT SECTION
    {{ if isset .Params "featuredImage" }}
    {{ index .Params "featuredImage" }}
    {{ $resized := .Params.featuredImage.Resize "200x" }}
    <div class='featured'>
      <a href='{{ .Permalink }}'><img src="{{ $resized.RelPermalink }}"></a>
    </div>
    {{ end }}

This code does not throw an error, but also does not work. I have tried several variations on this, including setting ‘featuredimage’ to lowercase (as mentioned for ‘site-level’ configuration keys here). That throws the following error in my ‘hugo serve -D’ build:

can't evaluate field resize in type interface {}

To my understanding, this means that the ‘if isset’ statement is evaluating true when ‘featuredimage’ is lowercase, but not when it is camelCase. But I am still left with no image and no resized image.

A couple other things:

  • I have tried printing the referenced image path directly with {{ .Params.featuredImage }} and the paths are correct
  • I have tried adding $element before .Params as I believe that is what .Params is referencing (please correct me if this is incorrect)
  • I have also tried following guidance here but am still unable to diagnose issue. Specifically, .Params.featuredImage.ResourceType throws the following error:

can't evaluate field resourcetype in type interface {}

Any guidance would be much appreciated!

EDIT: changed title / added link to related post

2

To resize you need to include this image in a Page Bundle not specify its URL in a frontmatter parameter.

See Hugo content management > Page Bundles > Hugo 0.32 in the Docs

2 Likes
3

OK, thank you for the heads up. Of course it is listed at the top of the image resizing documentation. whoops!

I am still somewhat confused as far as whether multiple pages can share a page-bundle content folder. According to the top image on this page, it seems that both “cat-info.md” and the corresponding hugo-is-cool section homepage “index.md” share the /images/ page-bundle content folder. Am I understanding this correctly? Or is “index.md” a special case? If so, why does there need to be a home page for a single page bundle?

Any insights on building this mental model for myself would be appreciated, as I’m getting a bit lost in the weeds on this one…

Thanks,
Aidan