Processing Images with Hugo (featuring flipping a bird 🐤)
Updated  2022-December-24 🎄️

Page contents

 

News

2022-November-28  Published this evolving⁠[1] article.

 

Prerequisites

This article assumes you know how to use Hugo bundles and Hugo inline shortcodes.

 

About image processing in Hugo

To learn about processing images in Hugo, see gohugo.io/content-management/image-processing/.

 

Example: Flipping the Twitter bird

1. Get the bird

On about.twitter.com/en/who-we-are/brand-toolkit, you can download a .zip package that contains various flavors of the Twitter bird. After unzipping⁠[2] this, one of the package’s files is named this:

2021 Twitter logo - blue.png

 

And looks like this:

Twitter bird

 

2. Put the bird in a Hugo leaf bundle

To process an image in Hugo, it can be either a page resource or site resource.⁠[3] In this example, I put it in a leaf bundle, which makes it a page resource. Here is the directory structure of the source of this page:

ROOT
└── content
    └── hugo-image-processing
        ├── index.adoc
        └── twitter_bird1034x851.png

 

I changed the bird file name from 2021 Twitter logo - blue.png to twitter_bird1034x851.png because…

  1. spaces in file names are a pain and

  2. I like to append Width in pixelsxHeight in pixels to a PNG’s file name.

 

3. Create an inline shortcode to flip the bird

In index.adoc I put the following inline shortcode.

{{< flip.inline >}}

{{ $file := .Page.Resources.Get "twitter_bird1034x851.png" }}

{{ $flippedfile := $file.Resize "1034x r180" }}

<img
  src="{{ $flippedfile.RelPermalink }}"
  alt="flipped Twitter bird"
>

{{< /flip.inline >}}

 

ℹ

 

4. View the rendered flipped bird

In Hugo’s built-in web server, which is usually http://localhost:1313, the above inline shortcode is rendered as this:

flipped Twitter bird

 

 

5. View the directory that contains the generated image

Hugo caches this flipped-⁠bird image file in ROOT/resources/_gen/images/. For example, here is an excerpt of the directory structure of Infinite Ink’s Hugo website project:

ROOT
├── content
│   └── hugo-image-processing
│       ├── index.adoc
│       └── twitter_bird1034x851.png
└── resources
    └── _gen
        └── images
            └── hugo-image-processing
                └── twitter_bird1034x851_hu675b3805fc6ee594df7211ad0a4a4656_19683_1034x0_resize_r180_box_3.png

 

To learn about caching in Hugo, see…

 

See also

For more about Hugo, see Infinite Ink’s…

 

Endnotes

1. Many Infinite Ink articles, including this one, are evergreen and regularly updated.
2. On most GUI systems, double clicking a file with a .gz or .zip extension will launch an unzip app. For example, some Linux distributions launch the ark archiving tool.
3. A Hugo site resource is also known as a global resource.
4. Counterclockwise is also known as anticlockwise. For more about this see wikipedia.org/wiki/Clockwise and merriam-webster.com/thesaurus/counterclockwise.

Discuss or share 📝 🤔 🐘