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

Page contents



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



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


Example: Flipping the Twitter bird

1. Get the bird

On, 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:

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

  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:

├── 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


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 and

Discuss or share 📝 🤔 🐘