Jekyll Image plugin that dynamically creates thumbnails and fancyboxes for uploaded images

fancyimage_tag.rb

# Title: Fancyimage tag for Jekyll
# Authors: Devin Weaver (photos_tag.rb), Brian M. Clapper (img_popup.rb), Patrick Paul (this gist)
# Description: Takes full size image, automagically creates thumbnail at specified size, +fancybox
#
# Adapted from:
#   http://tritarget.org/blog/2012/05/07/integrating-photos-into-octopress-using-fancybox-and-plugin/
#   (photos_tag.rb) https://gist.github.com/2631877
#   (img_popup.rb) https://github.com/bmc/octopress-plugins/
#
# Syntax {% photo filename [tumbnail] [title] %}
# Syntax {% photos filename [filename] [filename] [...] %}
# If the filename has no path in it (no slashes)
# then it will prefix the `_config.yml` setting `photos_prefix` to the path.
# This allows using a CDN if desired.
#
# To make FancyBox work well with OctoPress You need to include the style fix.
# In your `source/_include/custom/head.html` add the following:
#
#     {% fancyboxstylefix %}
#
# Markup:
#   {% fancyimage right /path/to/image.png 200x100 This is a cool title! %}
#
# Output:
#   <a href="/path/to/image.png" class="fancybox" title="This is a cool title!">
#   <img class="right" src="/path/to/image200x100.png" alt="This is a cool title!" /></a>
#
# Todo:
#   Add Galleries tag from Weaver's photos_tag.rb plugin
#   Figure out how to generate thumbnail images directly into /public/ folder 
#       (instead of to /source/ -> rake generate)
#   Generate thumbs in distinct /thumbs/ directory to avoid clutter (and accommodate .gitignore!)
#
# Installation:
#   Forthcoming. Look at the plugins I adapted off of for now.
#   I also aliases 'rake bake' to 'rake generate, rake generate, rake deploy'
#       because the thumbnails only generate -> /public/ the second time around.

require 'digest/md5'
require 'mini_magick'

module Jekyll

  class FancyboxStylePatch < Liquid::Tag
    def render(context)
      return <<-eof
<!-- Fix FancyBox style for OctoPress -->
<style type="text/css">
  .fancybox-wrap { position: fixed !important; }
  .fancybox-opened {
    -webkit-border-radius: 4px !important;
       -moz-border-radius: 4px !important;
            border-radius: 4px !important;
  }
  .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-color: transparent !important;
    border: 0 !important;
  }
</style>
      eof
    end
  end

  class FancyImageTag < Liquid::Tag
    def initialize(tag_name, markup, tokens)
      args = markup.strip.split(/\s+/, 4)
      
      raise "Usage: fancyimage img-class filepath 123x456 [title]" unless [3, 4].include? args.length
    
      @class = args[0]
      @filename = args[1]
      @dimensions = args[2]
      @title = args[3]
      super
    end

    def render(context)    
      # Determine the full path to the source image
      source = Pathname.new(context.registers[:site].source).expand_path
      image_path = source + @filename.sub(%r{^/}, '')
      
      # Determine the full path to the thumb image
      destination = source.sub("#{context.environments.first['site']['source']}","#{context.environments.first['site']['destination']}")
      destination = source # the above line doesnt work -- how can I generate thumbnails into Jekyll public directly?
      image_extension = File.extname(@filename)
      thumb_filename = (@filename.sub(%r{^/}, '').split("."))[0] + @dimensions + image_extension
      thumb_path = destination + thumb_filename
      
      # Resize and write the thumbnail image, if it doesn't exist yet
      if not File.exists?(thumb_path)
        thumb = MiniMagick::Image.open(image_path)
        thumb.resize(@dimensions)
        thumb.write(thumb_path)
      end
      
      if @filename
        "<a href=\"#{@filename}\" class=\"fancybox\" title=\"#{@title}\"><img class=\"#{@class}\" src=\"\/#{thumb_filename}\" alt=\"#{@title}\" /></a>"
      else
        "Error processing input, expected syntax: {% fancyimage img-class filename 123x456 [title] %}"
      end
    end
  end

end

Liquid::Template.register_tag('fancyimage', Jekyll::FancyImageTag)
Liquid::Template.register_tag('fancyboxstylefix', Jekyll::FancyboxStylePatch)

@pztrick: Have you figured out a way to write to the destination directory? From what I see, the way Jekyll works is:

1. Parse all markdown, gather things to copy
2. Parse liquid. This is where the liquid write/copy stage happens, and your files are written to _site / the destination directory
3. Clean _site. Goodbye files.
4. Write all files and output gathered in 1 + 2 to the now empty site.

[edit]

In a plugin I'm working on I'm adding the image dest directory to keep_files so they aren't erased during #3. It's working pretty well for now.

https://github.com/robwierzbowski/jekyll-picture-tag/blob/f99af1ad6d2368cd03d38b2d68b6a07035f300fd/picture_tag.rb#L59-L60