One of the things I’ve been interested in for the past while is ownership over the content I create as I go around the internets.
The most obvious content is blog posts like this one. Which is why I moved from posterous to Statamic. My content now resides in my dropbox as flat text files. Lovely.
My name is Steven and I am an Instagram user
The next focus for me was my photos. Instagram is fun. It’s a guilty pleasure.
I don’t like all those photos existing only on Instagram. I can’t easily give you a link to ‘my instagram stuff’. It’s a weird experience. I want to own that stuff and do what I want with it.
Enter IFTTT.com
IFTTT makes it super easy to grab an instagram shot. IFTTT stands for ‘if this then that’. So If I post an instagram shot then grab a copy and put it in my dropbox. Easy.
So I have the file, but how to pull that into my blog? Step one – repoint my ifttt.com recipe to drop them into my Assets folder in my Statamic filespace. I now have the image in the right place.
But Statamic uses markdown files to control the presentation of content. Having the image is fine – but I now need an .md file with some meta in the header, and ideally an image tag, the caption and a link to the original on Instagram.
The recipes
So let’s look at the recipes at IFTTT. We need two recipes. One for the image, and one for the statamic markdown file.
Photo ( ifttt recipe )
The first step was to make sure that the filename that was saved to my dropbox was unique. I might take ten photos a day titled “coffee” or “clouds” so the caption was no use. The created date includes a timestamp – so that’s likely unique. “CreatedAt” in IFTTT language.
Statamic markdown ( ifttt recipe )
The second step is to create our markdown file. This uses the ‘create text file in dropbox’ option in IFTTT. We’ll make sure again that our filenames are unique – but this time we’d like them to also be human readable – so I use CreatedAt-Caption to have the unique date and the simple name. We can’t set the extension, as unfortunately IFTTT only creates .txt files – we’ll come back to that later.
So the content field should contain something like this:
---< br >
title: '{ {Caption} }'< br >
categories:< br >
- instagram< br >
---< br >
< br >
Taken at { {CreatedAt} } < br >
[view on instagram]({ {Url} })
The title just takes the caption that you gave your photo. If you don’t give your photo a title this will be empty so make sure your templates have a default / other handler.
I’ve added an instagram category – as I’m repeating this process across other sites, so it’s nice to categorise.
The markdown image markup is simple – and uses the CreatedAt again for the URL. Now – this comes through with spaces in this instance, which is different from the URL created for the image. We’ll come to handling that later.
Finally on the IFTTT side of things, the < br > tags are converted into linebreaks in the text file. Without the < br > you’d get a single line text file – which Statamic would choke on as whitespace / newlines are important to the parser.
Version One
So with these two recipes running we end up with these two files:
/_content/stream/october 16, 2012 at 10:31pm batman test.txt
/assets/ifttt/instagram/own/October 16, 2012 at 10:31PM.jpg
So we have an obvious annoyances there. Filenames with spaces, commas and colons are not filenames I can make friends with, and Statamic won’t like targetting them.
I chose to clean this up using a couple of simple bash scripts that I can run as part of my deploy step (I publish by pushing to the server using git, so I can easily just run a couple of bash scripts before I commit).
This script is pretty long hand while I figure out the best way to shape the IFTTT process – there are neater ways to do this in less lines – but this makes it clear what’s going on.
# simple script to rename files created by ifttt.com and
# sent to dropbox. Need to clean spaces commas and colons
# from auto jpg names
# remove spaces and replace with -
for file in *.jpg
do
mv "$file" "${file// /}"
done
# remove commas and replace with -
for file in *.jpg
do
mv "$file" "${file//,/-}"
done
# remove colons and replace with -
for file in *.jpg
do
mv "$file" "${file//:/-}"
done
This script above reformats the filenames nicely just by stripping out stuff we don’t need. This is run in the images directory.
# simple script to rename files created by ifttt.com and
# sent to dropbox. Need to change .txt to .md and replace
# spaces with dashes to get them ready for statamic use
# remove spaces and replace with -
for file in *.txt
do
mv "$file" "${file// /-}"
done
# change extension from txt to md
for file in *.txt
do
mv "$file" "$(date +%F)-${file/txt/}md"
done
This one is a bit simpler and runs on the content directory. I’m not overly worried about the , and : in the markdown filenames. I replace the spaces with a – to maintain some legibility. I prepend a YYYY-MM-DD formatted datestamp to the filename, and replace the .txt extension with the .md extension that Statamic demands. (Note – this assumes you are running your updates on a schedule at least once a day – otherwise you’d need to base the YYY-MM-DD stamp on the date of the file.)
Version Two
So with these two shell scripts fixing things up we get there new filenames:
/_content/stream/2012-10-16-october-16,-2012-at-10:31pm-batman-test.md
/assets/ifttt/instagram/own/October16-2012at10-31PM.jpg
This gives us a working entry in the blog. But the image link is broken, and the categories don’t work, but the entry appears in the right place. Let’s look at part of that .md file:
---
title: 'Batman test'
categories:
- instagram
---
So there are two problems here.
IFTTT ignores our request for whitespace ahead of the “- instagram”. Without that indentation this isn’t recognised by Statamic. Quite rightly not recognised – the whitespace is important. We’ll need to slot that back in somehow.
The second thing is the spaces in the image filename. These are a pain. There are no fields we can use in IFTTT that give the same string for a filename and in the content of the text file. An option to allow that would save SO much time as we wouldn’t have to do any work to fix our image URLs. Even a numeric timestamp / uid would suffice.
Version Three
A wee bit of text manipulation within the file is all that’s needed. That’s for another post though…
Steven Milne 