After posting the previous article I noticed that all of the images other than the header image in the post were rotated 90 degrees to the left.

This was a bit strange as all my other posts with images had published correctly and the images also appeared to be the correct orientation when I viewed them in file explorer or any other image viewer.

I was puzzled. However, seeing as it was only the post images and not the header image I soon deduced it was the the img shortcode I am using that had caused the problem. I had taken the shortcode from a post a post by Laura Kalbag that introduced Hugo’s image processing to me and it worked brilliantly.

The issue seems to be to do with EXIF data being removed as part of the processing and then that can mess up the orientation. I am still not sure why this only happened on these images as I retrospectively updated all my previous posts to use the new shortcode which means all the images taken with the same camera should have had the same problem?

Below is an image that has been processed by Hugo and so has the rotation issue:

Anyway, the fix I found the fix I found was to use the tool mogrify from the imageMagick package.

Firstly, you will need to install imageMagick if you haven’t already, I am on WSL:

sudo apt install imagemagick-6.q16

By using mogrify it allows us to modify a lot of info about the images, but I just need to use the -auto-orient switch.

What the switch does is actually orient the photo depending on what the metadata for the image says. Normally when the image is taken it is written to storage and the orientation is written to the metadata. This means it is possible for it to get messed up depending on what you use to read the image with, or in my case, when Hugo processes the image and the orientation info is lost.

By using this switch and actually writing the image to disk in the correct orientation, it doesn’t matter if the metadata is removed the image will be in the correct orientation I need.

To modify a single image:

mogrify -auto-orient image.jpg

Using a wildcard can perform the action on all images in a directory:

mogrify -auto-orient *.jpg

Below is the same image as before but after being auto orientated before Hugo processes the image:

If all the images you need to process are in a single directory then this is easy. However, I store my posts in page bundles so have images stored in directories for each post.

To handle this case I took inspiration from a post I found that resizes and does some other stuff to the images of a site in one go.

My stripped-down version:

find content/posts \( -name '*.jpg' \) -print0 | xargs -0 -P8 -n2 mogrify -auto-orient

What this does is look for all files ending with .jpg in the content/posts folder then pipes all the filenames to mogrify to do the auto orientation while using 8 parallel processes.

I only have to do this once for the whole site and then commit the updated images to git. I can then just modify any new images for posts as I add them.

There is a way to handle this in the image processing shortcode, as you can rotate images there. The problem is I don’t necessarily want to rotate every image to the left 90 degrees, especially as some have been processed already to be the correct orientation, and I may use a different camera in future that will write the files differently so won’t need to be rotated.