From fbf8603d79e345dea2a8737a8545b8f2aa680edf Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Wed, 2 Jul 2014 13:56:42 +0200
Subject: [PATCH] picture tag update

---
 _config.yml                  |  2 +-
 _src/_plugins/picture_tag.rb | 45 +++++++++++-------------------------
 2 files changed, 14 insertions(+), 33 deletions(-)

diff --git a/_config.yml b/_config.yml
index 463c2254..cfc4c9b2 100644
--- a/_config.yml
+++ b/_config.yml
@@ -53,7 +53,7 @@ keep_files:             ['media', 'gen']
 picture:
   source: "_media"
   output: "media/gen"
-  markup: "picturefill"
+  markup: "picture"
   presets:
     default:
       ppi: [1, 2]
diff --git a/_src/_plugins/picture_tag.rb b/_src/_plugins/picture_tag.rb
index 6f8e0a39..daf5bf05 100755
--- a/_src/_plugins/picture_tag.rb
+++ b/_src/_plugins/picture_tag.rb
@@ -142,53 +142,34 @@ module Jekyll
 
       # Generate resized images
       instance.each { |key, source|
-        instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'])
+        instance[key][:generated_src] = generate_image(source, site.source, site.dest, settings['source'], settings['output'], site.config["baseurl"])
       }
 
       # Construct and return tag
-      if settings['markup'] == 'picturefill'
+      if settings['markup'] == 'picture'
 
         source_tags = ''
-        # Picturefill uses reverse source order
-        # Reference: https://github.com/scottjehl/picturefill/issues/79
-        source_keys.reverse.each { |source|
-          media = " data-media=\"#{instance[source]['media']}\"" unless source == 'source_default'
-          source_tags += "#{markdown_escape * 4}<span data-src=\"#{instance[source][:generated_src]}\"#{media}></span>\n"
+        source_keys.each { |source|
+          media = " media=\"#{instance[source]['media']}\"" unless source == 'source_default'
+          source_tags += "#{markdown_escape * 4}<source srcset=\"#{instance[source][:generated_src]}\"#{media}>\n"
         }
 
         # Note: we can't indent html output because markdown parsers will turn 4 spaces into code blocks
         # Note: Added backslash+space escapes to bypass markdown parsing of indented code below -WD
-        picture_tag = "<span #{html_attr_string}>\n"\
+        picture_tag = "<picture>\n"\
                       "#{source_tags}"\
-                      "#{markdown_escape * 4}<noscript>\n"\
-                      "#{markdown_escape * 6}<img src=\"#{instance['source_default'][:generated_src]}\" alt=\"#{html_attr['data-alt']}\">\n"\
-                      "#{markdown_escape * 4}</noscript>\n"\
-                      "#{markdown_escape * 2}</span>\n"
+                      "#{markdown_escape * 4}<img srcset=\"#{instance['source_default'][:generated_src]}\" #{html_attr_string}>\n"\
+                      "#{markdown_escape * 2}</picture>\n"
 
-      elsif settings['markup'] == 'picture'
-      
-        source_tags = ''
-        source_keys.each { |source|
-          if source == 'source_default'
-            source_tags +=  "#{markdown_escape * 4}<img src=\"#{instance[source][:generated_src]}\" alt=\"#{html_attr['alt']}\">\n"
-          else
-            source_tags += "#{markdown_escape * 4}<source src=\"#{instance[source][:generated_src]}\" media=\"#{instance[source]['media']}\">\n"
-          end
-        }
-
-        # Note: we can't indent html output because markdown parsers will turn 4 spaces into code blocks
-        picture_tag = "<picture #{html_attr_string}>\n"\
-                      "#{source_tags}"\
-                      "#{markdown_escape * 4}<p>#{html_attr['alt']}</p>\n"\
-                      "#{markdown_escape * 2}</picture>"
+      elsif settings['markup'] == 'img'
+        # TODO implement <img srcset/sizes>
       end
 
         # Return the markup!
         picture_tag
     end
 
-    def generate_image(instance, site_source, site_dest, image_source, image_dest)
-
+    def generate_image(instance, site_source, site_dest, image_source, image_dest, baseurl)
       image = MiniMagick::Image.open(File.join(site_source, image_source, instance[:src]))
       digest = Digest::MD5.hexdigest(image.to_blob).slice!(0..5)
 
@@ -223,7 +204,7 @@ module Jekyll
         gen_height = if orig_ratio > gen_ratio then orig_height else orig_width/gen_ratio end
       end
 
-      gen_name = "#{basename}-#{gen_width.round}*#{gen_height.round}-#{digest}#{ext}"
+      gen_name = "#{basename}-#{gen_width.round}by#{gen_height.round}-#{digest}#{ext}"
       gen_dest_dir = File.join(site_dest, image_dest, image_dir)
       gen_dest_file = File.join(gen_dest_dir, gen_name)
 
@@ -249,7 +230,7 @@ module Jekyll
       end
 
       # Return path relative to the site root for html
-      Pathname.new(File.join('/', image_dest, image_dir, gen_name)).cleanpath
+      Pathname.new(File.join(baseurl, image_dest, image_dir, gen_name)).cleanpath
     end
   end
 end