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

Joshua Rosenberg picture Joshua Rosenberg · Jan 2, 2018 · Viewed 8.8k times · Source

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

JoostS picture JoostS · Jan 2, 2018

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.