Makes img tag more flexible, adds support for relative paths. Includes pull request #145, fixes #161

1 files changed, 23 insertions, 22 deletions

diff --git a/plugins/image_tag.rb b/plugins/image_tag.rb
index 25a38df5..92e21765 100644
--- a/plugins/image_tag.rb
+++ b/plugins/image_tag.rb
@@ -1,46 +1,47 @@
 # Title: Simple Image tag for Jekyll
-# Author: Brandon Mathis http://brandonmathis.com
-# Description: Easily output images with optional class names and title/alt attributes
+# Authors: Brandon Mathis http://brandonmathis.com
+#          Felix Schäfer, Frederic Hemberger
+# Description: Easily output images with optional class names, width, height, title and alt attributes
 #
-# Syntax {% image [class name(s)] url [title text] %}
+# Syntax {% img [class name(s)] [http[s]:/]/path/to/image [width [height]] [title text | "title text" ["alt text"]] %}
 #
-# Example:
-# {% ima left half http://site.com/images/ninja.png Ninja Attack! %}
+# 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:
-# <image class='left' src="http://site.com/images/ninja.png" title="Ninja Attack!" alt="Ninja Attack!">
+# <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 = nil
-    @title = nil
-    @class = ''
-    @width = ''
-    @height = ''
 
     def initialize(tag_name, markup, tokens)
-      if markup =~ /(\S.*\s+)?(https?:\/\/|\/)(\S+)(\s+\d+\s+\d+)?(\s+.+)?/i
-        @class = $1 || ''
-        @img = $2 + $3
-        if $5
-          @title = $5.strip
-        end
-        if $4 =~ /\s*(\d+)\s+(\d+)/
-          @width = $1
-          @height = $2
+      attributes = ['class', 'src', 'width', 'height', 'title']
+
+      if markup =~ /(?<class>\S.*\s+)?(?<src>(?:https?:\/\/|\/|\S+\/)\S+)(?:\s+(?<width>\d+))?(?:\s+(?<height>\d+))?(?<title>\s+.+)?/i
+        @img = attributes.reduce({}) { |img, attr| img[attr] = $~[attr].strip if $~[attr]; img }
+        if @img['title'] =~ /(?:"|')([^"']+)?(?:"|')\s+(?:"|')([^"']+)?(?:"|')/
+          @img['title']  = $1
+          @img['alt']    = $2
+        else
+          @img['alt']    = @img['title'].gsub!(/"/, '')
         end
+        @img['class'].gsub!(/"/, '')
       end
       super
     end
 
     def render(context)
-      output = super
       if @img
-        "<img class='#{@class}' src='#{@img}' width='#{@width}' height='#{@height}' alt='#{@title}' title='#{@title}'>"
+        "<img #{@img.collect {|k,v| "#{k}=\"#{v}\"" if v}.join(" ")}>"
       else
-        "Error processing input, expected syntax: {% img [class name(s)] /url/to/image [width height] [title text] %}"
+        "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