macOS Monterey was released yesterday and it brought Shortcuts (formerly Workflow) from iOS to macOS for the first time. Shortcuts is a powerful yet simple to use automation framework, and along with the Day 1 release of Monterey my image editor of choice Pixelmator Pro introduced 28 new Shortcut actions. Time to have some fun!

Since introducing the photo lightbox component of this website a few weeks ago, I have explored ways to layout the photos inline to a post without a disjointed layout. This is what I mean by disjointed.

Considering Some Options

Hugo (my chosen static site generator) has functionality for image processing, but it slows down the generating of the site and ends up creating new versions of the images that I put in each post-bundle. These images are stored away from the post content. Admittedly a small pain point but one that bothers me enough to continue searching for better solutions.

Having Hugo process images also increases site generation time, which means I’m burning more of my free Github Actions minutes each time I re-deploy this website with a new post or modification. Ideally, I would process the images ahead of time so that they are simply static assets that Hugo places into my posts.

My solution until this point was an “Export for Web” preset in Pixelmator Pro. This allowed me to define a couple of output formats for each image: a small, low-res version for the photo grid shown inline in the post; and a fuller-res version to show in the lightbox modal when an image was clicked. Prior to last night, I was manually opening each photo, clicking a few keyboard shortcuts to generate the exported versions, and plopping them into my post-bundle in Hugo.

With Monterey I wanted to give Shortcuts a try in automating this manual process. However, as of 7pm ET last night, Pixelmator Pro was not updated in the Mac App Store! And here I was with a head full of steam.

Using that energy I instead dove into AppleScript for which Pixelmator Pro has really great support. Within an hour I had cranked out a script which would take an array of images as input, process them via Pixelmator’s “Export for Web” action, and save them into a folder. This worked! But it was not a Shortcuts solution.

Pixelmator’s Update

By this morning Pixelmator Pro’s update was live on the Mac App Store and I was exploring all 28 of those new Shortcut actions. It took only 10 minutes to create a Shortcut which did the same thing as my AppleScript from the night before. The steps I implemented were:

  • Take an array of input images
  • Crop each image to a square aspect ratio (using Pixelmator’s excellent ML Crop feature)
  • Export the image down to a smaller size and quality level
  • Save images into a folder
  • Pop a notification telling me it’s done

Here is what that looks like, and an iCloud link for the Shortcut itself.

The ML Crop feature tells Pixelmator “guess what is interesting in this image and crop around that”. Since I’m cropping wider aspect ratio’s (4:3 or 16:9) down to a sqaure, this feature ensures the thumbnail images are interesting to look at in the grid. Clicking an image and expanding it to full size shows the original aspect ratio.

The side-by-side comparison of the image grids explains why this is worth doing. The grid is much more uniform and pleasing to look at.

Comparing AppleScript and Shortcuts

In this use case, I find Shortcuts the better solution. The approach is simply more modern. For now, Pixelmator exposes more of the functionality I want via Shortcuts than via AppleScript; there is no ML Crop function in their AppleScript dictionary. If Shortcuts proves as popular on macOS as it has on iOS, is the Pixelmator team going to dedicate the time adding more AppleScript functionality and not Shortcut functionality? Can both be done easily in parallel?

Performance-wise, my AppleScript solution seems faster. Although I’m not doing ML Crop in there, so perhaps the performance penalty comes from that. I hope AppleScript sticks around and continues to support more advanced use cases. The AppleScript is below for reference.

Update 2 November 2021: it appears AppleScript may have just gotten blazingly fast in macOS Monterey.

on run {input, parameters}
	set outputFolder to choose folder with prompt "Destination?"
	
	tell application "Pixelmator Pro"
		activate
		set imageEdits to open input
		repeat with i in imageEdits
			set smallFileName to ((name of i) & "@0.5x.jpg")
			export for web i to file ((outputFolder as string) & smallFileName) as JPEG with properties {compression factor:75, scale:50}
			
			set medFileName to ((name of i) & ".jpg")
			export for web i to file ((outputFolder as string) & medFileName) as JPEG with properties {compression factor:75}
		end repeat
	end tell
	
	tell application "Finder" to open outputFolder
	
	return input
end run

Next, I’m planning to back-port this image workflow to a at least one recent post. I think the square aspect ratio in the photo grid just looks so much better.