Categories
Shortcuts

Mocktail: A Shortcut for Creating iOS Device Mockups

Update 2020-05-04: Mocktail has been updated and is now available on my site—it is no longer hosted on GitHub.

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).

Mocktail is now available here.

  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. ↩
Categories
Posts

BBC’s History of Video Game Music

BBC 6 Music has a fascinating and nostalgic two-part series on the history of video game music. There’s also a bonus episode with Charlie Brooker, creator of Black Mirror and former video games journalist, talking about his love of video games and sharing some of his favorite game music.

You can listen to all three episodes in the browser or using the BBC iPlayer Radio app for iOS.

Categories
Shortcuts

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. ↩
Categories
Posts

Moment 72 Hour Holiday Sale

Moment is discounting all of their lenses, cases, and accessories by 20% and offering $5 shipping worldwide for the next three days when you use the code 72HOURSALE during checkout. Moment’s lenses are a core part of my iPhone photography kit and I highly recommend them.

Here are a few photos I’ve taken with Moment lenses:

Taken with iPhone X and Moment Macro lens.
Taken with iPhone X and Moment Macro lens.
Taken with iPhone X and Moment Wide lens.
Taken with iPhone X and Moment Wide lens.
Taken with iPhone X and Moment Wide lens.
Taken with iPhone X and Moment Wide lens.
Taken with iPhone X and Moment Macro lens.
Taken with iPhone X and Moment Macro lens.

If you’re thinking about getting started with Moment lenses, I recommend picking up the Wide lens first. It’s a versatile lens you’ll get a lot of use from and the one I like to use the most. You’ll also need one of their photo cases for your phone—this is what the lenses attach to.

For iPhone X and Xs users1, there’s also a battery photo case with built-in shutter button. When used with Moment’s iOS camera app, the button supports half-press to focus. If you prefer to use any other camera app, it operates the same as a volume button to trigger the shutter.

Moment’s camera app has some advanced features, such as manual controls, and can also shoot in RAW. If you’re a stickler for EXIF data, you can select the Moment lens you’re using and the app embeds the information within the photo’s metadata.

  1. The case is MFi certified for iPhone X, though iPhone Xs certification is still pending. I use the battery photo case with an iPhone Xs and it works fine, and it’s expected that the case be certified in the near future. ↩
Categories
Posts

Importing Instagram Photos Into Jekyll

Shortcuts no longer supports shortcut file imports. Any links to shortcuts in this post have been updated to use iCloud links.

I often post photos to Instagram or Unsplash. Now that I’m using my website for microblogging, I’ve started publishing my photos here as well. I’ll have more ownership over the content and, should either of these services ever go away, my photos will still be available.

I’ve also imported into my website a copy of all the photos I’ve posted to Instagram–about 1,200 photos spanning almost eight years. To do this, I requested an archive of all my Instagram data, copied the photos to my site, and generated all of the posts using Shortcuts.

The ZIP archive provided by Instagram contains a copy of everything uploaded, along with JSON files containing data about each post, comment, like, and more. While the archive contains all of this data, I was only interested in the photos.

Extracting the photos

The archive’s photos/ directory is neatly structured, with all photos organized into subdirectories using a YYYYMM date format (e.g., 201804/). The media.json file contains a photos dictionary, where each item contains information about each photo1:

  • path: The relative path to the photo.
  • location: The location the photo was tagged with. This is blank if no location was specified.
  • taken_at: The date the photo was posted.
  • caption: The caption of that photo. Similar to location, this is blank if no caption was included.

The first step was to import all the photos into the media/ directory of my website. I extracted the archive using Documents on my iPad , then created a new ZIP file containing just the photos/ directory. I opened this in Working Copy and extracted this new archive into my website’s git repository. After committing and pushing the changes, all of those photos were live and available to link to.

Creating the posts

Next, I copied media.json to iCloud Drive, then used Shortcuts (née Workflow) to create this shortcut that performs the following actions:

  • Loops through every item within the media.json file’s photos dictionary.
  • Gets the value for each item’s path, location, taken_at, and caption.
  • Creates a text file for each photo with the required Jekyll front matter using the values retrieved above, and sets the category to photo. The caption, if available, is included in the post.
  • Sets an appropriate name for the text file, based on the date information from taken_at.
  • Creates a ZIP file of all the text files that have been generated.

This is an example of a text file that the shortcut generates:

---layout: microblogpostcategory: photodate: '2018-09-02T14:54:40'title: ''slug: '18090212145440'mf-photo:  - https://www.jordanmerrick.com/wp-content/uploads/2018/11/e22680154ef0b993e870789b69764673.jpg---I love Central Park...

The photo URL is included in mf-photo as I’m using the same template I use for microblog posts, and that field was established when I set up the Micropub to GitHub service I use. You can easily change this to whatever you need.

Once complete, I opened the archive in Working Copy and extracted it into my site’s microblog/_posts/ directory.

Making changes to my Jekyll template

With my photos imported, I made a few small tweaks to my Jekyll template files. My microblog archive page displays a 10-word excerpt of the micropost’s text and uses it as the post’s link. However, many of my photos had no caption. As a result, there was no text to create an excerpt from, so Jekyll was skipping them and they weren’t being listed.

To make sure all my photos were listed on my archive page—and distinguish between plain text and photo posts—I added an emoji icon for any microblog posts that have the photo category set. I also edited the template for individual microblog posts to display the location information (along with the emoji pushpin symbol), if available.

Finally, I created additional JSON and RSS feeds that only include microblog posts with photos.

  1. Instagram treats posts with multiple photos as separate posts in the data archive. That was fine for me, as I’ve used only that feature maybe two or three times. ↩