On Posting images

I talk about albums, photo management, and the sleek way I now post collections of photos.

I'm going away soon; I'll be cruising down the danube for a couple of weeks. Before-hand I wanted to find a way to improve the way I post my photos. I'm notoriously bad at taking care of my photos: I often let them rot on my hard-drive, never to be seen again. To rectify this, last weekend I updated the way I upload images, the way my editor allows me to post images, and the way I convert images in .md files into .html posts.

Before this change I only ever associated one image with a post. While it was technically possible via collections, it was a pain. Having a separate photo for each post is really inconvenient. As a stop-gap I've been using Own Your Gram as a means of posting photos. It's been a nice way to casually post photos from my phone. However, with this setup it's still challenging to manage large collections of photos.

I needed the system to:

  1. be able to upload a large number of photos conveniently
  2. be able to present recently uploaded photos so that
  3. be able to turn a human-readable representation of images into nicely formatted HTML
  4. be flexible in how the photos are presented

Now, it's easy for me to upload photos en-masse, embed them in associated posts, and make them look pretty.

One of the trickier aspects of this is the fourth point: I want adding photos to posts and albums to be simple enough that I'll actually use it. Adding the .html to a post isn't really an option. It's messy, easy to make mistakes, and will prevent any changes to my photo styling from being backwards compatible. Additionally, I want the simple input I add to be expressive enough that I can arrange photos however I want.

To do all this I wrote an extension for the markdown library that I'm using which describes how I can define a collection of photos. Similar to code fencing, a collection of photos surrounded by @ symbols is defined as a collection of images. Given I know anything within the @ will be parsed as an image, I drop the need for a preceding !.

When I parse this to html, I add in the bootstrap classes which give the formatting for my site and calculate what their size should be to evenly space them. To have a traditional album, I can easily just add multiple rows of these to space and collect them as necessary. To interleave text, I simply treat it like any fenced portion of markdown and text around the albums.

As I go along I may add more parameters which allow me to override the image formatting. For instance, the ability to specify a specific width would be a good way to add emphasis to a particular photo while keeping it together with my current pictures.

For now this is a low-stress way to keep posting photos.