Drafts, Shortcuts, and Scriptable – A Workflow Story, Part 1

Imagine me, happily tapping out a remarkably average blog post in Drafts on my iPad Pro. This takes zero imagination for me, since that’s what I’m actually doing right this second. Verbose as I already am, I could really tally up the word count by throwing in a photo or two (they’re worth a 1000 words each, I hear). Inserting images into blog posts is pretty routine fare, and has been for decades. It’s not the internet’s fault that I’ve decided to never use Wordpress again or that I’m blogging in a plain text markdown editor on an iPad Pro rather than into a web interface with a photo upload button.

When I used Ulysses to write blog posts in, I could insert images directly from the Photos library using the attachment tool, and the photos would be embedded into the document. Ulysses also conveniently bundles attachments and text together in a zip file upon export. If there are no attachments, then it exports just the markdown file.

But Drafts, which I write blog posts with now for multiple reasons, can’t embed images. Drafts can only link to images, so I had to come up with a way of getting images linked to in my post into my publish blog post shortcut.

Drafts on iPad does have a nice preview feature which you can use to see how your markdown post will look after being converted to html, but it needs photos in a folder it can access to preview them inline. Since iOS and iPadOS apps only have access to their own iCloud folders, including any sub folders and files in them, any photos I want in a draft go into iCloud/Drafts/Library/Previews/images so I can preview how they’ll look in the final post.

In terms of the overall image handling workflow, I want to be able to choose images from my Photos library without having to manually move them to any special location first (like the aforementioned Drafts iCloud folder). I want markdown image links created automatically and inserted into my Drafts document at the current cursor location. And while I need my images to be put where Drafts can preview them, I also need them someplace Shortcuts can access them from later so my blog post publishing shortcut can grab them.

Blog Post Image Handling Requirements.

  • Images I link to must display in Drafts preview for checking while editing the draft.

My first requirement, that of being able to preview my images inline in my post using the Drafts preview function, is simply a matter of putting them in iCloud/Drafts/Library/Previews/images and generating a link to them for Drafts to stick in my document wherever I want an image.

In the Drafts Action Directoy, someone has created a handy Insert Local Image Ref Drafts action, which you can use to pick an image in the aforementioned iCloud/Drafts/Library/Previews/images folder and create a link to it that Drafts can display as the actual image when previewed. The links it generates look like this:

![images/YogaCat.png](images/YogaCat.png)

Handy! Well, sort of handy. This requires me to first move the image there myself, and to make sure it’s named whatever I want to name it. As I’ve reiterated many times on this site, I want computers to work for me, and I like automation because it does things consistently, time after time.

  • My images must have unique names generated that avoid any duplicate image names in any post on my entire site, plus which link them to the draft they’re associated with.

Next on my list of blog post image requirements is that when I name a photo, I don’t want to have to remember what I’ve named every other photo I’ve ever published on my site to ensure a unique file name. This has to be handled for me automatically. I can either write a script that tediously looks at all my existing image names at some point in the process, or I can do something less taxing but equally effective and append a date and time stamp onto my file name.

Great! That would be enough to ensure unique file names for my photos. But I also want to know what blog post the images in my preview folder (and later, my shortcuts folder) are associated with, for administrative purposes, like knowing which images belong to already published blog posts so I can clean them up without wiping out images being used for other blog posts still being written. If only each draft in the Drafts app had a unique identifier…

Because Greg Pierce, creator of Drafts, is an intelligent human, drafts DO have unique identifiers called UUID. A UUID is essentially a GUID.

So now I can append the UUID of the draft the photo is used for onto the end of whatever I want to call the photo, and then append my date time stamp onto THAT. This gives me the ability to always uniquely name photos as well as to know what draft (and therefore blog post) they belong to.

Now I have image links that look like this:

![images/YogaCat-120E632E-589D-4D42-8E80-924570985CED-20210722094114.png](images/YogaCat-120E632E-589D-4D42-8E80-924570985CED-20210722094114.png)

Brilliant! But wait… there’s more. There’s always more.

  • Images links must be in the form of a markdown link and contain additional metadata for image title, image size, and image positioning.

Because I’m never happy with just a couple use case requirements, I also would like to be able to add some additional metadata to the markdown links that get inserted into my draft, per requirement 2 above. I need that information for the Hugo compiler on my server when the markdown gets compiled into html to control how the image is displayed (image size, positioning, image title, etc). I’ll spare you the details of how that information makes sense to Hugo (hint: shortcodes), but it’s useful for me and I don’t want to ever have to think about the images at all except when I’m choosing them to put them in a document.

So now, finally, I have links that look like this:

![Cables](images/Cables-12BBA517-9DE5-4020-BB1C-FC000E8E4F61-20210724004321.png "center" width="800")

My Hugo image shortcode will use the title, size, and position information to make my image appear as expected, and my publishing shortcut will use the width parameter to make a resized copy of the image and make sure the embedded resized copy links to the original full-sized photo. Again, all of this has to happen automagically the same way every time I write a post without any effort on my part beyond initial image and metadata choices.

  • Exact copies of my uniquely named images must reside in a place Shortcuts can access so that my blog post publish shortcut can publish them.

In addition to generating uniquely named image files where Drafts can preview them, I also need them where the Shortcuts app can get its mitts on them for publishing them to the website, including all necessary tweaks and file handling considerations. Some of these tweaks and considerations include making resized copies if I’ve specified an image width and modifying the markdown image link to contain an outer href link to the full-sized image. More obviously, the shortcut needs the photos to add to the site images folder.

Summary

Doing things manually with any workflow is a recipe for forgetting something or doing something incorrectly. When I publish a blog post, a lot of things must happen without my involvement, both for consistency and for my own quality of life. When it comes to image handling for photos I link into my posts, I have the following requirements, discussed at great length above:

  1. Images I link to must display in Drafts preview for checking while editing the draft.

  2. My images must have unique names generated that avoid any duplicate image names in any post on my entire site, plus which link them to the draft they’re associated with.

  3. Images links must be in the form of a markdown link and contain additional metadata for image title, image size, and image positioning.

  4. Exact copies of my uniquely named images must reside in a place Shortcuts can access so that my blog post publish shortcut can publish them.

Next post, I’ll zoom in on the mechanics of how I make all this happen with a Drafts action called Insert Images and a shortcut called Draft Post Photo.