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?

Gwenngwenneth

I have answered your question to some extent here: https://mcmap.net/q/1298951/-image-processing-outside-bundles Make sure to update to at least version 0.32.3 of hugo. You have to have resources under content at this time to be able to access these resources. – Baxter

I answered how to create a shortcode to do what you are asking. – Baxter

Answer 1

You can not use it like this (in markdown). Resizing only works on resources. A resource is a file in the resource directory or a file in a page bundle. To access resources in markdown you will have to use a shortcode.

Note that you can define the static dir as the resources directory. Once you do that, you can just use the static directory and write something like:

(.Site.Resources.GetMatch "_media/images/pdf.png").Resize "50x50"

However, you should access this through a shortcode, like Talves did. I simplified his code a little for extra readability:

{{< imgresize "_media/images/pdf.png" >}}

Calling this shortcode (layouts/shortcodes/imgresize.html):

{{ $image := (.Site.Resources.GetMatch (.Get 0)).Resize "50x50" }}
<img src="{{ $image.RelPermalink }}">

Hemihydrate

Answer 2

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) "*") }}
   

Incipient

You can also define a resouces directory. – Hemihydrate

Answer 3

If you're using Page Bundles you can reference any file in the page's folder, whether or not it is declared in front matter:

.
|- This is the Page (a folder)
   |- index.md
   |- photo1.jpg
   \- photo2.jpg

INside index.md

{{< imgresize photo1.jpg "350x350" "Alternate Text" >}}

The shortcode (same as @Talves but uses GetMatch and Fit, and includes alternate text for image.)

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

Netti

Answer 4

As of 2022, if all you need is displaying the image in a different size, maybe Hugo’s Built-in "figure" Shortcode would do?

{{< figure src="/media/spf13.jpg" title="Steve Francia" >}}

Jodyjoe

Answer 5

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

Baxter

I expanded this answer to include a resource from within a section outside the page context, in the case you want to store images in a different location. – Baxter

Sorry for what I'm sure is a novice question, but if the file I'm looking to resize is at content/_media/logos/pdf.png, then I would need to change "media" in the (second) shortcode section to "_media" and would call the shortcode with: {{< imgresize logos/pdf.png "50x50" >}} – Gwenngwenneth

Unfortunately, that would not work. Hugo is accessing the resources based on the page, so the shorcode is using .Resources.GetByPrefix of images in the pages resources. Not sure it includes the subdirectory pages resources. – Baxter

Thanks, I tried these steps and still had a bit of difficulty. The source for the site is here: https://github.com/jrosen48/homepage-source I've added the shortcode in the folder you specified and tried to add an image to the teaching.md file – Gwenngwenneth

You need to move the images into a folder (section) under content like in this example github.com/talves/hugo-resource-images/tree/master/content – Baxter

Added the new example for accessing a pages resources under a sub directory. – Baxter

Answer 6

UPDATE! There is a new and better way: render hooks!

Create a render hook

For images in the markdown, you can use a ‘render hook’. This is a file that describes/overrides how markdown images are handled. To use the above approach in the render hook you should create the following file:

/layouts/_default/_markup/render-image.html

… and put this logic inside:

{{ if (resources.GetMatch .Destination) }}
  <img src="
  {{ ((resources.GetMatch .Destination).Fit `600x600 jpg Smart q50`).RelPermalink | safeURL }}
  " alt="{{ .Text }}" />
{{ end }}

Note that we use ‘.Destination’ for the source of the original image and ‘.Text’ for the alt text defined in the markdown. Once you added the render hook all images in your Hugo project can and will be resized.

More info can be found at Hugo Codex and in the official docs.

Hemihydrate

I'm seeing an error can’t evaluate field GetByPrefix in type resource.Resources on running your repo: github.com/talves/hugo-resource-images/tree/master Can you include this render hook example ? – Recursion

The render hook can be found in this answer The repo from talves does not include the/a render hook. – Hemihydrate