How to use Image Processing using a short code?

1

Hey Guys, I’m hours in and I can’t seem to get image processing to work in my shortcode, All my errors revolve around getting the image, things like “nil pointer evaluating resource.Resource.Resize” or can’t be a string…

My main questions are what folder should the images for the blog posts be in? content/images, static/images, assert/images, from my understanding Image Processing doesn’t work from the static folder and I think my image fetching is wrong.

This is my shortcode:

{{< test src="image.jpg" alt="some image that never loads" >}} located in a markdown file at content/posts.

Some failed attempts:

{{- $image := resources.Get "/images/refractory-cement.jpg" -}}
{{ $image := $resource.Resize "600x" }}
<img src="{{$image.RelPermalink}}" alt="forget about the alt" />

2:

{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}
{{ $tinyw := default "500x" }}
{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ $tiny := .Scratch.Get "tiny" }}
<img src="{{$tiny.RelPermalink}}" alt="">

I’m read so many posts on here, stack answers, the docs… this blog (Laura Kalbag – Processing Responsive Images with Hugo) and I must be missing something stupid at this point.

I’ve read things about mounting and changing directories but got nothing to work.

Need help! Does someone have a shortcode with simple image processing and notes on file structure! would be very helpful.

Thanks,
Ben

Version: Hugo Static Site Generator v0.75.1-A4A7BAB7 windows/amd64 BuildDate: 2020-09-15T06:48:58Z

2

I have a figure shortcode that might give you some pointers:

/layouts/shortcodes/figure.html

{{ if .Get "name" }}
	{{ $original := .Page.Resources.GetMatch (printf "%s*" (.Get "name") ) }}
	{{ if $original }}
		{{ $command := .Get "command" }}
		{{ $options := .Get "options" }}
		{{ 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 }}
	{{ end }}
{{ end }}
{{ $image := .Scratch.Get "image" }}
{{ if or ($image) (.Get "src") }}
	<figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
		{{ with .Get "link"}}<a href="{{.}}">{{ end }}
			<img 
			src='{{ if (.Get "name") }}{{ $image.RelPermalink }}{{ else }}{{ .Get "src" }}{{ end }}'
			{{ if (.Get "name") }}width="{{ $image.Width }}" {{ else }}{{ with .Get "width" }}width="{{.}}" {{ end }}{{ end }}
			{{ if (.Get "name") }}height="{{ $image.Height }}" {{ else }}{{ with .Get "height" }}height="{{.}}" {{ end }}{{ end }}
	 		{{/* {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"  {{ end }}*/}}
			{{ with .Inner }}
				alt="{{ . }}"
			{{ end }}
			>
		{{ if .Get "link"}}</a>{{ end }}
		{{ with .Inner }}
			<figcaption>{{ . }}</figcaption>
		{{ end }}
	</figure>
{{ end }}
3

Thanks pkollitsch so just to be sure (since the last few hours have driven me insane) where would your images be? and the shortcode param name is the images src name with file extension like image.jpg or with file location?

Pretty sure {{ $original := .Page.Resources.GetMatch (printf "%s*" (.Get "name") ) }} returned nil pointer for me last time so I’m thinking my images are in the wrong place.

4

That shortcode serves different ways. Some samples:

As static path within your site (for instance a file in the static directory):

{{< figure src="/wp-content/old-images/84.jpg" >}}

This will look for /static/wp-content/old-images/84.jpg.

Or: as a page bundle:

/content/posts/some-title/index.md

---
resources:
- src: "strassenkoeter.jpg"
  name: "strassenkoeter"
  title: "Straßenköter (Symbolphoto, Pokki, ca. 2007)"
---

{{< figure name="strassenkoeter" command="Resize" options="930x" >}}Straßenköter (Symbolphoto, Pokki, ca. 2007) --- [Photo von Patrick Kollitsch](https://samui-samui.de/){{< /figure >}}

and the image is alongside index.md.

5

@Ben_0 I have a couple of starter site repos with shortcodes for image processing. My understanding from the documentation is that Hugo image processing requires images to be in the same folders as the content “calling” them, so that’s how I have them set up in the starters. Maybe they will help you.

6

@bwintx we should come up with some canonical/best practice examples of doing these things … When I get some time … However, my lastest shot at something similar is this:

Note that for image resources that can be processed, the need to live either in a content bundle or inside /assets. But also note that you can mount any folder into /assets.

2 Likes
7

@bep Understood. As I note in the repos, what I did was shamelessly ripped off :smiley: from others who had a better grasp than I of page bundles, Hugo image processing, etc. But duly noted, sir.

2 Likes
8

bwintx Thanks for your time, I seem to get an error about SASS/SCSS resources not found in the file cache when trying to serve?

9

You need to install the extended version of Hugo.

1 Like
10

Check out my shortcode in one of the comments above. I somehow have it working on images in the static directory too.

I did compile that code from several blog posts quite a while back and used it without starting up my brain since … there might be something useful hidden inside.

11

Hmm. Interesting. According to docs as I understand them (which, I grant you, is a huge qualifier), that shouldn’t be possible. Assume you’re talking about a standard placement of the assets and static directories and their respective contents. (And, of course, note what @bep said above.)

1 Like
12

Check the following:

The old images directory

the resulting page

I rest my case :stuck_out_tongue:

I think the {{ if or ($image) (.Get "src") }} is the magic. Let me read the docs about .Get.

13

yeah, on a closer look it does not look like my shortcode is doing any processing to the file if it’s in static… * hanging my head *

1 Like
14

@davidsneighbour Well, if you’d been able to make that happen from static, I think it’s safe to say you’d have a lot of people wanting to know how. :smiley: Me among them.

1 Like
15

I should delete all my posts as long as Google didn’t index my shameful false statements :smiley:
I really need to start documenting my templates so I know whats going on some years after adding them.

1 Like
16

Having used a number of SSGs, I can tell you there’s a ton of people in all of them who struggle to grasp how each handles assets like these. (As for me, despite those sample repos I mentioned, on my real site I’ve taken the easy way out and gone with Cloudinary. :smiley: )

2 Likes
17

See:

If you do something ala:

  [[module.mounts]]
    source = "static/images"
    target = "assets/images"

You should be able to do:

{{ $img := resources.Get "images/logo.png" }}
4 Likes
18

@bep Yes, this is where my sad ignorance of Hugo Modules becomes all too clear. :frowning: But it encourages me to do something about that ignorance. thanks!

3 Likes
19

Thanks, heaps bep this is perfect!

This is what works for me for anyone else who has this issue in the future:

config.toml

[[module.mounts]]
source = "static/images"
target = "assets/images"

images dir:
static/images

shortcode:

{{< image src="/images/forest.jpg" alt="image desc" >}}

image.html

<!-- Get src param from shortcode -->
{{ $src := $.Get "src"}}

<!-- Get alt param from shortcode -->
{{ $alt := $.Get "alt"}}

<!-- Get image -->
{{$img := resources.Get $src}}

<!-- Resize image as a test it's working -->
{{- $desktop := $img.Resize "700x"}}
{{- $mobile := $img.Resize "400x"}}

<picture>
    <source media="(max-width:401px)" srcset="{{ $mobile.Permalink }}">
    <img src="{{ $desktop.Permalink }}" alt="{{ $alt }}" style="width:auto;">
</picture>

Thanks to everyone that helped out!

5 Likes
20

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