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

## 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:

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

{{< /flip.inline >}}

 ℹ In line 5 above, the bolded r180 means rotate counterclockwise⁠[4] by 180°. Details are at gohugo.io/content-management/image-processing/#rotation.This inline shortcode will work in an index.extension source file that’s written in any of the markup languages Hugo supports, including index.adoc, index.md, index.org, and index.pandoc.

### 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:

### 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
└── resources
└── _gen
└── images
└── hugo-image-processing
└── twitter_bird1034x851_hu675b3805fc6ee594df7211ad0a4a4656_19683_1034x0_resize_r180_box_3.png

To learn about caching in Hugo, see…

## 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.
• On Mastodon, I’m @nm@mathstodon.xyz and I’ll see your toot if you mention @nm@mathstodon.xyz or #InfiniteInk in it.