Imgproc shortcode not working inside of content.md files

support
1

Hi,

I’m using an imgproc shortcode with the following code inside it:

{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 | default "Resize"}}
{{ $options := .Get 2 | default (printf "%dx" $original.Width ) }}
{{ if eq $command "Fit"}}
{{ .Scratch.Set "image" ($original.Fit $options) }}
{{ else if eq $command "Resize"}}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
{{ .Scratch.Set "image" ($original.Fill $options) }}
{{ else }}
{{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
{{ end }}
{{ $image := .Scratch.Get "image" }}
<div class="mt-4">
    <image class="img-fluid {{ .Get 3 }}" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
</div>

I have a page bundle inside a content section folder called “cube-integration”.
Structure is as follows:

cube-integration/

  • index.md
  • cube-platform.png
  • evolve-upgrade.png
  • fast-troubleshooting.png
  • in-store-and-on-hold-solutions-from-cube.jpg
  • integrate-apis.png
  • music-on-hold-player.md
  • providers-and-brands-use-cube.png
  • security.png
  • smart-management.png
  • support-apps.png

Note that the two files listed in bold are the only resources that are not images. In _index.md, my imgproc shortcode works with all of the image resources.`However, I cannot include any of these images in the music-on-hold-player.md file with this shortcode.

This is the error I get:

Building sites … ERROR 2018/07/17 14:35:48 error processing shortcode "shortcodes/imgproc.html" for page "cube-integration\\music-on-hold-player.md": template: shortcodes/imgproc.html:3:55: executing "shortcodes/imgproc.html" at <$original.Width>: can't evaluate field Width in type resource.Resource

I have tried listing the image as a resource in the front matter of music-on-hold-player.md like this:

resources: 
  -name: "cube-platform"
  - src: "cube-platform.png"

but still it does not work.

What can I change in my imgproc shortcode to have it properly process images inside .md files that are separate from _index.md?

What am I missing here?

2

Hello,

I am having a similar problem, I don’t understand what’s wrong and I would like to ask for help.
I am using hugo v0.60.1, this is my website: https://imgalone.com and this is the theme I am using: https://github.com/panr/hugo-theme-hello-friend/ . I have this code in my _index.md page:
{{< imgproc ManSittingAtDeskFromBehind Resize "256x256" >}}
and it works as expected.
I tried to add the exact same block of code inside my about.md file and I get the following error:

Error: Error building site: "/vagrant/imgalone.com/content/about.md:24:1": failed to render shortcode "imgproc": failed to process shortcode: "/vagrant/imgalone.com/themes/hello-friend/layouts/shortcodes/imgproc.html:8:36": execute of template failed: template: shortcodes/imgproc.html:8:36: executing "shortcodes/imgproc.html" at <$original.Resize>: nil pointer evaluating resource.Resource.Resize

Both _index.md and about.md are situated in the same folder and the image ManSittingAtDeskFromBehind.png is right there alongside them in /content/

In fact the exact same block of code does not work in any other page, which does not make sense to me (my coding knowledge is limited and I had to learn html and css just so I can customize this site/theme and so I can understand how to use hugo).

This is the code from /themes/hello-friend/layouts/shortcodes/imgproc.html:

{{ $original := .Page.Resources.GetMatch (printf "*%s*" (.Get 0)) }}
{{ $command := .Get 1 }}
{{ $options := .Get 2 }}

{{ if eq $command "Fit"}}
  {{ .Scratch.Set "image" ($original.Fit $options) }}
{{ else if eq $command "Resize"}}
  {{ .Scratch.Set "image" ($original.Resize $options) }}
{{ else if eq $command "Fill"}}
  {{ .Scratch.Set "image" ($original.Fill $options) }}
{{ else }}
  {{ errorf "Invalid image processing command: Must be one of Fit, Fill or Resize."}}
{{ end }}

{{ $image := .Scratch.Get "image" }}

<figure>
    <img style="max-width: 100%; width: auto; height: auto; border-radius: 8px;" src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">
    {{ with .Inner }}
    <figcaption>
      {{ . }}
    </figcaption>
    {{ end }}
</figure>

Please help.

5

Hi!

Your shortcode is working.

When you want to use it for your about page, you need to create a folder /content/about/ and an index.md inside it and move move your image to this folder.

.
└─ content/
   └─ about/
       ├─ index.md
       └─ index.png
       └─ ManSittingAtDeskFromBehind.jpg

I hope this helps!

1 Like
6

Hi @Grob,

Thank you very much for your reply, it set me on the correct path and I fixed the problem, now all works as it should.

Best regards,