Octopress image plugin with additions for @2x and lazy loading

image_tag.rb

# Title: Simple Image tag for Jekyll
# Authors: Brandon Mathis http://brandonmathis.com
#          Felix Schäfer, Frederic Hemberger
#          Brett Terpstra
# Description: Easily output images with optional class names, width, height, title and alt attributes
#
# Additions: insert img/grey.gif and data-original for lazy loading
#            insert @2x data attribute - this uses an htaccess rule that serves the
#              1x if no @2x version exists.
#
#              # Image handling for retina
#              RewriteCond %{REQUEST_FILENAME} !-f
#              RewriteRule (.*)@2x\.(jpg|png|gif) $1.$2 [L]
#
# Syntax {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | "title text" ["alt text"]] %}
#
# Examples:
# {% img /images/ninja.png Ninja Attack! %}
# {% img left half http://site.com/images/ninja.png Ninja Attack! %}
# {% img left half http://site.com/images/ninja.png 150 150 "Ninja Attack!" "Ninja in attack posture" %}
#
# Output:
# <img src="/images/ninja.png">
# <img class="left half" src="http://site.com/images/ninja.png" title="Ninja Attack!" alt="Ninja Attack!">
# <img class="left half" src="http://site.com/images/ninja.png" width="150" height="150" title="Ninja Attack!" alt="Ninja in attack posture">
#
module Jekyll

  class ImageTag < Liquid::Tag
    @img = {}

    def initialize(tag_name, markup, tokens)
      # <img class="lazy" src="img/grey.gif" data-original="img/example.jpg" width="640" height="480">

      if markup =~ /(?:(\S+) )?((?:https?:\/\/|\/|\S+\/)\S+)(?:\s+(\d+))?(?:\s+(\d+))?\s+(.*)?/i
        unless $2.nil?
          imgclass = $1 || nil
          image = $2
          width = $3 || nil
          height = $4 || nil
          title = $5 || nil
          @img = {}
          @img["class"] = imgclass ? "lazy #{imgclass}" : "lazy"

          begin
            if image =~ /^(http:\/\/(?:cdn3\.)?brettterpstra.com|\/)/
              image.sub!(/^(http:\/\/(?:cdn3\.)?brettterpstra.com)?/,"")
              @img["data-original"] = image
              @img["data-at2x"] = image.sub(/\.(png|jpg|gif)$/,"@2x.\\1")
              filename = File.expand_path(File.join(%x{git rev-parse --show-toplevel}.strip,"source"+image))

              filename.sub!(/\.\d+\.([^\.]{3,4})$/,".\\1")

              if width && height
                @img["width"] = width
                @img["height"] = height
              elsif File.exists?(filename)
                @img["width"] = %x{sips -g pixelWidth "#{filename}"  2> /dev/null|awk '{print $2}'}.strip
                @img["height"] = %x{sips -g pixelHeight "#{filename}"  2> /dev/null|awk '{print $2}'}.strip
              end
            else
              @img["data-original"] = image
              @img["data-at2x"] = image.sub(/\.(png|jpg|gif)$/,"@2x.\\1")
              @img["width"] = width if width
              @img["height"] = height if height
            end
          rescue
            @img["data-original"] = image
            @img["data-at2x"] = image.sub(/\.(png|jpg|gif)$/,"@2x.\\1")
            @img["width"] = width if width
            @img["height"] = height if height
          end

          @img["src"] = "/images/grey.gif"
          if title && title !~ /^[\s"]*$/
            if /(?:"|')(?<xtitle>[^"']+)?(?:"|')\s+(?:"|')(?<alt>[^"']+)?(?:"|')/ =~ title
              @img['title']  = xtitle
              @img['alt']    = alt
            else
              @img['alt']    = title.gsub(/(^["\s]*|["\s]*$)/, '')
            end
          end
        end
      end
      super
    end

    def render(context)
      unless @img.empty?
        if context.registers[:site].config["production"]
          @img["src"] = context.registers[:site].config["cdn_url"] + @img["src"]
          if @img["data-original"] =~ /^(http:\/\/brettterpstra.com|\/)/
            @img["data-original"] = context.registers[:site].config["cdn_url"] + @img["data-original"].sub(/^http:\/\/brettterpstra.com/,'')
          end
        end
        %Q{<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>}
      else
        "Error processing input, expected syntax: {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | \"title text\" [\"alt text\"]] %}"
      end
    end
  end
end

Liquid::Template.register_tag('img', Jekyll::ImageTag)