6

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?

2
  • I have answered your question to some extent here: stackoverflow.com/a/48215030/2597114 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.
    – talves
    Jan 11, 2018 at 23:10
  • I answered how to create a shortcode to do what you are asking.
    – talves
    Jan 11, 2018 at 23:49

4 Answers 4

Reset to default

Trending sort

Trending sort is based off of the default sorting method — by highest score — but it boosts votes that have happened recently, helping to surface more up-to-date answers.

It falls back to sorting by highest score if no posts are trending.

3

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) "*") }}
    
1
  • You can also define a resouces directory.
    – Mr. Hugo
    Aug 6, 2021 at 22:48
3

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 }}">
0
1

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

6
  • 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.
    – talves
    Jan 12, 2018 at 0:17
  • 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" >}} Jan 12, 2018 at 14:12
  • 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.
    – talves
    Jan 12, 2018 at 18:18
  • 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 Jan 12, 2018 at 19:55
  • 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
    – talves
    Jan 12, 2018 at 20:04
1

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.