QR Code contains TinyURL of this article.Automated <srcset> Image Factory

photographer with Minolta 35mm film SLR camera
Credit: . License: CC BY-NC-ND 2.0

In the previous article I described my reversal on using the srcset attribute in web-design. I then promised to publish the code and workflow I am currently using to automate the production and deployment of my srcset images.

So, without further ado, allow me to introduce srcset_factory.

What Does it Do?

Given a source image1 — of the types: GIF, JPEG or PNG — and a destination directory, srcset_factory will generate the different sized versions of the source image that you require for your srcset. It will optionally group them in sub-directories by size. It can scale images by breakpoints (width) and/or by ratios (@2x, @3x, etc.)

When image production is complete, the script generates a template-based HTML snippet which the workflow can then copy to your system clipboard, for pasting directly into your code editor or CMS.

The program is non-destructive2 although, in some circumstances,3 it may rename source images to avoid file-system conflicts.4

Installation and Configuration

Please refer to the srcset_factory GitHub project page for all the juicy details.

Workflow

While srcset_factory does the heavy-lifting in my srcset process, it needs an encapsulating workflow to be complete:

Flowchart of the srcset_factory workflow.

As you can see from the flowchart above, we can break our workflow down into three discrete steps:

  • Monitor a “drop” folder for new files (yellow);
  • Process a source image with srcset_factory to produce size versions and a HTML snippet (pink);
  • Put HTML snippet onto the system clipboard (blue).

We service the second and third steps of this workflow with the following shell script:

#!/bin/sh
/path/to/srcset_factory.php --source=/path/to/srcset_drop_folder --destination=/path/to/destination_folder | pbcopy

The | (pipe) character separates the two workflow steps. The left side of the pipe instructs srcset_factory to process any image(s) it finds in the srcset_drop_folder and save the different sized images it generates to destination_folder. The right side sends the output of srcset_factory, a HTML snippet, to the system clipboard.5

There are numerous ways to handle the first step of the workflow. On my platform of choice, OS X, we can use Folder Actions,6 Automator or any number of low-level tools like fswatch.7  I use Hazel myself, so I’ll now show you how I configure Hazel to complete this workflow. You should be able to adapt these instructions to work with the file-watching tool you prefer.

configuring 'Hazel' watch folder on OSX
Configure your “watch” folder
configuring 'Hazel' rules on OSX
Add the workflow rules

Finish by clicking the “×” icon next to “Edit script”, followed by the “OK” button to commit your changes.

That’s it. Hazel will now “watch” the /path/to/srcset_drop_folder directory. When you add a new image to that directory, Hazel will run the srcset_factory script, output its images to /path/to/destination_folder and put a HTML snippet onto your clipboard ready for you to paste into your markup for final editing.

Have Your Say

Questions, comments, feedback? Discuss on Hacker News.

  1. Given a directory as it’s source, srcset_factory will process each image it finds in that directory. ↩︎

  2. srcset_factory retains all source images in their original form. ↩︎

  3. If your workflow supplies srcset_factory with an image whose filename matches one that already exists in the destination directory, it will rename the source file with an MD5 digest of it’s content in order to avoid a conflict. The source image and all size versions will inherit the new filename. ↩︎

  4. srcset_factory has a user-configurable option to always rename files with the MD5 digest of their content. This virtually guarantees that there will be no filename conflicts. ↩︎

  5. pbcopy is OS X specific. On Windows use clip. On Linux use xclip↩︎

  6. At the time of writing I recommend that you don’t use Folder Actions. There seems to be some serious CPU usage issues under the newly-released Yosemite, at least on my system. I expect Apple will resolve this with a point release at some future time. See also: “Folder Action Dispatcher” thread in the Apple Support Communities. ↩︎

  7. You can also use fswatch on other flavours of Unix. There are options for Windows users too. ↩︎