Migrating my photo blog

04 Jun 2014

I had a WordPress site.

There, I said it.

If it makes you judge me less (though it probably won’t), the posts were auto-generated by Flickr. Alright, that just makes me judge myself even more…

There I was, 8 years into my professional career as a Developer (the majority of those as some sort of web developer), and I was having someone else do my blogging for me. I got so lazy that I just created sets in Flickr and posted those to share.

Something needed to change.

Devin Clark @iDevinClark lit a fire underneath me…he introduced me to bourbon (the sassy kind) and pushed me to start blogging. So I jumped into some sass with bourbon/neat/bitters (check this post out for more on bourbon from Devin) and created the bare bones of a blog…not bad, but it was missing something. I really wanted to pull over my photos posts into this as well.

If anyone has dealt with Flickr outside of looking at a page, things can get a bit interesting. However, they have a great developer api and there is a very nice node module flickrapi. Really dig the flickrapi mainly due to the fact that all variables are underscored rather than camel case…love it!

Here’s the bare bones of the application…I’m a huge fan of async as a control flow library, so you get to see some fun stuff with that library as well:

var Flickr = require('flickrapi'),
    async = require('async'),
    FlickrOptions = {
        api_key: "xxxxxx",
        secret: "xxxxxx",
        user_ud: "xxxxx",
        access_token: "xxxxx",
        access_token_secret: "xxxxxxx"
    };

async.waterfall([
    async.apply(Flickr.authenticate, FlickrOptions), //authenticate through flickr
    async.apply(getPhotosetList), //query api for photoset list for a given user
    async.apply(getPhotosetData), //set up parallel api calls to get individual photoset data
    async.apply(compilePhotosetObject) //do some massaging of the data to something I want
], function (err, result) {
    'use strict';
    if (err) {
        console.log(err); //if anything bad happens
    } else {
        console.log(JSON.stringify(result)); //the good stuff
    }
});

First step would be to get static URLs of the photos I have in Flickr so I can set those as image sources in my posts, as you can see I’m moving the flickr object through as well:

var getPhotosetList = function (flickr, callback) {
    'use strict';
    flickr.photosets.getList({
        user_id: '8548290@N03'
    }, function (err, result) {
        callback(err, flickr, result);
    });
};

Second step would be to grab the pertinent data for each photoset async.parallel is a great way to do that:

var getPhotosetData = function (flickr, photoset_result, callback) {
    'use strict';
    var photoset,
        counter,
        async_array = [];
    for (counter in photoset_result.photosets.photoset) {
        photoset = photoset_result.photosets.photoset[counter];
        async_array.push(async.apply(flickr.photosets.getPhotos, {
            photoset_id: photoset.id
        }));
    }

    async.parallel(async_array, callback);
};

Alright, now we have a good amount of data…how to get it into a form that works for me:

var compilePhotosetObject = function (photoset_data_results, callback) {
    'use strict';
    var final_obj = [],
        //this is good for anyone using flickr apis skeleton urls for static and link urls
        photo_url_skeleton = "http://farm{farm_id}.staticflickr.com/{server_id}/{photo_id}_{secret}_{size}.jpg",
        photo_link_url_skeleton = "http://www.flickr.com/{user_id}/{photo_id}";
    for (r_counter in photoset_data_results) {
        result = photoset_data_results[r_counter];
        obj.title = result.photoset.title;
        for (new_counter in result.photoset.photo) {
            single_photo = result.photoset.photo[new_counter];
            photo_url = photo_url_skeleton
                .replace('{farm_id}', single_photo.farm)
                .replace('{server_id}', single_photo.server)
                .replace('{photo_id}', single_photo.id)
                .replace('{secret}', single_photo.secret)
                .replace('{size}', 'z');
            photo_link_url = photo_link_url_skeleton
                .replace('{photo_id}', single_photo.id)
                .replace('{user_id}', '8548290@N03');
            photo_array.push({
                src: photo_url,
                link: photo_link_url
            });
        }
        obj.photos = photo_array;
        final_obj.push(obj);
        photo_array = [];
        obj = {};
    }
    callback(null, final_obj);
};

So now I have a array for each photoset that lists off the src and link urls:

[
 {
    "src":"http://farm8.staticflickr.com/7383/14130646191_7c34408746_z.jpg",
    "link":"http://www.flickr.com/8548290@N03/14130646191"
 },
 {
    "src":"http://farm8.staticflickr.com/7417/14154045723_ce23d2a2e5_z.jpg",
    "link":"http://www.flickr.com/8548290@N03/14154045723"
 },
 ...
]
 

so i throw those as a variable in my markdown for the site and in the gallery template I create a very basic gallery looping through the photo array:

<div class="photo-gallery" id="gallery">
   {% for photo in page.photos %}
     <a href="{{ photo.link }}" target='_blank'>
         <img src="{{ photo.src }}" />
     </a>
   {% endfor %}
</div>

I’m not a big fan of the look of the layout of my photos…the flickr auto-fit grid is beautiful, so I wanted to find something like that. Luckily I ran across justifiedGallery.

All I needed to do was add the css/js files of justifiedGallery, add jquery and call

$(".photo-gallery").justifiedGallery({
    "rowHeight": "350px" //this makes the images look much better than the default 120px rowHeight
});

Here’s a good example of what justifiedGallery can do: D.C. Post.

I am happy to announce that my wordpress blog has been deleted and I will never go back!