CODEWITHSUNDEEP
hugo
Joshua Rosenberg
Joshua Rosenberg

Reputation: 4226

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

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?

Upvotes: 8

Views: 18495

Answers (6)

foudfou
foudfou

Reputation: 1066

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

Upvotes: 2

Mr. Hugo
Mr. Hugo

Reputation: 12590

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.

Upvotes: 0

Mr. Hugo
Mr. Hugo

Reputation: 12590

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

Upvotes: 3

Eddie
Eddie

Reputation: 10148

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

Upvotes: 2

Jesper T
Jesper T

Reputation: 31

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

Upvotes: 3

talves
talves

Reputation: 14353

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

Upvotes: 1

Related Questions