How to use Hugo's image processing / Page Resources?

[panr]

How to use Hugo's image processing / Page Resources?

[panr]

Hej @vinamelody, just added support for this. In your .md file just use imgproc shortcode, like this:

{{< imgproc [name_of_image] [options] />}} -> {{< imgproc hello "Fit 500x200" />}}

or with caption:

{{< imgproc hello "Fit 500x200" >}}
Hello friend
{{< />}}

For more info, please look at image processing docs (the same docs you mentioned above)

[vinamelody]

Thank you :)

[vinamelody]

Hi, when I tried using it for example

• {{< imgproc xinhua-fried-beehoon-dish.jpg "Fit 500" >}}, the error: unrecognized character in shortcode action: U+002E '.'. Note: Parameters with non-alphanumeric args must be quoted
• {{< imgproc "xinhua-fried-beehoon-dish.jpg" "Fit 500" >}}, the error: Invalid image processing command: Must be one of Fit, Fill or Resize.

By the way, I read an article https://laurakalbag.com/processing-responsive-images-with-hugo/ and tried adding a custom shortcode from the article and it works!

{{/* get file that matches the filename as specified as src="" in shortcode */}}
{{ $src := .Page.Resources.GetMatch (printf "*%s*" (.Get "src")) }}

{{/* set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}


{{ $tinyw := default "500x q80" }}
{{ $smallw := default "800x q80" }}
{{ $mediumw := default "1200x q80" }}
{{ $largew := default "1500x q80" }}

{{/* resize the src image to the given sizes */}}

{{ .Scratch.Set "tiny" ($src.Resize $tinyw) }}
{{ .Scratch.Set "small" ($src.Resize $smallw) }}
{{ .Scratch.Set "medium" ($src.Resize $mediumw) }}
{{ .Scratch.Set "large" ($src.Resize $largew) }}

{{/* add the processed images to the scratch */}}

{{ $tiny := .Scratch.Get "tiny" }}
{{ $small := .Scratch.Get "small" }}
{{ $medium := .Scratch.Get "medium" }}
{{ $large := .Scratch.Get "large" }}

{{/* only use images smaller than or equal to the src (original) image size, as Hugo will upscale small images */}}
{{/* set the sizes attribute to (min-width: 35em) 1200px, 100vw unless overridden in shortcode */}}

<img 
  {{ with .Get "sizes" }}sizes='{{.}}'{{ else }}sizes="(min-width: 35em) 1200px, 100vw"{{ end }}
  srcset='
  {{ if ge $src.Width "500" }}
    {{ with $tiny.RelPermalink }}{{.}} 500w{{ end }}
  {{ end }}
  {{ if ge $src.Width "800" }}
    {{ with $small.RelPermalink }}, {{.}} 800w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1200" }}
    {{ with $medium.RelPermalink }}, {{.}} 1200w{{ end }}
  {{ end }}
  {{ if ge $src.Width "1500" }}
    {{ with $large.RelPermalink }}, {{.}} 1500w {{ end }}
  {{ end }}'
  {{ if .Get $medium }}
    src="{{ $medium.RelPermalink | safeURL }}" 
  {{ else }}
    src="{{ $src.RelPermalink | safeURL }}" 
  {{ end }}
  {{ with .Get "alt" }}alt="{{ . | plainify }}"{{ end }}
  {{ with .Get "style" }} style="{{ . | safeCSS }}"{{ end }}>

[vinamelody]

The downside of that, Hugo seems to produce multiple image files upon compilation

[panr]

@vinamelody please try to use filename without an extension. Error says that the issue is with . 🤔

[vinamelody]

hmm tried that, and tried wrapping it with double-quote too, it doesn't work.