Image render hook error

[blade]

I have {{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }} in my image render hook that works with images at the root of the page bundle. But throws an error when the images are moved to an ‘images’ folder in the bundle. What is the recommended way to call $image in such a case?

[davidsneighbour]

You don’t call $image, you call .Destination, which sounds like part of your frontmatter. More code around that line and we will be able to help you. Have a look at how to request help. People need to understand the issue to help. This line just tells us part of the problem. Not all.

[bep]

@blade

. But throws an error when the images are moved to an ‘images’ folder in the bundle.

What error?

I assume the image isn’t found (returning nil), and then I assume that is in a so called branch bundle (e.g. the home page), those are currently limited to one level only so any images below /images will not be found. There is not workaround for that other than remembering that for folders with _index.md you cannot have resources in sub folders.

[blade]

@bep

remembering that for folders with _index.md you cannot have resources in sub folders.

It is a single post with index.md and some images in the same folder i.e ./content/example-post/index.md (and the images in the root of example-post). The error is execute of template failed: template: _default/_markup/render-image.html:2:19: executing "_default/_markup/render-image.html" at <$image.Resize>: nil pointer evaluating resource.Resource.Resize. The code in part looks as below

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $small := $image.Resize "480x" }}
{{ $medium := $image.Resize "768x" }}
{{- $large := $image.Resize "992x" -}}

[cshoredaniel]

bep is still on point:

@bep

the image isn’t found (returning nil)

This looks like the image on at least one page (the render-hook is applied to all images) fails to be found via:

@blade

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}

You may want to add a conditional so that you only try to resizes images if $image is found.

E.g.

{{ $image := .Page.Resources.GetMatch (printf "%s" (.Destination | safeURL)) }}
{{ $small := $image }}
{{ $medium := $image }}
{{ $large := $image }}
{{ with $image }}
   {{ $small = .Resize "480x" }}
   {{ $medium = .Resize "768x" }}
   {{- $large = .Resize "992x" -}}
{{ end }}

The reason for the {{ $name := $image }} outside the with is (at least in the past) that := inside a {{ with }} only exists within the scope of the {{ with }}.

[cshoredaniel]

@davidsneighbour

you call .Destination , which sounds like part of your frontmatte

@davidsneighbour .Desination is a variable made available to image and link render-hooks, and is the path given via Markdown for the image or link. (e.g. the part in parentheses ‘(some/path/image.png)’, or in this case: ‘(image.png)’ since it’s in the same bundle as the page referencing it.

[blade]

@cshoredaniel

You may want to add a conditional so that you only try to resizes images if $image is found.

But that is opposite of what I want. I want to move all the images in page bundles to their respective images folder inside the bundle. I have a few posts now using bundles and I intend to convert more if there is a workaround to making sure $image code works for such images inside page-bundle/images (and that is my original question).

[cshoredaniel]

A couple of things. First, I got confused and thought you were using _index.md which would be a branch bundle which can’t use an images subdir in the bundle. You, however, are using leaf bundles (index.md) so images/image.png (or whatever image type) should work.

However, the render-hook will only work, as you had it, when all images are already in that type of arrangement.

The solution I presented would allow the mixing and matching (provided the rest of the render-hook is correctly set up; you will need a ‘fallback’ in you render-hook for any Markdown image that doesn’t allow for resizing. This can get tricky and you may want to search the forum for simple image render-hooks that folks have done. (I have a rather complex render-hook and partial, which intends to be a ‘black box’, so isn’t suitable for learning purposes).

[blade]

@cshoredaniel

However, the render-hook will only work, as you had it, when all images are already in that type of arrangement.

They are in that arrangement already.

@cshoredaniel

so images/image.png

This solves it. I had /images in my markdown files and removing the forward slash stops the error. Such a subtle issue…

[blade]

@cshoredaniel

The solution I presented would allow the mixing and matching (provided the rest of the render-hook is correctly set up; you will need a ‘fallback’ in you render-hook for any Markdown image that doesn’t allow for resizing.

I use JPEGs in most of my images. The hook I am using is similar to one here. But modified to use a <picture> tag.

[cshoredaniel]

Ah yes, absolute vs. relative. When you use the forward slash (/) at the beginning the path is taken to be relative the root of the site rather than relative to the current page (bundle). I hadn’t thought of that wrinkle. (Which is why we prefer to see a repo rather than parts of info…).

@blade

I use JPEGs in most of my images. The hook I am using is similar to one here. But modified to use a <picture> tag.

Ah, okay, cool. I thought you were writing your own hook from scratch. So many things that don’t seem necessary to mention until after the fact. (I’m bad for that as well).

[blade]

@cshoredaniel

I thought you were writing your own hook from scratch.

I recently moved to Hugo, and I don’t code at all! But learning on the process. I dedicated two weeks to document all the things I might need before moving over, so the image hook was one of them and testing everything locally.