jekyll-picture-tag 0.2.3

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: d5973c7f85a12ce7efb0a109d27a102012fd8d11
+  data.tar.gz: cab2315e25e0140dcf35aed001b1d6acd8204531
+SHA512:
+  metadata.gz: 9401800983de613fc69419effd1fd0ad44d4c8698b103368e01adb459e9104448ee9fc2acb05d84ccc68b53a2b00b71baed0a2177fb6972ad221fb03695836f1
+  data.tar.gz: a9f21424491affe44ec6f58ead9aeb4ee1794a28fb2e6b602f8ed1608d63b1ea6af1fc579926909bcac9a1793021acb70ecede32f6706d73047ecb786a20ab70

data/.gitignore

@@ -0,0 +1,11 @@
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+.idea
+jekyll-picture-tag.iml

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in jekyll-picture-tag.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,24 @@
+Copyright (c) 2013, Robert Wierzbowski
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the <organization> nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "jekyll-picture-tag"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,7 @@
+#!/bin/bash
+set -euo pipefail
+IFS=$'\n\t'
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/examples/_config.yml

@@ -0,0 +1,53 @@
+# Sample Jekyll Picture Tag settings
+
+name: A responsive Jekyll blog
+pygments: true
+markdown: redcarpet
+
+picture:
+  source: assets/images/_fullsize
+  output: generated
+  markup: picture
+  presets:
+    # Full width pictures
+    default:
+      ppi: [1, 1.5]
+      attr:
+        class: blog-full
+        itemprop: image
+      source_lrg:
+        media: "(min-width: 40em)"
+        width: 700
+      source_med:
+        media: "(min-width: 30em)"
+        width: 450
+      source_default:
+        width: 350
+        height: 200
+    # Half width pictures
+    half:
+      ppi: [1, 1.5]
+      attr:
+        data-location: "{{location}}"
+        data-active: nil
+      source_lrg:
+        media: "(min-width: 40em)"
+        width: 400
+      source_med:
+        media: "(min-width: 30em)"
+        width: 250
+      source_default:
+        width: 350
+    # Self-set resolution sources. Useful if you don't want a 1:1 image size to dppx ratio.
+    gallery:
+      source_wide_hi:
+        media: "(min-width: 40em) and (min-resolution: 1.5dppx)"
+        width: 900
+        height: 600
+      source_wide:
+        media: "(min-width: 40em)"
+        width: 600
+        height: 400
+      source_default:
+        width: 250
+        height: 250

data/examples/layout.html

@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+        <title>{{ page.title }}</title>
+        <meta name="viewport" content="width=device-width">
+
+        <!-- syntax highlighting CSS -->
+        <link rel="stylesheet" href="/css/syntax.css">
+
+        <!-- Custom CSS -->
+        <link rel="stylesheet" href="/css/main.css">
+
+        <!-- Picturefill libraries for Jekyll Picture Tag -->
+        <script src="/assets/matchmedia.js"></script>
+        <script src="/assets/picturefill.js"></script>
+        <!-- -------------------------------------------- -->
+
+    </head>
+    <body>
+
+        <div class="container">
+          <div class="site">
+            <div class="header">
+              <h1 class="title"><a href="/">{{ site.name }}</a></h1>
+              <a class="extra" href="/">home</a>
+            </div>
+
+                {{ content }}
+
+            <div class="footer">
+              <div class="contact">
+                <p>
+                  Your Name<br />
+                  What You Are<br />
+                  your@email.com
+                </p>
+              </div>
+              <div class="contact">
+                <p>
+                  <a href="http://github.com/yourusername/">github.com/yourusername</a><br />
+                  <a href="http://twitter.com/yourusername/">twitter.com/yourusername</a><br />
+                </p>
+              </div>
+            </div>
+          </div>
+        </div> <!-- /container -->
+
+    </body>
+</html>

data/examples/output.html

@@ -0,0 +1,11 @@
+<!-- Example picture output, {% picture portrait.jpg alt="An example of picturefill markup" %} -->
+
+<picture>
+  <source srcset="/generated/portrait-1050by1050-092483.jpg" media="(min-width: 40em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 40em) and (min-resolution: 144dpi)">
+  <source srcset="/generated/portrait-700by700-092483.jpg" media="(min-width: 40em)">
+  <source srcset="/generated/portrait-675by675-092483.jpg" media="(min-width: 30em) and (-webkit-min-device-pixel-ratio: 1.5), (min-width: 30em) and (min-resolution: 144dpi)">
+  <source srcset="/generated/portrait-450by450-092483.jpg" media="(min-width: 30em)">
+  <source srcset="/generated/portrait-525by300-092483.jpg" media="(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)">
+  <source srcset="/generated/portrait-350by200-092483.jpg">
+  <img srcset="/generated/portrait-350by200-092483.jpg" alt="">
+</picture>

data/examples/post.md

@@ -0,0 +1,16 @@
+---
+layout: post
+title: Tag examples
+---
+
+{% picture portrait.jpg alt="An unsual picture" %}
+
+What was the narrative that this representation was meant to embellish and complete? As I regarded the work, I slowly sensed that the underlying tale was the picture itself. The painting wasn’t the extension of a story at all, it was something in its own right.
+
+### Variations
+
+With a preset specified:  
+{% picture gallery portrait.jpg alt="An unsual picture" data-downloadable="true" %}
+
+With an alternate source images:  
+{% picture half portrait.jpg source_lrg: dream-fullpage.jpg source_med: dream-midrange.jpg alt="An unsual picture" data-downloadable="true" %}

data/jekyll-picture-tag.gemspec

@@ -0,0 +1,32 @@
+# coding: utf-8
+
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+
+Gem::Specification.new do |spec|
+  spec.name          = "jekyll-picture-tag"
+  spec.version       = '0.2.3'
+  spec.authors       = ['Robert Wierzbowski', "Brendan Tobolaski"]
+  spec.email         = ['hello@robwierzbowski.com', "brendan@tobolaski.com"]
+
+  spec.summary       = %q{Easy responsive images for Jekyll.}
+  spec.description   = <<-EOF
+    Jekyll Picture Tag is a liquid tag that adds responsive images to your Jekyll static site. It follows the picture
+    element pattern, and polyfills older browsers with Picturefill. Jekyll Picture Tag automatically creates resized
+    source images, is fully configurable, and covers all use cases — including art direction and resolution switching —
+    with a little YAML configuration and a simple template tag.
+  EOF
+  spec.homepage      = 'https://github.com/robwierzbowski/jekyll-picture-tag'
+  spec.license       = 'BSD-3-Clause'
+  spec.require_paths = ['lib']
+
+
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+
+  spec.add_development_dependency "bundler", "~> 1.8"
+  spec.add_development_dependency "rake", "~> 10.0"
+
+  spec.add_dependency 'mini_magick', '~> 3.8.0'
+  spec.add_dependency 'fastimage', '~> 1.6.4'
+  spec.add_runtime_dependency 'jekyll', '< 3'
+end

data/lib/jekyll-picture-tag.rb

@@ -0,0 +1,240 @@
+# Title: Jekyll Picture Tag
+# Authors: Rob Wierzbowski : @robwierzbowski
+#          Justin Reese    : @justinxreese
+#          Welch Canavan   : @xiwcx
+#
+# Description: Easy responsive images for Jekyll.
+#
+# Download: https://github.com/robwierzbowski/jekyll-picture-tag
+# Documentation: https://github.com/robwierzbowski/jekyll-picture-tag/readme.md
+# Issues: https://github.com/robwierzbowski/jekyll-picture-tag/issues
+#
+# Syntax:  {% picture [preset] path/to/img.jpg [source_key: path/to/alt-img.jpg] [attr="value"] %}
+# Example: {% picture poster.jpg alt="The strange case of responsive images" %}
+#          {% picture gallery poster.jpg source_small: poster_closeup.jpg
+#             alt="The strange case of responsive images" class="gal-img" data-selected %}
+#
+# See the documentation for full configuration and usage instructions.
+
+require 'fileutils'
+require 'pathname'
+require 'digest/md5'
+require 'mini_magick'
+require 'fastimage'
+
+module Jekyll
+
+  class Picture < Liquid::Tag
+
+    def initialize(tag_name, markup, tokens)
+      @markup = markup
+      super
+    end
+
+    def render(context)
+
+      # Render any liquid variables in tag arguments and unescape template code
+      render_markup = Liquid::Template.parse(@markup).render(context).gsub(/\\\{\\\{|\\\{\\%/, '\{\{' => '{{', '\{\%' => '{%')
+
+      # Gather settings
+      site = context.registers[:site]
+      settings = site.config['picture']
+      markup = /^(?:(?<preset>[^\s.:\/]+)\s+)?(?<image_src>[^\s]+\.[a-zA-Z0-9]{3,4})\s*(?<source_src>(?:(source_[^\s.:\/]+:\s+[^\s]+\.[a-zA-Z0-9]{3,4})\s*)+)?(?<html_attr>[\s\S]+)?$/.match(render_markup)
+      preset = settings['presets'][ markup[:preset] ] || settings['presets']['default']
+
+      raise "Picture Tag can't read this tag. Try {% picture [preset] path/to/img.jpg [source_key: path/to/alt-img.jpg] [attr=\"value\"] %}." unless markup
+
+      # Assign defaults
+      settings['source'] ||= '.'
+      settings['output'] ||= 'generated'
+      settings['markup'] ||= 'picturefill'
+
+      # Prevent Jekyll from erasing our generated files
+      site.config['keep_files'] << settings['output'] unless site.config['keep_files'].include?(settings['output'])
+
+      # Deep copy preset for single instance manipulation
+      instance = Marshal.load(Marshal.dump(preset))
+
+      # Process alternate source images
+      source_src = if markup[:source_src]
+                     Hash[ *markup[:source_src].gsub(/:/, '').split ]
+                   else
+                     {}
+                   end
+
+      # Process html attributes
+      html_attr = if markup[:html_attr]
+                    Hash[ *markup[:html_attr].scan(/(?<attr>[^\s="]+)(?:="(?<value>[^"]+)")?\s?/).flatten ]
+                  else
+                    {}
+                  end
+
+      if instance['attr']
+        html_attr = instance.delete('attr').merge(html_attr)
+      end
+
+      if settings['markup'] == 'picturefill'
+        html_attr['data-picture'] = nil
+        html_attr['data-alt'] = html_attr.delete('alt')
+      end
+
+      html_attr_string = html_attr.inject('') { |string, attrs|
+        if attrs[1]
+          string << "#{attrs[0]}=\"#{attrs[1]}\" "
+        else
+          string << "#{attrs[0]} "
+        end
+      }
+
+      # Prepare ppi variables
+      ppi = if instance['ppi'] then instance.delete('ppi').sort.reverse else nil end
+      # this might work??? ppi = instance.delete('ppi'){ |ppi|  [nil] }.sort.reverse
+      ppi_sources = {}
+
+      # Switch width and height keys to the symbols that generate_image() expects
+      instance.each { |key, source|
+        raise "Preset #{key} is missing a width or a height" if !source['width'] and !source['height']
+        instance[key][:width] = instance[key].delete('width') if source['width']
+        instance[key][:height] = instance[key].delete('height') if source['height']
+      }
+
+      # Store keys in an array for ordering the instance sources
+      source_keys = instance.keys
+      # used to escape markdown parsing rendering below
+      markdown_escape = "\ "
+
+      # Raise some exceptions before we start expensive processing
+      raise "Picture Tag can't find the \"#{markup[:preset]}\" preset. Check picture: presets in _config.yml for a list of presets." unless preset
+      raise "Picture Tag can't find this preset source. Check picture: presets: #{markup[:preset]} in _config.yml for a list of sources." unless (source_src.keys - source_keys).empty?
+
+      # Process instance
+      # Add image paths for each source
+      instance.each_key { |key|
+        instance[key][:src] = source_src[key] || markup[:image_src]
+      }
+
+      # Construct ppi sources
+      # Generates -webkit-device-ratio and resolution: dpi media value for cross browser support
+      # Reference: http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/
+      if ppi
+        instance.each { |key, source|
+          ppi.each { |p|
+            if p != 1
+              ppi_key = "#{key}-x#{p}"
+
+              ppi_sources[ppi_key] = {
+                  :width => if source[:width] then (source[:width].to_f * p).round else nil end,
+                  :height => if source[:height] then (source[:height].to_f * p).round else nil end,
+                  'media' => if source['media']
+                               "#{source['media']} and (-webkit-min-device-pixel-ratio: #{p}), #{source['media']} and (min-resolution: #{(p * 96).round}dpi)"
+                             else
+                               "(-webkit-min-device-pixel-ratio: #{p}), (min-resolution: #{(p * 96).to_i}dpi)"
+                             end,
+                  :src => source[:src]
+              }
+
+              # Add ppi_key to the source keys order
+              source_keys.insert(source_keys.index(key), ppi_key)
+            end
+          }
+        }
+        instance.merge!(ppi_sources)
+      end
+
+      # Generate resized images
+      instance.each { |key, source|
+        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'] == 'picture'
+
+        source_tags = ''
+        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 = "<picture>\n"\
+                      "#{source_tags}"\
+                      "#{markdown_escape * 4}<img srcset=\"#{instance['source_default'][:generated_src]}\" #{html_attr_string}>\n"\
+                      "#{markdown_escape * 2}</picture>\n"
+
+      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, baseurl)
+      digest = Digest::MD5.hexdigest(File.read(File.join(site_source, image_source, instance[:src]))).slice!(0..5)
+
+      image_dir = File.dirname(instance[:src])
+      ext = File.extname(instance[:src])
+      basename = File.basename(instance[:src], ext)
+
+      size = FastImage.size(File.join(site_source, image_source, instance[:src]))
+      orig_width = size[0]
+      orig_height = size[1]
+      orig_ratio = orig_width*1.0/orig_height
+
+      gen_width = if instance[:width]
+                    instance[:width].to_f
+                  elsif instance[:height]
+                    orig_ratio * instance[:height].to_f
+                  else
+                    orig_width
+                  end
+      gen_height = if instance[:height]
+                     instance[:height].to_f
+                   elsif instance[:width]
+                     instance[:width].to_f / orig_ratio
+                   else
+                     orig_height
+                   end
+      gen_ratio = gen_width/gen_height
+
+      # Don't allow upscaling. If the image is smaller than the requested dimensions, recalculate.
+      if orig_width < gen_width || orig_height < gen_height
+        undersize = true
+        gen_width = if orig_ratio < gen_ratio then orig_width else orig_height * gen_ratio end
+        gen_height = if orig_ratio > gen_ratio then orig_height else orig_width/gen_ratio end
+      end
+
+      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)
+
+      # Generate resized files
+      unless File.exists?(gen_dest_file)
+
+        warn "Warning:".yellow + " #{instance[:src]} is smaller than the requested output file. It will be resized without upscaling." if undersize
+
+        #  If the destination directory doesn't exist, create it
+        FileUtils.mkdir_p(gen_dest_dir) unless File.exist?(gen_dest_dir)
+
+        # Let people know their images are being generated
+        puts "Generating #{gen_name}"
+
+        image = MiniMagick::Image.open(File.join(site_source, image_source, instance[:src]))
+        # Scale and crop
+        image.combine_options do |i|
+          i.resize "#{gen_width}x#{gen_height}^"
+          i.gravity "center"
+          i.crop "#{gen_width}x#{gen_height}+0+0"
+        end
+
+        image.write gen_dest_file
+      end
+
+      # Return path relative to the site root for html
+      Pathname.new(File.join(baseurl, image_dest, image_dir, gen_name)).cleanpath
+    end
+  end
+end
+
+Liquid::Template.register_tag('picture', Jekyll::Picture)

data/readme.md

@@ -0,0 +1,211 @@
+# Jekyll Picture Tag
+
+**Easy responsive images for Jekyll.**
+
+Jekyll Picture Tag is a liquid tag that adds responsive images to your [Jekyll](http://jekyllrb.com) static site. It follows the [picture element](http://picture.responsiveimages.org/) pattern, and polyfills older browsers with [Picturefill](https://github.com/scottjehl/picturefill). Jekyll Picture Tag automatically creates resized source images, is fully configurable, and covers all use cases — including art direction and resolution switching — with a little YAML configuration and a simple template tag.
+
+For non-responsive images in Jekyll, take a look at [Jekyll Img Tag](https://github.com/robwierzbowski/jekyll-img-tag).
+
+## Why use Jekyll Picture Tag?
+
+**Performance:** Static sites can be can be blazingly fast. If we're not using responsive images we're throwing those performance gains away by serving kilobytes of pixels a user will never see.
+
+**Proof:** The picture element covers more responsive image use cases than any other proposed solution. As a result, the markup is more verbose. This plugin shows that in practice picture can be easy for website authors to use and maintain.
+
+**Need more convincing?** Read [Tim Kadlec's](https://twitter.com/tkadlec) article [Why We Need Responsive Images](http://timkadlec.com/2013/06/why-we-need-responsive-images/). For an introduction to the picture element and responsive images in general see [Mo’ Pixels Mo’ Problems](http://alistapart.com/article/mo-pixels-mo-problems) and the follow up article [Ughck. Images](http://daverupert.com/2013/06/ughck-images/) by [Dave Rupert](https://twitter.com/davatron5000).
+
+## Installation
+
+Add `jekyll-picture-tag` to your Gemfile in the `:jekyll_plugins` group. For example:
+
+```ruby
+group :jekyll_plugins do
+  gem 'jekyll-picture-tag', '~> 0.2.3'
+end
+```
+
+It also requires an HTML5 Markdown parser. If you're not using one already, install [Redcarpet](https://github.com/vmg/redcarpet) and add `markdown: redcarpet` to your _config.yml.
+
+Once you have the requirements installed, copy picture_tag.rb into your Jekyll _plugins folder.
+
+## Usage
+
+There are three parts to Jekyll Picture Tag: 
+
+- [Polyfill](#polyfill)
+- [Liquid Tag](#liquid-tag)
+- [Configuration](#configuration)
+
+### Polyfill
+
+For full browser support, the `picture` markup requires Scott Jehl's [Picturefill](https://github.com/scottjehl/picturefill) polyfill. Download the library and add the script to your site.
+
+The Jekyll Picture Tag requires Picturefill 2.0 and above. If you want to use Picturefill 1.x, you must use [Jekyll Picture Tag 0.2.2](https://github.com/robwierzbowski/jekyll-picture-tag/tree/0.2.2)
+
+### Liquid Tag
+
+```
+{% picture [preset] path/to/img.jpg [source_key: path/to/alt/img.jpg] [attribute="value"] %}
+```
+
+The tag takes a mix of user input and pointers to configuration settings. 
+
+#### picture
+
+Tells Liquid this is a Jekyll Picture Tag.
+
+#### preset
+
+Optionally specify a picture [preset](#presets) to use, or leave blank for the `default` preset.
+
+#### path/to/img.jpg
+
+The base image that will be resized for your picture sources. Can be a jpeg, png, or gif.
+
+#### source_key: path/to/alt/img.jpg
+
+Optionally specify an alternate base image for a specific picture source. This is one of of picture's strongest features, often reffered to as the [art direction use case](http://usecases.responsiveimages.org/#art-direction). 
+
+#### attribute="value"
+
+Optionally specify any number of HTML attributes. These will be merged with any [attributes you've set in a preset](#attr). An attribute set in a tag will override the same attribute set in a preset.
+
+You can set any attribute except for `data-picture`, `data-alt`, `data-src`, and `data-media`.
+
+### Configuration
+
+Jekyll Picture Tag stores settings in an `picture` key in your _config.yml. It takes a minute to set up your presets, but after that generating complex markup with a liquid tag is easy.
+
+**Example settings**
+
+```yml
+picture:
+  source: "assets/images/_fullsize"
+  output: "generated"
+  markup: "picture"
+  presets:
+    default:
+      ...
+    main:
+      ...
+    gallery:
+      ...
+```
+
+**Example preset**
+
+```yml
+gallery:
+  ppi: [1, 1.5]
+  attr:
+    class: "gallery-pict"
+    itemprop: "image"
+  source_medium:
+    media: "(min-width: 40em)"
+    width: "600"
+    height: "300"
+  source_default: 
+    width: "300"
+```
+
+#### source
+
+To make writing tags easier you can specify a source directory for your assets. Base images in the tag will be relative to the `source` directory. 
+
+For example, if `source` is set to `assets/images/_fullsize`, the tag `{% picture enishte/portrait.jpg alt="An unsual picture" %}` will look for a file at `assets/images/_fullsize/enishte/portrait.jpg`.
+
+Defaults to the site source directory.
+
+#### output
+
+Jekyll Picture Tag generates resized images to the `output` directory in your compiled site. The organization of your `source` directory is maintained in the output directory. 
+
+Defaults to `{compiled Jekyll site}/generated`.
+
+*__NOTE:__ `output` must be in a directory that contains other files or it will be erased. This is a [known bug](https://github.com/mojombo/jekyll/issues/1297) in Jekyll.*
+
+#### markup
+
+Choose `picture` to output markup based on the `<picture>` element. Future options may include `srcset` but have not yet been implemented.
+
+#### presets
+
+Presets contain reusable settings for a Jekyll Picture Tag. Each is made up of a list of sources, and an optional attributes list and ppi array.
+
+For example, a `gallery` preset might configure the picture sources for all responsive gallery images on your site, and set a class and some required metadata attributes. If the design changes, you can edit the `gallery` preset and the new settings will apply to every tag that references it.
+
+The `default` preset will be used if no preset is specified in the liquid tag, and is required. A preset name can't contain the `.`, `:`, or `/` characters.
+
+#### attr
+
+Optionally add a list of html attributes to add to the main picturefill span or picture element when the preset is used.
+
+Set the value of standalone attributes to `nil`. You can set any attribute except for `data-picture`, `data-alt`, `data-src`, and `data-media`.
+
+An attribute set in a tag will override the same attribute set in a preset.
+
+#### ppi
+
+Optionally add an array of resolutions to automatically generate high ppi images and sources.
+
+For example, the setting `[1, 1.5, 2]` will create sources that switch to 1.5x sized images on devices with a minimum resolution of 1.5dppx, and 2x images on devices with a minimum resolution of 2dppx. For finer grained control omit `ppi` and write resolution sources by hand.
+
+#### sources
+
+The picture tag uses multiple source elements with individual `src` and `media` attributes. The first source with a matching `media` attribute will be used. Each `source_*` becomes a source element in HTML.
+
+All sources must be prefixed with `source_`. A `source_default` is required. Source names can't contain the `.`, `:`, or `/` characters.
+
+Remember to arrange your sources from most restrictive `media` to the least restrictive. `source_default` does not accept a `media` key, and should always be last.
+
+#### media
+
+Specify a CSS media query in quotes. Each source except for `source_default` requires a `media` attribute. The first source with a matching media attribute will be displayed. You can use any CSS media query.
+
+#### width and height
+
+Set a pixel width and height to resize each source's image appropriately. A single value will scale proportionately; setting both will scale and crop.
+
+## Using Liquid variables and JavaScript templating
+
+You can use liquid variables in a picture tag:
+
+```html
+{% picture {{ post.featured_image }} alt="our project" %}
+```
+
+If you're using a JavaScript templating library such as Handlebars.js, the templating expression's opening braces must be escaped with backslashes like `\{\{` or `\{\%`. They'll be output as normal `{{ }}` expressions in HTML:
+
+```
+{% picture {{ post.featured_image }} alt="\{\{ user_name }}" %}.
+```
+
+## Managing Generated Images
+
+Jekyll Picture Tag creates resized versions of your images when you build the site. It uses a smart caching system to speed up site compilation, and re-uses images as much as possible.
+
+Try to use a base image that is larger than the largest resized image you need. Jekyll Picture Tag will warn you if a base image is too small, and won't upscale images.
+
+By specifying a `source` directory that is ignored by Jekyll you can prevent huge base images from being copied to the compiled site. For example, `source: assets/images/_fullsize` and `output: generated` will result in a compiled site that contains resized images but not the originals.
+
+The `output` directory is never deleted by Jekyll. You may want to manually clean it every once in a while to remove unused images.
+
+Responsive images are a good first step to improve performance, but you should still use a build process to optimize site assets before deploying. If you're a cool kid, take a look at [Yeoman](http://yeoman.io/) and [generator-jekyllrb](https://github.com/robwierzbowski/generator-jekyllrb).
+
+## Contribute
+
+Report bugs and feature proposals in the [Github issue tracker](https://github.com/robwierzbowski/jekyll-picture-tag/issues). In lieu of a formal styleguide, take care to maintain the existing coding style. 
+
+## Release History
+
+0.2.2, Aug 2, 2013: Bugfixes.  
+0.2.1, July 17, 2013: Refactor again, add Liquid parsing.  
+0.2.0, July 14, 2013: Rewrite code base, bring in line with Jekyll Image Tag.  
+0.1.1, July 5, 2013: Quick round of code improvements.  
+0.1.0, July 5, 2013: Initial release.
+
+## License
+
+[BSD-NEW](http://en.wikipedia.org/wiki/BSD_License)
+
+[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/robwierzbowski/jekyll-picture-tag/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

metadata

@@ -0,0 +1,133 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-picture-tag
+version: !ruby/object:Gem::Version
+  version: 0.2.3
+platform: ruby
+authors:
+- Robert Wierzbowski
+- Brendan Tobolaski
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-03-27 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '1.8'
+- !ruby/object:Gem::Dependency
+  name: rake
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '10.0'
+- !ruby/object:Gem::Dependency
+  name: mini_magick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 3.8.0
+- !ruby/object:Gem::Dependency
+  name: fastimage
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.6.4
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: 1.6.4
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
+description: |2
+      Jekyll Picture Tag is a liquid tag that adds responsive images to your Jekyll static site. It follows the picture
+      element pattern, and polyfills older browsers with Picturefill. Jekyll Picture Tag automatically creates resized
+      source images, is fully configurable, and covers all use cases — including art direction and resolution switching —
+      with a little YAML configuration and a simple template tag.
+email:
+- hello@robwierzbowski.com
+- brendan@tobolaski.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".gitignore"
+- Gemfile
+- LICENSE.txt
+- Rakefile
+- bin/console
+- bin/setup
+- examples/_config.yml
+- examples/layout.html
+- examples/output.html
+- examples/post.md
+- jekyll-picture-tag.gemspec
+- lib/jekyll-picture-tag.rb
+- readme.md
+homepage: https://github.com/robwierzbowski/jekyll-picture-tag
+licenses:
+- BSD-3-Clause
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5
+signing_key: 
+specification_version: 4
+summary: Easy responsive images for Jekyll.
+test_files: []