Using In-Line HTML to Preview Images in iA Writer

On last week’s episode of Connected, Federico Viticci described the way in which he embeds images as he writes in iA Writer and subsequently uploads those images to the MacStories CMS. You can listen to this section of the latest episode, but in short: Federico uses iA Writer’s Content Block feature to insert images and view them right in the editor’s preview window — and then uses Scriptable to upload all of the images one-by-one and replace the Content Block with the actual image embed. I also use iA Writer for all of the posts on Peer Reviewed, but I have a different (and perhaps more efficient) way of handling images as I put together my posts: in-line HTML.

Marking Up Your Markdown

One of the many benefits of writing in Markdown is that most editors natively parse HTML as well, because Markdown and HTML are intended to work seamlessly with each other — as John Gruber himself explains here:

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself. There’s no need to preface it or delimit it to indicate that you’re switching from Markdown to HTML; you just use the tags.

What this means is that iA Writer can natively parse and preview HTML tags inside my Markdown documents — including the figure and figcaption tags. Whenever I want to embed an image in a blog post, I simply paste in a snippet of HTML that points to the permalink of the image, and includes an image caption and alt text. Here’s what it looks like in both the editor window and the preview window in iA Writer:

iA Writer natively parses the HTML on the left to show the image in the preview window on the right.

This strategy for inserting images makes it very clear where in the editor you have images inserted (because the HTML sticks out so plainly), while also allowing you to preview a post as it would appear on the web right inside iA Writer. An added bonus being that your final draft is already 100% ready for the web, since everything you have written is already either Markdown or HTML.

Generating HTML Snippet with Shortcuts

The other advantage of using in-line HTML instead of iA Writer’s Content Block system is the speed with which the appropriate HTML snippet can be generated — with the help of Shortcuts, of course. As a general rule, images in my blog posts are either screenshots from an Apple device, or a photo I’ve taken of a physical product, like a keyboard or a CPU heatsink. As such, I have two Siri Shortcuts I use to generate the HTML snippets for each of these scenarios — framed device screenshots are generated with a modified version of Federico’s own Apple Frames shortcut, and any other images are uploaded via my own Image Uploader shortcut.

Both of these shortcuts effectively do the same thing (after device frames are added to any screenshots):

1. Upload the image (in my case, to Imgur)
2. Get the permalink of the image
3. Ask for descriptive alt text and a caption
4. Combine the image URL, alt text, and caption in an HTML figure snippet
5. Copy the snippet to the clipboard and kick me back into iA Writer

An all-in-one shortcut for adding a device frame, uploading, captioning, and generating the final HTML for an image really streamlines the process.

It only takes a few moments for the shortcut to finish running, plus or minus the time it takes for me to come up with a punchy caption for the image I’m uploading. Once it’s finished, all I have to do is paste the HTML where I want the image to appear in my post and iA Writer will natively allow me to preview the image as well as its caption just as it would appear on the web (CSS notwithstanding). And if I decide to reword a caption or change the image I want to use, all I have to do is edit the HTML snippet in the iA Writer document itself — the beauty of an all-text system for composing an article.

</blogpost>

This system for quickly uploading and inserting images while still being able to preview them in iA Writer has worked very well for me. The aspect I like most about this method is how little effort is needed to go from a completed post in iA Writer to publishing it on Peer Reviewed — I literally copy and paste the text and it is ready to publish. I think Federico’s system for uploading to the MacStories CMS and publishing articles to his site might necessarily be a bit more complex than mine, but I have a feeling that this method for handling images might be slightly more streamlined than using Content Blocks and custom Scriptable scripts to swap out file paths with HTML while editing.