Daily: Retina Jekyll

This blog is managed using Jekyll, an awesome, ruby-based static site generator. I like ruby and the idea of not having to manage a database for some static content, so the choice was easy to make. One thing that’s missing though was support for retina images. So I built a tiny plugin that gets the job done. Turns out that plugins for Jekyll are something very, very simple. My plugin just converts (using ImageMagick) a source image into two resolutions, one for retina with the @2x-qualifier and a regular one. It looks like this:

Jekyll::Hooks.register :site, :post_render do |post|
  Dir["./img/original/*"].each do |x|
    file = File.new(x)
    name = File.basename(x, ".*")
    ext = File.extname(x)

    command = "cp #{x} ./assets/medium/#{name}@2x#{ext}"
    system(command)

    command = "convert #{x} -resize 50% ./assets/medium/#{name}#{ext}"
    system(command)
  end

The only thing going on here is that I’m registering my awesome plugin as a hook that gets executed after my site has been built (it’s also working in jekyll serve-mode). It then fetches all images residing in /img/original and converts or copies them to /assets/medium. The only additional step necessary was to embed the awesome retina.js library into the sites footer. And there I go, retina images.