Resize image in Hugo (v 0.32.x) in markdown

Question

I am trying to resize an image in Hugo (not using HTML / CSS), which is apparently available in the v 0.32 update. Beneath the "Image Processing" heading at the link in the last sentence, the following "Resize" method is described:

Resize to the given dimension, {{ $logo.Resize "200x" }} will resize to 200 pixels wide and preserve the aspect ratio. Use {{ $logo.Resize "200x100" }} to control both height and width.

I'm having some trouble implementing this in my Hugo site. In particular, I am using a .md file, and am trying to add an image which is stored somewhere else in the site's source files.

For example, here's how I would add the (not-resized) image in the .md file:

![pdf image](../static/_media/images/pdf.png)

How could I add this same file, resized to 50x50 pixels, using the resize method in the v0.32 release?

Answer 1

Using my newer version of Hugo (v0.53) I had to adapt the answer by JoostS a bit:

1. Created a page bundle

2. Modified the shortcode to look like this at the start:

   
   {{ $original := .Page.Resources.GetMatch (print "images/" (.Get 0) "*") }}
   

Answer 2

I don't think you can use it like this (in markdown). In markdown you will have to use a shortcode, as the image has to be accessible in the Go templating language before you can attach the resize command.

Answer 3

You will need to make sure you have included your images within the content of your page usually at the level of the page itself unless you reference them using the answer I link in the note below.

NOTE: You can access resources from an outside section as in this answer

Write a shortcode

layouts/shortcodes/imgresize.html

{{ $original := .Page.Resources.GetByPrefix (.Get 0) }}
{{ $options := .Get 1 }}
{{ .Scratch.Set "image" ($original.Resize $options) }}
{{ $image := .Scratch.Get "image" }}
<img src="{{ $image.RelPermalink }}" width="{{ $image.Width }}" height="{{ $image.Height }}">

[Alternative] Shortcode accessing resource under content/media section

{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "section" "media" }}
  {{ $original := .Resources.GetByPrefix  $imagename }}
  {{ with ($original.Resize $options) }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }} 
{{ end }}

Call the shortcode from within the markdown of the page.

{{< imgresize pdf "50x50" >}}

pdf refers to the image by its name prefix to get the resource.

Using a sub folder page to access the resources

In the next example shortcode you must have a page at the same level as your images. Include an index.md at the same level (example: content/media/logos/index.md)

add layouts/shortcodes/logo-resize.html

{{ $imagename := (.Get 0) }}
{{ $options := .Get 1 }}
{{ with .Site.GetPage "page" "media/logos/index.md" }}
  {{ $original := .Resources.GetByPrefix  $imagename }}
  {{ with ($original.Resize $options) }}
  <img src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}">
  {{ end }} 
{{ end }}

Call the shortcode

{{< logo-resize pdf "50x50" >}}

GitHub Example