No images processed

support
1

I’m trying to generate images using the new imaging feature in 0.32. However, when I build my site, no images are processed (FWIW, locally building hugotest processes the images fine, so it’s something to do with my implementation). What am I doing wrong?

                   | EN  
+------------------+----+
  Pages            | 30  
  Paginator pages  | 10  
  Non-page files   |  2  
  Static files     | 15  
  Processed images |  0  
  Aliases          | 12  
  Sitemaps         |  1  
  Cleaned          |  0

In one of my templates, I have the following code which I think should generate the images:

{{ range first 3 (where .Site.RegularPages "Type" "blog").ByPublishDate.Reverse }}
<li>
  {{ if isset .Params "headerImage" }}
  <a href="{{ .Permalink }}">
  {{ $imagePrefix := index (split .Params.headerImage ".") 0 }}
  {{ $original := .Page.Resources.GetByPrefix $imagePrefix }}
  {{ .Scratch.Set "image310x207" ($original.Fill "310x207 Center") }}
  {{ .Scratch.Set "image300x200" ($original.Fill "300x200 Center") }}
  {{ .Scratch.Set "image768x512" ($original.Fill "768x512 Center") }}
  {{ .Scratch.Set "image450x300" ($original.Fill "450x300 Center") }}
  {{ $image310x207 := .Scratch.Get "image310x207" }}
  {{ $image300x200 := .Scratch.Get "image300x200" }}
  {{ $image768x512 := .Scratch.Get "image768x512" }}
  {{ $image450x300 := .Scratch.Get "image450x300" }}
  <img width="{{ $image310x207.Width }}" height="{{ $image310x207.Height }}"
    src="{{ $image310x207.RelPermalink }}"
    alt="{{ .Title }}"
    srcset="{{ $image310x207.RelPermalink }} 310w, {{ $image300x200.RelPermalink }} 300w, {{ $image768x512.RelPermalink }} 768w, {{ $image450x300.RelPermalink }} 450w, {{ $original.RelPermalink }} 1000w"
    sizes="(max-width: 310px) 100vw, 310px"/>
  </a>
  {{ end }}
  <h6><a href="{{ .Permalink }}">{{ .Title }}</a></h6>
  <ul><li>{{ .Date.Format "2 Jan 2006" }}</li></ul>
</li>
{{ end }}

The headerImage is referenced in the frontmatter:

---
title: "Test 1"
date: 2017-11-30T10:09:52Z

headerImage: "test-1-image.jpg"
---

My config has the following:

[permalinks]
  blog = "/:section/:year/:month/:slug/"
  pages = "/:title"

[imaging]
  # Default resample filter used for resizing. Default is Box,
  # a simple and fast averaging filter appropriate for downscaling.
  # See https://github.com/disintegration/imaging
  resampleFilter = "box"  

# Defatult JPEG quality setting. Default is 75.
  quality = 68

The tree of content/blog:

./content/blog
├── _index.md
├── automating-hugo-deployment-to-digitalocean-with-codeship.md
├── automating-hugo-header.jpg
├── test-1-image.jpg
├── test-1.md
├── test-10.md
├── test-2.md
├── test-3.md
├── test-4.md
├── test-5.md
├── test-6.md
├── test-7.md
├── test-8.md
└── test-9.md

The tree of public/blog:

./public/blog/
├── 2017
│   ├── 06
│   │   └── test-10
│   │       └── index.html
│   ├── 07
│   │   └── test-9
│   │       └── index.html
│   ├── 08
│   │   ├── test-7
│   │   │   └── index.html
│   │   └── test-8
│   │       └── index.html
│   ├── 09
│   │   ├── test-4
│   │   │   └── index.html
│   │   ├── test-5
│   │   │   └── index.html
│   │   └── test-6
│   │       └── index.html
│   ├── 10
│   │   └── test-3
│   │       └── index.html
│   ├── 11
│   │   ├── test-1
│   │   │   └── index.html
│   │   └── test-2
│   │       └── index.html
│   └── 12
│       └── automating-hugo-deployment-to-digitalocean-with-codeship
│           └── index.html
├── automating-hugo-header.jpg
├── index.html
├── page
│   ├── 1
│   │   └── index.html
│   └── 2
│       └── index.html
└── test-1-image.jpg

No resources/_gen_images folder is created, and I’m surprised to see the images at the root of the blog, rather than in the relevant blog folder. At least, that’s what @bep seems to have in his example.

My Hugo version details:

Hugo Static Site Generator v0.32.2 darwin/amd64 BuildDate: 2018-01-04T20:26:46Z
GOOS="darwin"
GOARCH="amd64"
GOVERSION="go1.9.2"

What am I doing wrong?

Edit:

If I change the .Param.headerImage to .Param.headerimage, I move forward a bit:

{{ $imagePrefix := index (split .Params.headerimage ".") 0 }}
{{ $original := .Page.Resources.GetByPrefix $imagePrefix }}

However, I now get a load of errors (I suspect one for every page) that flow down through the template call order and end with:

error calling partial: template: theme/partials/sidebar.html:46:29: executing "theme/partials/sidebar.html" at <.Page.Resources.GetB...>: can't evaluate field Page in type *hugolib.Page

Edit 2:

Offending line: {{ $original := .Page.Resources.GetByPrefix $imagePrefix }}. Removing .Page almost gets me right on track.

However, I now get the following error:

error calling partial: template: theme/partials/sidebar.html:47:49: executing "theme/partials/sidebar.html" at <$original.Fill>: can't evaluate field Fill in type resource.Resource

Which is caused by this (and then I suspect every follow on similar line too): {{ .Scratch.Set "image310x207" ($original.Fill "310x207 Center") }}.

What’s the problem here?

2

If you have a sub-path in your baseURL, you have probably stumbled upon this:

Which will be fixed tomorrow – but I will wait with a bugfix release until Monday.

3

But quickly reading your post, that might not be your case.

It would be better if you could post a link to the (GitHub?) source of your problematic code. “Spotting the error” in lots of copy paste snippets is almost impossible. And it tastes like work.

4

Not work, personal blog. Here’s the branch that I’m working on. I get the error as described above. In attempting to use the images in my headers, I now also get the following error (from baseof).

Failed to render "/Users/ashley/Development/ashleybye.uk/themes/ashleybyeuk/layouts/_default/single.html": reflect: Method on nil interface value
5

One thing you can try is to take my hugotest repo, delete the resources folder and try to run hugo.

Does it still work?

Also, what OS are you running? Windows?

6

It still builds. macOS High Sierra.