Managing Images with Jekyll

I’ve only been using Jekyll for about a week now and I can already see how managing images for each post could be an issue. I figure, I can’t have just one image/ directory and dump everything in there because at some point the file names will overlap and then I have to try to uniquely name all of my images, which seems pretty complicated. The next idea I had was to create an image directory to mimic the current date/time of the post, this way I could have something like the following:

images/
└── 2012
    └── 01
        ├── 24
        │   ├── keyboard-extra-key-small.png
        │   ├── keyboard-extra-key.jpg
        │   ├── keyboard-problem-small.png
        │   ├── keyboard-problem.jpg
        │   ├── keyboard-solution-small.png
        │   └── keyboard-solution.jpg
        └── 31
            ├── a.jpg
            ├── q.gif
            └── test.png

A somewhat structured and organized way of managing my images. But wait! That looks like a pain in the neck to create all of those directories and then move all of my files in there! (Actually… it is).

So here is my solution. I have added a rake task which will cleverly do all this grunt work for me, plus one extra handy feature: it will move all of the loose images in the images/ directory where they belong.

This is what it looks like:

desc 'Move all images in images/ to the current date image directory'
task :images do
  images = FileList['images/*.*']
  time = Time.new
  target = Rake.application.original_dir + time.strftime('/%Y/%m/%d/')
  #unless the file list is empty
  unless images.existing.empty?
      puts 'Cleaning images: ' + images.existing.to_s + ' => ' + target
      begin
        Dir::mkdir(target)
      rescue
      end
      mv images.existing, target
  end
end

With this, I can just dump all of the images relevant to the article post I’m currently working on into images/, then when I’m ready run a rake images and have all of the images moved into images/%Y/%m/%d according to the current date/time.

Note: this moves *.* which could be any type of file that has an extension, not just images. I thought it would be too inaccurate to copy only specific file extensions and I should only be putting images or anything I might consider an image in there, anyway. Maybe a better name for this would be media and then I would rename images/ to media/ and have all media served from there.