Mocktail: A Shortcut for Creating iOS Device Mockups

I last updated my shortcut for creating device-framed screenshots in December 2017 by adding support for iPhone X. I’ve been meaning to add more device frames for a while now but, since becoming a father six months ago, free time has been a precious commodity.

In the meantime, Federico Viticci released his impressive Apple Frames shortcut which does a fantastic job at framing screenshots for different devices. I still wanted to update my shortcut though it now seemed redundant to simply add more frames. Instead, I decided to start from scratch and approach the concept of screenshot framing differently.

My original shortcut, like Federico’s, makes use of Apple’s marketing product images—high-resolution images of devices for use in marketing or promotional material—that are ideal for screenshot framing. However, there’s no variety in what’s available, only flat images of devices and usually in Space Gray.

Apple's product images for marketing aren't particularly exciting.
Apple’s product images for marketing aren’t particularly exciting.

Instead of framing screenshots using just these images, I wanted to create mockups using different product images that are more distinctive and, in some cases, three-dimensional. The result is Mocktail, a shortcut that creates framed iOS screenshots using various device images I’ve sourced from Apple’s website (e.g., product landing pages or the online store). Where necessary, Mocktail applies perspective distortion to screenshots using Cloudinary, an online image manipulation API.

A three-dimensional mockup created using Mocktail.
A three-dimensional mockup created using Mocktail.
Mocktail still performs traditional screenshot framing but includes some additional images to add variety.
Mocktail still performs traditional screenshot framing but includes some additional images to add variety.

Supported devices

Mocktail creates mockups for the following devices:

  • iPad Pro 2018 (11″ and 12.9″)
  • iPad Pro/Air 10.5″
  • iPad (including iPad mini1)
  • iPhone XS and XS Max
  • iPhone 8 and 8 Plus
  • Apple Watch Series 4 (40mm and 44mm)
  • Apple Watch Series 3 (38mm and 42mm)

Notably absent is the iPhone XR. There aren’t yet any usable images of the device to create mockups with (the only ones I could find aren’t a high enough resolution) nor has Apple created a product marketing image for it. I hope to support the iPhone XR sometime in the future.

Using the shortcut

Mocktail can be run as a normal shortcut, accepts images from the share sheet2, or using drag-and-drop, and performs the following steps:

  1. Checks if any images were shared to the shortcut via the share sheet (or using drag-and-drop). If not, the shortcut displays a list of recent screenshots for you to select from. Multiple images can be shared to create a batch of mockups all at once.
  2. Checks that the required base images are available in iCloud Drive. If not (i.e., the shortcut is run for the first time), they are automatically downloaded and saved3. The shortcut then continues.
  3. Calculates the pixel count of the screenshot by multiplying its width and height. This is used to determine what device the screenshot was taken on.
  4. Determines the orientation of the screenshot (either landscape or portrait).
  5. Using the device information and orientation, the shortcut displays a list of suitable base images for you to select from.
  6. Applies rounded corners if the device requires it (e.g., iPad Pro or iPhone XS). For iPhone XS and XS Max, a notch is also added to the screenshot.
  7. For flat base images, the screenshot is overlaid onto the base image. For three-dimensional base images, Mocktail uses Cloudinary to apply perspective distortion to the screenshot, then overlays it onto the base image.
  8. Certain base images have a significant amount of white space. Where necessary, the shortcut crops the completed mockup.
  9. The completed mockup is saved to iCloud Drive. Each mockup is saved in a folder corresponding to the name of the device, such as /Shortcuts/Mocktail/iPhone XS Max.

Distorting images with Cloudinary

Mocktail uses Cloudinary’s upload and image manipulation APIs to apply perspective distortion to screenshots. You need to create a free Cloudinary account to use Mocktail. The free pricing tier is more than sufficient as you would need to run this shortcut several thousand times a month before you would exceed the free plan.

When you first launch the shortcut, it asks you to provide the following information about your Cloudinary account which can be found in the Dashboard:

  • Username (your Cloudinary “cloud name”, not email address)
  • API key
  • Upload preset
You can find your Cloudinary username (cloud name) and API key in the Cloudinary console.

By default, Cloudinary requires uploads to be signed with the account’s secret key. Mocktail doesn’t do this so you need to enable unsigned uploads and specify the upload preset in the shortcut. This randomly generated value is used to upload images without needing to sign them4.

The upload preset can be found in your Cloudinary account's dashboard.
The upload preset can be found in your Cloudinary account’s dashboard.

Once you have provided your Cloudinary details, you can begin using Mocktail to generate mockups.

Mocktail is one of the most complex shortcuts I’ve created and it makes extensive use of dictionaries to store information. To figure out how screenshots should be distorted, I used Affinity Photo to draw lines along the sides of the display. I then added horizontal and vertical guides at the location where these lines intersected, providing me with the necessary X,Y coordinates required by Cloudinary.

Every image that would require a screenshot to be distorted was run through Affinity Pro to get the coordinates.
Every image that would require a screenshot to be distorted was run through Affinity Pro to get the coordinates.

Mocktail is available from my GitHub repository of shortcuts. I prefer not to use iCloud links when sharing shortcuts because of they’re one-time use limitation. Rather than generate a new link every time I update the shortcut, I can push an update to GitHub and the existing link still works (there’s also the usual benefits of using a version control system).

  1. Both iPad and iPad mini are the same resolution so iPad mini screenshots are handled as iPad screenshots—there are no iPad mini-specific base images. 
  2. At the time of writing, the current version of Shortcuts—2.1.3—has a bug that can prevent image-based action extension shortcuts from working. If Mocktail doesn’t work from the share sheet, run it from within the app. iPad users can also drag-and-drop images into the shortcut. 
  3. Federico cleverly uses Base64 encoding to store all images as text within his shortcut. I decided against a similar method because it seemed to severely impact the performance of Shortcuts. Instead, the base images are made available as a ZIP file in my repository that the shortcut downloads and extracts. 
  4. Signing uploads would have been a more significant undertaking. I don’t think it’s necessary considering the use case. 


  • 1 month ago Fixed Fix an issue with iPhone 8 Plus screenshots.
  • 1 week ago Fixed Add "Continue Shortcut in App" action as a workaround for limitations when running from the share sheet as an action extension.

Infant Formula Preparation with Shortcuts

Our two-month-old daughter is formula fed. My wife and I prepare a batch of bottles every day using this formula mixing pitcher so they’re readily available at feeding time. Some arithmetic is needed to work out how much formula powder to add to a certain volume of water, and the amount of formula we need to prepare steadily increases as she grows. To give our sleep-deprived brains a break and avoid any miscalculations, I created some shortcuts to help out and do the math for us.

Formula Calculator works out how much formula we should prepare for the day, based on our daughter’s current weight (in pounds and ounces). The general rule of thumb for babies up to six months old is to offer 2.5 ounces of formula per pound of body weight in a 24 hour period. Her weight is entered when running the shortcut, along with how many feeding sessions to expect that day 1. The amount of formula to prepare, along with how much to fill each bottle with, is then displayed.

The Formula Calculator shortcut calculates how much formula we should prepare for the day.
The Formula Calculator shortcut calculates how much formula we should prepare for the day.

This next shortcut, Formula Prep, is the one I use the most. It calculates how much formula powder to add to a specified amount of water. Most formula powder in the US specifies one scoop (8.7g) of powder for every 2 fluid ounces of water. I specify how much water is in the pitcher and it calculates the amount formula powder to add—both in grams and scoops. I prefer to measure by weight as it’s all too easy to lose count of the scoops being added.

The Formula Prep shortcut takes a specified amount of water and works out how much formula powder I need to use.
The Formula Prep shortcut takes a specified amount of water and works out how much formula powder I need to use.

Prepared formula can be stored in the refrigerator for up to 24 hours. After that, it must be discarded. Formula Reminder is a shortcut I run once I’ve prepared formula that creates a reminder with an alarm set 24 hours later.

This shortcut creates a reminder so I don't forget to dispose of any leftover formula after 24 hours.
This shortcut creates a reminder so I don't forget to dispose of any leftover formula after 24 hours.
  1. The number of feeding sessions can vary from day to day. We’ve been tracking our daughter’s feeds since birth and she’s currently averaging about six sessions per day.

A Workflow for Microblogging

The recent changes I made to my blog to add microblogging support included setting up a Micropub to GitHub web service. This allows me to use the app (or any other Micropub-compatible app) to compose and publish new microposts. However, the web service doesn’t currently support a Micropub media endpoint, so I can’t attach photos to new microposts using the app.

Once again, Workflow to the rescue! I’ve created this workflow for publishing microposts on my Jekyll-powered blog that can also include photos. Instead of relying on the Micropub to GitHub service, it uses GitHub’s API to directly upload and commit the micropost–and attached photos–to my blog’s repository. This automatically triggers a site deploy on Netlify, making the new micropost and photos available a few moments later.

When run, the workflow does the following:

  1. Prompts me to write a new micropost.
  2. If the workflow was not run as an action extension, it asks if I want to add any photos (the workflow checks if any photos were shared when run). I can then select photos from my library.
  3. Resizes all photos to 1000px wide. Photos that are already smaller than 1000px are not resized. I don’t want to share full-size photos, so reducing the size suits my needs.
  4. Asks me to confirm or change the file name for each photo.
  5. Uploads the photos to my GitHub repository and commits the changes, triggering a deploy with Netlify.
  6. Creates the micropost text file with the composed text and current date. If photos have been included, Markdown-formatted photo links are added at the end of the text file. This text file is uploaded and to GitHub and committed. Netlify then does another deploy, making the post available.

Although I created this workflow primarily as a way to publish photos, I can also use it to quickly publish text-only microposts. What’s more, I can even dictate new microposts and publish them straight from my Apple Watch.

If you wish to customize the workflow, change the following parameters in the Dictionary action at the top of the workflow:

  • token: A GitHub token that has read/write access to your repositories.
  • username: Your GitHub username.
  • repo: Your site’s Repository.
  • directory: The directory to save images to.
  • site_url: The URL to the website.
  • post_dir: The directory where micropost text files should be saved to.

The configuration options have been created based upon my implementation of microposts. Depending on how (and where) you publish microposts, you might need to make some additional changes to the workflow.

Getting Nespresso Capsule Information With Workflow

I recently added a Nespresso machine to my growing collection of coffee paraphernalia. It arrived with a selection of some of the 26 varieties available in the OriginalLine range—each one has a different strength (intensity) and cup size (ristretto, espresso, or lungo).

However, there’s no way to know this information just by looking at the capsule as it only has the name printed on it. To know more, one needs to either keep the packaging, refer to the website, or have this information memorized. There is a Nespresso iOS app available, but it’s not easy to quickly find a capsule and get its strength and cup size.

This seemed like a good opportunity to explore Workflow’s Dictionary functionality, a feature I hadn’t really used before. I created this Nespresso Capsule Information workflow to look up the intensity and cup size for any Nespresso capsule. To make it a little more interesting, capsule information can be retrieved by selecting either its name or an image of it.

Nespresso Information Workflow

All of the capsule data is stored within a Dictionary action inside the workflow. I created a Base64-encoded archive of all capsule images and included it as a Text action in the workflow (that’s what the nonsensical first action is). This is decoded and extracted when running the workflow, so no images need to be separately copied or installed anywhere—allowing the the workflow to be entirely self-contained.

Get the Latest Cryptocurrency Prices With Workflow

For those wanting to keep track of popular cryptocurrency prices, this workflow retrieves a list of the top 10 cryptocurrencies on CoinMarketCap using their API. Selecting a currency returns the current price in USD, along with the percentage change from 24 hours ago.

The workflow can be run as normal, from the Today Widget, or directly on Apple Watch.

Device Screenshots Workflow Updated for iPhone X

I’ve updated my Device Screenshots workflow with support for iPhone X (direct link to workflow). As with other devices, it automatically detects the orientation of the screenshot and generates either a portrait and landscape image.

iPhone X device screenshot

For landscape screenshots, the notch is located on the right.

iPhone X device screenshot in landscape

I’ve also added a Set Name action to the workflow so a name can be given to the finished device image before saving it.

Device-Framed Screenshots in Workflow Redux

Update (2017-12-04): This workflow has been updated to include support for iPhone X. The following post has been updated to reflect this.

It’s been almost two years since I made a workflow to create device-framed screenshots. Since then, Workflow added an Overlay Image action that allows users to place one image on top of another, making the need to slice up device images redundant. I figured that those wanting to create device-framed screenshots would eventually use this as a replacement for my workflow.

Nonetheless, the original workflow proved to be quite popular and I still get asked about it from time to time. Just last week, I helped someone on Twitter who was having trouble using the old workflow. I’ve now created a replacement action extension workflow that uses Overlay Image to generate device-framed screenshots for iPhone, iPhone X, iPad, iPhone SE, and Apple Watch.

Device-framed screenshot for Apple Watch

iPhone X device screenshot

Unlike the old one, this workflow doesn’t need you to download image assets manually. The workflow operates as an action extension for images, but if you run it from within Workflow it will automatically download the image assets and save them to iCloud Drive for you.

Run the workflow from within the app to install the device images it needs

The workflow also automatically detects orientation and provides either portrait or landscape device-framed screenshots (excluding Apple Watch).

Device-framed screenshot for iPad

To correctly place the screenshot within the device, the following measurements were taken for each device image1:

  • Height and width of the screen area
  • X and Y distance of the top-left corner of the screen area from the edge of the image (where the image is to be positioned)

When the workflow is run and a device chosen, Workflow resizes the screenshot to the dimensions of the screen area. It then overlays it onto the device image at the appropriate coordinates so as to completely cover the screen area.

This workflow becomes especially useful when coupled with the new screenshot process in iOS 11. Instead of just saving a screenshot to the Camera Roll, iOS now provides an option for annotating and sharing a screenshot before deciding whether to save it. This means you can create a screenshot, annotate it (if needed), then share it and use the workflow to create a device image—all as part of one process. You can then discard the original screenshot without needing to save it.

Annotating screenshots in iOS 11

For use on the web, I highly recommend using my Optimize Image workflow to reduce the file size of the resulting PNG image. You can add a Run Workflow action at the very end of this workflow to pass the image directly into Optimize Image workflow, providing a single process for generating and optimizing device-framed screenshots.

Run workflow

This workflow only includes one device color, so consider it a starting point for further customization. You can easily add more devices or colors by customizing the workflow and using the same process for all other devices.

  1. I used the Crop tool in Pixelmator to get these dimensions. I’m almost certain there’s a better way of doing this, but it worked fine for what I needed. 

Reverse Image Search With TinEye and Workflow

Social media is a wretched hive of misinformation at times and it happens because we take a lot of what we see at face value. This is exploited by those who would make false or greatly exaggerated claims, such as people who want to be internet famous or who are trying to push their political or prejudiced opinions onto others. A popular tactic for this is to make an unsubstantiated claim (or lie) and find an existing photo somewhere online (e.g., Getty Images) that fits their false narrative.

TinEye is a reverse image search engine and a superb resource for separating fact from fiction. You provide it with an image (either upload one or via URL) and TinEye can find web pages that also use it, even if it has been modified. For iOS users, I’ve created two workflows that makes it easy to search for an image using TinEye. Both workflows require the use of a Dropbox account.

TinEye Photo is an action extension that accepts an image and temporarily stores it in your Dropbox folder. A public URL for the image is created and used as a TinEye search. Once you’ve seen the results, the workflow deletes the file from Dropbox.

The second workflow is TinEye URL, an action extension that accepts URLs. It gets the content of the URL, finds all images over 300px wide, and presents them all in a list for selection. The rest of the workflow is then the same as TinEye Photo.

Deleting Completed iCloud Reminders

Over at Six Colors, Dan Moren has some valid criticism about the lack of removing completed tasks from Reminders on the Mac and iOS, a feature that is available at

Last week on Clockwise, we discussed how we use Apple’s Reminders app, and I lamented that there was no option to have old, checked-off reminders automatically discarded. If I look at my Shopping List, for example, there are more than 1100 completed reminders that I really don’t need to keep around. But there’s no easy way to get rid of them, except to go through and delete them one-by-one. Which I’m not going to do.

Listener Stephen pointed out, however, that there is an option to remove all your old completed reminders—it’s just not in an obvious place, because it’s not available in the macOS or iOS Reminders app.

That’s right, it’s on iCloud.

Inconsistency between iCloud and its Mac and iOS apps isn’t anything new, but it’s surprising that such a feature still doesn’t currently exist.

On the Mac front, Dr. Drang has offered up an AppleScript solution to accomplish this. Using Keyboard Maestro, it can also be scheduled to run automatically.

For those of us who mostly use iOS, removing completed reminders is easily done with Workflow. You can create a simple workflow that contains just two actions: Find Reminders Where and Remove Reminders.

The first action should be customized so it is only looking for completed reminders. You can also add another filter to restrict the results by different attributes, or even by list. The second action deletes all the reminders that meet the previous action’s criteria. Before doing so, it displays a warning that contains the total number of reminders it’s going to remove.

Unlike Dr. Drang’s Mac solution, there isn’t a way of scheduling scripts or workflows to automatically run in iOS. A workaround is to use the Share Sheet of the workflow to add it to Reminders, editing the details to make it a recurring task. This creates a reminder with a link directly to the workflow that you can tap. Whenever the reminder is due, you can tap the link icon to open Workflow directly on the workflow, ready to be run.


Optimizing Images With TinyPNG and Workflow

Whenever I include images or screenshots within the body of a blog post, I resize them so they aren’t unnecessarily large. iPad Pro screenshots, for instance, are 2732x2048px and often larger than 1MB. There’s no need to share these images full-size, so I reduce their dimensions to something like 1024x960px. This usually gets the file size down to around 200KB.

Back when I used a Mac to write blog posts, I would have also taken the step of optimizing the images using ImageOptim. This app uses clever compression techniques to reduce the file size while preserving quality. It was a simple drag-and-drop process that could drastically reduce the file size further. I haven’t yet found an equivalent iOS app that does something similar, so image optimization isn’t something I’ve been doing.

However, there are web services that perform image optimization. One such service, TinyPNG, has an API that can receive images and return a URL to an optimized version. Using Workflow’s recent API support, I’ve created this workflow that both resizes and optimizes JPG or PNG images using the TinyPNG API. When the action extension workflow is run, there’s an option to resize the image (using Workflow’s built-in image resize action), after which it’s uploaded to TinyPNG for optimization. An alert displays the difference in file size before the optimized image is downloaded. TinyPNG uses randomly-generated filenames, so you’re asked by the workflow to specify a new one.

The following PNG screenshot, resized to 1024x960px, was originally 202KB. After optimization, it’s just 57KB.

TinyPNG is free to use if you’re optimizing up to 500 images per month, which is plenty for most bloggers. As with most API services, you need an API key to use TinyPNG (the workflow has an import question that prompts for this).

Before you start optimizing images, keep in mind that TinyPNG is a web service and you’re uploading images to a third-party. It’s entirely up to you about what images you feel comfortable optimizing. I’m happy to use this for any public images and screenshots I’d share on my blog anyway, though I wouldn’t use it to optimize images that contain sensitive information (scans of passports, screenshots of bank account details, etc.).