jekyll-responsive_image 0.9.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: b473c6730697db2d34bf8a02b5c715abe4a35149
+  data.tar.gz: aa1bfa551cd86999fa2cb4b253b038c1d7ce7185
+SHA512:
+  metadata.gz: 5e22114a262175eea4826c6d73419c9709bc936507b7b5a2c13c26c9510a5bb44611308a44b64c379936a760b1e3188efd145c3fc52e3914a6c4bbcd78c60a23
+  data.tar.gz: 37da18d95c3579ba4cea87190dca29c2e76936e9181ca9af678993b3e69dce6b222d905c73e0be43c2dcc0aca7aaf87434360c045864e23c1b432689fbce5c5c

data/.coveralls.yml

@@ -0,0 +1 @@
+service_name: travis-ci

data/.gitignore

@@ -0,0 +1 @@
+Gemfile.lock

data/.travis.yml

@@ -0,0 +1,8 @@
+language: ruby
+bundler_args: --without debug
+script: bundle exec rake features_with_coveralls
+rvm:
+  - 2.1.0
+  - 2.0.0
+  - 1.9.3
+  - rbx-2

data/Gemfile

@@ -0,0 +1,9 @@
+source 'https://rubygems.org/'
+gemspec
+
+group :development do
+  gem 'rake'
+  gem 'cucumber', '~> 1.3'
+
+  gem 'coveralls', :require => false
+end

data/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2014 Joseph Wynn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

data/README.md

@@ -0,0 +1,67 @@
+# Jekyll Responsive Images
+
+Jekyll Responsive Images is a [Jekyll](http://jekyllrb.com/) plugin and utility for automatically resizing images. Its intended use is for sites which want to display responsive images using something like [`srcset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#Specifications) or [Imager.js](https://github.com/BBC-News/Imager.js/).
+
+[![Build Status](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-images.svg?branch=master)](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-images)
+[![Coverage Status](https://img.shields.io/coveralls/wildlyinaccurate/jekyll-responsive-images.svg)](https://coveralls.io/r/wildlyinaccurate/jekyll-responsive-images)
+[![Dependency Status](https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images.svg)](https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images)
+
+## Installation
+
+Install the gem yourself
+
+```
+$ gem install jekyll-responsive_image
+```
+
+Or simply add it to your Jekyll `_config.yml`:
+
+```yaml
+gems: [jekyll-responsive_image]
+```
+
+## Configuration
+
+An example configuration is below.
+
+```yaml
+responsive_image:
+  template: '_includes/responsive-image.html' # Path to the template to render. Required.
+
+  # An array of resize configurations. When this array is empty (or not specified),
+  # no resizing will take place.
+  sizes:
+    - width: 480 # How wide the resized image will be. Required
+    - width: 800
+      quality: 90 # JPEG quality. Optional.
+    - width: 1400
+```
+
+## Usage
+
+Replace your images with the `responsive_image` tag, specifying a path to the image.
+
+```
+{% responsive_image path: assets/my-file.jpg %}
+```
+
+Any extra attributes will be passed to the template.
+
+```
+{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}
+```
+
+Create a template to suit your needs. A basic template example is below.
+
+```html
+<img src="/{{ path }}"
+     alt="{{ alt }}"
+     title="{{ title }}
+
+     {% if resized %}
+         srcset="{% for i in resized %}
+             /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
+         {% endfor %}"
+     {% endif %}
+>
+```

data/Rakefile

@@ -0,0 +1,28 @@
+require 'bundler'
+
+begin
+  Bundler.setup(:default, :development)
+rescue Bundler::BundlerError => e
+  $stderr.puts e.message
+  $stderr.puts "Run `bundle install` to install missing gems"
+  exit e.status_code
+end
+
+require 'rake'
+require 'jekyll/responsive_image/version'
+require 'cucumber/rake/task'
+require 'coveralls/rake/task'
+
+Cucumber::Rake::Task.new(:features)
+
+Coveralls::RakeTask.new
+task :features_with_coveralls => [:features, 'coveralls:push']
+
+task :default => [:features]
+
+task :release do |t|
+  system "gem build jekyll-responsive_image.gemspec"
+  system "git tag v#{Jekyll::ResponsiveImage::VERSION}"
+  system "git push --tags"
+  system "gem push jekyll-responsive_image-#{Jekyll::ResponsiveImage::VERSION}.gem"
+end

data/features/fixtures/_includes/responsive-image.html

@@ -0,0 +1,5 @@
+<img alt="{{ alt }}" src="/{{ path }}"{% if resized %} srcset="
+    {% for i in resized %}
+        /{{ i.path }} {{ i.width }}w{% if forloop.last == false %},{% endif %}
+    {% endfor %}
+"{% endif %}>

data/features/responsive-image.feature

@@ -0,0 +1,47 @@
+Feature: Jekyll responsive-image tag
+  As a Jekyll template developer
+  I want to include responsive images in my page
+  In order to best cater for devices of all sizes
+
+  Scenario: Simple image tag
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+      """
+    And I have a file "index.html" with:
+      """
+      {% responsive_image path: assets/test.png alt: Foobar %}
+      """
+    When I run Jekyll
+    Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\">" in "_site/index.html"
+
+  Scenario: UTF-8 alt attribute
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+      """
+    And I have a file "index.html" with:
+      """
+      {% responsive_image path: assets/test.png alt: "かっこいい！ ジェケルが好きです！" %}
+      """
+    When I run Jekyll
+    Then I should see "<img alt=\"かっこいい！ ジェケルが好きです！\" src=\"/assets/test.png\">" in "_site/index.html"
+
+  Scenario: Image with multiple sizes
+    Given I have a responsive_image configuration with:
+      """
+        template: _includes/responsive-image.html
+        sizes:
+          - width: 100
+          - width: 200
+      """
+    And I have a file "index.html" with:
+      """
+      {% responsive_image path: assets/test.png %}
+      """
+    When I run Jekyll
+    Then I should see "<img alt=\"\" src=\"/assets/test.png\"" in "_site/index.html"
+    And I should see "/assets/resized/test-100x50.png 100w" in "_site/index.html"
+    And I should see "/assets/resized/test-200x100.png 200w" in "_site/index.html"
+    And the file "assets/resized/test-100x50.png" should exist
+    And the file "assets/resized/test-200x100.png" should exist

data/features/step_definitions/jekyll_steps.rb

@@ -0,0 +1,26 @@
+When /^I run Jekyll$/ do
+  run_jekyll
+end
+
+Given /^I have a responsive_image configuration with:$/ do |config|
+  write_file('_config.yml', "responsive_image:\n#{config}")
+end
+
+Given /^I have a file "(.+)" with:$/ do |path, contents|
+  write_file(path, "---\n---\n#{contents}")
+end
+
+Then /^I should see "(.+)" in "(.*)"$/ do |text, file|
+  assert_match(Regexp.new(text), File.open(file).readlines.join)
+end
+
+Then /^the file "(.+)" should exist$/ do |path|
+  assert File.exists?(path)
+end
+
+def write_file(path, contents)
+  File.open(path, 'w') do |f|
+    f.write(contents)
+    f.close
+  end
+end

data/features/support/env.rb

@@ -0,0 +1,20 @@
+begin
+  require 'coveralls' if ENV['CI']
+rescue LoadError
+  # ignore
+end
+
+require 'test/unit'
+require 'jekyll/responsive_image'
+
+TEST_DIR = File.join('/', 'tmp', 'jekyll')
+
+def run_jekyll(options = {})
+  options['source'] ||= TEST_DIR
+  options['destination'] ||= File.join(TEST_DIR, '_site')
+
+  options = Jekyll.configuration(options)
+
+  site = Jekyll::Site.new(options)
+  site.process
+end

data/features/support/hooks.rb

@@ -0,0 +1,13 @@
+Before do
+  FileUtils.rm_rf(TEST_DIR) if File.exist?(TEST_DIR)
+  FileUtils.mkdir_p(TEST_DIR)
+
+  fixtures = File.expand_path('../../fixtures', __FILE__)
+  FileUtils.cp_r(Dir.glob("#{fixtures}/*"), TEST_DIR)
+
+  Dir.chdir(TEST_DIR)
+end
+
+at_exit do
+  FileUtils.rm_rf(TEST_DIR) if File.exist?(TEST_DIR)
+end

data/index.html

@@ -0,0 +1 @@
+  {% responsive_image path: assets/test.jpg %}

data/jekyll-responsive_image.gemspec

@@ -0,0 +1,27 @@
+# -*- encoding: utf-8 -*-
+lib = File.expand_path('../lib/', __FILE__)
+$:.unshift lib unless $:.include?(lib)
+
+require 'jekyll/responsive_image/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = 'jekyll-responsive_image'
+  spec.version       = Jekyll::ResponsiveImage::VERSION
+  spec.authors       = ['Joseph Wynn']
+  spec.email         = ['joseph@wildlyinaccurate.com']
+  spec.summary       = 'Responsive images for Jekyll via srcset'
+  spec.homepage      = 'https://github.com/wildlyinaccurate/jekyll-responsive-image'
+  spec.licenses      = ['MIT']
+  spec.description   = %q{
+    Jekyll Responsive Images is a Jekyll plugin and utility for automatically resizing images.
+    Its intended use is for sites which want to display responsive images using something like srcset or Imager.js.
+  }
+
+  spec.files        = `git ls-files`.split($/)
+  spec.test_files   = `git ls-files -- {test,spec,features}/*`.split("\n")
+  spec.executables  = []
+  spec.require_path = 'lib'
+
+  spec.add_runtime_dependency 'jekyll', '~> 2.0'
+  spec.add_runtime_dependency 'rmagick'
+end

data/lib/jekyll/responsive_image.rb

@@ -0,0 +1,100 @@
+require 'jekyll'
+require 'rmagick'
+
+module Jekyll
+  class ResponsiveImage
+    class Tag < Liquid::Tag
+      DEFAULT_QUALITY = 85
+
+      def initialize(tag_name, markup, tokens)
+        super
+
+        @attributes = {}
+        @markup = markup
+
+        @markup.scan(::Liquid::TagAttributes) do |key, value|
+          # Strip quotes from around attribute values
+          @attributes[key] = value.gsub(/^['"]|['"]$/, '')
+        end
+      end
+
+      def resize_image(path, config)
+        sizes = config['sizes']
+
+        return if sizes.empty?
+
+        output_dir = config['output_dir']
+        ensure_output_dir_exists!(output_dir)
+
+        resized = []
+        img = Magick::Image::read(path).first
+
+        sizes.each do |size|
+          width = size['width']
+          ratio = width.to_f / img.columns.to_f
+          height = (img.rows.to_f * ratio).round
+
+          filename = resized_filename(path, width, height)
+          newpath = "#{output_dir}/#{filename}"
+
+          next unless needs_resizing?(img, width)
+
+          resized.push({
+            'width'  => width,
+            'height' => height,
+            'path'   => newpath,
+          })
+
+          # Don't resize images more than once
+          next if File.exists?(newpath)
+
+          Jekyll.logger.info "Generating #{newpath}"
+
+          i = img.scale(ratio)
+          i.write(newpath) do |f|
+            f.quality = size['quality'] || DEFAULT_QUALITY
+          end
+
+          i.destroy!
+        end
+
+        resized
+      end
+
+      # Insert resize information into a file path
+      #
+      #   resized_filename(/foo/bar/file.name.jpg, 500, 300)
+      #     => /foo/bar/file.name-500x300.jpg
+      #
+      def resized_filename(path, width, height)
+        File.basename(path).sub(/\.([^.]+)$/, "-#{width}x#{height}.\\1")
+      end
+
+      def needs_resizing?(img, width)
+        img.columns > width
+      end
+
+      def ensure_output_dir_exists!(dir)
+        unless Dir.exists?(dir)
+          Jekyll.logger.info "Creating output directory #{dir}"
+          Dir.mkdir(dir)
+        end
+      end
+
+      def render(context)
+        config = context.registers[:site].config['responsive_image']
+        config['output_dir'] ||= 'assets/resized'
+        config['sizes'] ||= []
+
+        @attributes['resized'] = resize_image(@attributes['path'], config)
+
+        partial = File.read(config['template'])
+        template = Liquid::Template.parse(partial)
+
+        template.render!(@attributes)
+      end
+    end
+  end
+end
+
+Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag)

data/lib/jekyll/responsive_image/version.rb

@@ -0,0 +1,5 @@
+module Jekyll
+  class ResponsiveImage
+    VERSION = '0.9.0'.freeze
+  end
+end

data/test-index.html

@@ -0,0 +1 @@
+  {% responsive_image path: assets/test.jpg %}

metadata

@@ -0,0 +1,92 @@
+--- !ruby/object:Gem::Specification
+name: jekyll-responsive_image
+version: !ruby/object:Gem::Version
+  version: 0.9.0
+platform: ruby
+authors:
+- Joseph Wynn
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2014-12-06 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: jekyll
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '2.0'
+- !ruby/object:Gem::Dependency
+  name: rmagick
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: "\n    Jekyll Responsive Images is a Jekyll plugin and utility for automatically
+  resizing images.\n    Its intended use is for sites which want to display responsive
+  images using something like srcset or Imager.js.\n  "
+email:
+- joseph@wildlyinaccurate.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- ".coveralls.yml"
+- ".gitignore"
+- ".travis.yml"
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- features/fixtures/_includes/responsive-image.html
+- features/fixtures/assets/test.png
+- features/responsive-image.feature
+- features/step_definitions/jekyll_steps.rb
+- features/support/env.rb
+- features/support/hooks.rb
+- index.html
+- jekyll-responsive_image.gemspec
+- lib/jekyll/responsive_image.rb
+- lib/jekyll/responsive_image/version.rb
+- test-index.html
+homepage: https://github.com/wildlyinaccurate/jekyll-responsive-image
+licenses:
+- MIT
+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.2.2
+signing_key: 
+specification_version: 4
+summary: Responsive images for Jekyll via srcset
+test_files: []