From 03356da52d128561d2f8cc681a90773781673007 Mon Sep 17 00:00:00 2001 From: Joseph Wynn Date: Wed, 28 Dec 2016 22:56:27 +1300 Subject: [PATCH] Rename gem to jekyll-responsive-image This PR also drops support for Ruby <2.0 --- .travis.yml | 1 - Gemfile | 8 -------- README.md | 11 ++++++----- Rakefile | 2 +- compositor.json | 4 ++-- features/support/env.rb | 2 +- ...gemspec => jekyll-responsive-image.gemspec | 19 +++++++------------ lib/jekyll-responsive-image.rb | 19 +++++++++++++++++++ .../block.rb | 0 .../config.rb | 0 .../extra_image_generator.rb | 0 .../image_processor.rb | 0 .../render_cache.rb | 0 .../renderer.rb | 0 .../resize_handler.rb | 0 .../tag.rb | 0 .../utils.rb | 0 .../version.rb | 2 +- lib/jekyll/responsive_image.rb | 19 ------------------- 19 files changed, 37 insertions(+), 50 deletions(-) rename jekyll-responsive_image.gemspec => jekyll-responsive-image.gemspec (51%) create mode 100644 lib/jekyll-responsive-image.rb rename lib/{jekyll/responsive_image => jekyll-responsive-image}/block.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/config.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/extra_image_generator.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/image_processor.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/render_cache.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/renderer.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/resize_handler.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/tag.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/utils.rb (100%) rename lib/{jekyll/responsive_image => jekyll-responsive-image}/version.rb (62%) delete mode 100644 lib/jekyll/responsive_image.rb diff --git a/.travis.yml b/.travis.yml index 96f6e15..ff0caa9 100644 --- a/.travis.yml +++ b/.travis.yml @@ -7,4 +7,3 @@ rvm: - 2.2 - 2.1 - 2.0 - - 1.9 diff --git a/Gemfile b/Gemfile index 3318990..d8db122 100644 --- a/Gemfile +++ b/Gemfile @@ -8,12 +8,4 @@ group :development do gem 'test-unit', '~> 3.1' gem 'coveralls', :require => false - - platform :ruby_19 do - gem 'mime-types', '>= 2.0', '< 3.0' - gem 'rest-client', '>= 1.0', '< 2.0' - gem 'simplecov', '>= 0.10', '< 0.12' - gem 'term-ansicolor', '1.3.2' - gem 'tins', '1.6.0' - end end diff --git a/README.md b/README.md index 59ea3ae..76b57c3 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ -# Jekyll Responsive Images +# jekyll-responsive-image -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/). +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://img.shields.io/travis/wildlyinaccurate/jekyll-responsive-image.svg?style=flat-square)](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image) [![Coverage Status](https://img.shields.io/coveralls/wildlyinaccurate/jekyll-responsive-image.svg?style=flat-square)](https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master) @@ -11,16 +11,17 @@ Jekyll Responsive Images is a [Jekyll](http://jekyllrb.com/) plugin and utility First, install the gem: ``` -$ gem install jekyll-responsive_image +$ gem install jekyll-responsive-image ``` Then you can either add it to the `gems` section of your `_config.yml`: ```yaml -gems: [jekyll/responsive_image] +gems: + - jekyll-responsive-image ``` -Or you can copy the contents of [`responsive_image.rb`](lib/jekyll/responsive_image.rb) into your `_plugins` directory. +Or you can copy the contents of [`responsive_image.rb`](lib/jekyll-responsive-image.rb) into your `_plugins` directory. ## Configuration diff --git a/Rakefile b/Rakefile index 9d00a37..9726ac0 100644 --- a/Rakefile +++ b/Rakefile @@ -9,7 +9,7 @@ rescue Bundler::BundlerError => e end require 'rake' -require 'jekyll/responsive_image/version' +require 'jekyll-responsive-image/version' require 'cucumber/rake/task' require 'coveralls/rake/task' diff --git a/compositor.json b/compositor.json index b7af872..cafce8e 100644 --- a/compositor.json +++ b/compositor.json @@ -119,7 +119,7 @@ "metadata": { "source": "github.readme" }, - "html": "

Jekyll Responsive Images

\n

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.

\n

\n\n

\n

Installation

\n

First, install the gem:

\n
$ gem install jekyll-responsive_image

Then you can either add it to the gems section of your _config.yml:

\n
gems: [jekyll/responsive_image]

Or you can copy the contents of responsive_image.rb into your _plugins directory.

\n

Configuration

\n

An example configuration is below.

\n
responsive_image:\n  # [Required]\n  # Path to the image template.\n  template: _includes/responsive-image.html\n\n  # [Optional, Default: 85]\n  # Quality to use when resizing images.\n  default_quality: 90\n\n  # [Optional, Default: []]\n  # An array of resize configuration objects. Each object must contain at least\n  # a `width` value.\n  sizes:\n    - width: 480  # [Required] How wide the resized image will be.\n      quality: 80 # [Optional] Overrides default_quality for this size.\n    - width: 800\n    - width: 1400\n      quality: 90\n\n  # [Optional, Default: assets]\n  # The base directory where assets are stored. This is used to determine the\n  # `dirname` value in `output_path_format` below.\n  base_path: assets\n\n  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]\n  # The template used when generating filenames for resized images. Must be a\n  # relative path.\n  #\n  # Parameters available are:\n  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)\n  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)\n  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)\n  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)\n  #   %{width}       Width of the resized image\n  #   %{height}      Height of the resized image\n  #\n  output_path_format: assets/resized/%{width}/%{basename}\n\n  # By default, only images referenced by the responsive_image and responsive_image_block\n  # tags are resized. Here you can set a list of paths or path globs to resize other\n  # images. This is useful for resizing images which will be referenced from stylesheets.\n  extra_images:\n    - assets/foo/bar.png\n    - assets/bgs/*.png\n    - assets/avatars/*.{jpeg,jpg}

Usage

\n

Replace your images with the responsive_image tag, specifying the path to the image in the path attribute.

\n
{% responsive_image path: assets/my-file.jpg %}

You can override the template on a per-image basis by specifying the template attribute.

\n
{% responsive_image path: assets/my-file.jpg template: _includes/another-template.html %}

Any extra attributes will be passed straight to the template as variables.

\n
{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}

Liquid variables as attributes

\n

You can use Liquid variables as attributes with the responsive_image_block tag. This tag works in exactly the same way as the responsive_image tag, but is implemented as a block tag to allow for more complex logic.

\n
\n

Important! The attributes in the responsive_image_block tag are parsed as YAML, so whitespace and indentation are significant!

\n
\n
{% assign path = 'assets/test.png' %}\n{% assign alt = 'Lorem ipsum...' %}\n\n{% responsive_image_block %}\n    path: {{ path }}\n    alt: {{ alt }}\n    {% if title %}\n    title: {{ title }}\n    {% endif %}\n{% endresponsive_image_block %}

Template

\n

You will need to create a template in order to use the responsive_image tag. Below are some sample templates to get you started.

\n

Responsive images with srcset

\n
{% capture srcset %}\n    {% for i in resized %}\n        /{{ i.path }} {{ i.width }}w,\n    {% endfor %}\n{% endcapture %}\n\n<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">

Responsive images with <picture>

\n
<picture>\n    {% for i in resized %}\n        <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">\n    {% endfor %}\n    <img src="/{{ path }}">\n</picture>

Responsive images using Imager.js

\n
\n

Note: This template assumes an output_path_format of assets/resized/%{width}/%{basename}

\n
\n
{% assign smallest = resized | sort: 'width' | first %}\n\n<div class="responsive-image">\n    <img class="responsive-image__placeholder" src="/{{ smallest.path }}">\n    <div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>\n</div>\n\n<script>\n    new Imager('.responsive-image__delayed', {\n        availableWidths: [{{ resized | map: 'width' | join: ', ' }}]\n        onImagesReplaced: function() {\n            $('.responsive-image__placeholder').hide();\n        }\n    });\n</script>

Template Variables

\n

The following variables are available in the template:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
VariableTypeDescription
pathStringThe path of the unmodified image. This is always the same as the path attribute passed to the tag.
resizedArrayAn array of all the resized images. Each image is an Image Object.
originalObjectAn Image Object containing information about the original image.
*StringAny other attributes will be passed to the template verbatim as strings.
\n

Image Objects

\n

Image objects (like original and each object in resized) contain the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
VariableTypeDescription
pathStringThe path to the image.
widthIntegerThe width of the image.
heightIntegerThe height of the image.
basenameStringBasename of the file (assets/some-file.jpg => some-file.jpg).
dirnameStringDirectory of the file relative to base_path (assets/sub/dir/some-file.jpg => sub/dir).
filenameStringBasename without the extension (assets/some-file.jpg => some-file).
extensionStringExtension of the file (assets/some-file.jpg => jpg).
\n" + "html": "

Jekyll Responsive Images

\n

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.

\n

\n\n

\n

Installation

\n

First, install the gem:

\n
$ gem install jekyll-responsive_image

Then you can either add it to the gems section of your _config.yml:

\n
gems: [jekyll-responsive-image]

Or you can copy the contents of responsive_image.rb into your _plugins directory.

\n

Configuration

\n

An example configuration is below.

\n
responsive_image:\n  # [Required]\n  # Path to the image template.\n  template: _includes/responsive-image.html\n\n  # [Optional, Default: 85]\n  # Quality to use when resizing images.\n  default_quality: 90\n\n  # [Optional, Default: []]\n  # An array of resize configuration objects. Each object must contain at least\n  # a `width` value.\n  sizes:\n    - width: 480  # [Required] How wide the resized image will be.\n      quality: 80 # [Optional] Overrides default_quality for this size.\n    - width: 800\n    - width: 1400\n      quality: 90\n\n  # [Optional, Default: assets]\n  # The base directory where assets are stored. This is used to determine the\n  # `dirname` value in `output_path_format` below.\n  base_path: assets\n\n  # [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]\n  # The template used when generating filenames for resized images. Must be a\n  # relative path.\n  #\n  # Parameters available are:\n  #   %{dirname}     Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)\n  #   %{basename}    Basename of the file (assets/some-file.jpg => some-file.jpg)\n  #   %{filename}    Basename without the extension (assets/some-file.jpg => some-file)\n  #   %{extension}   Extension of the file (assets/some-file.jpg => jpg)\n  #   %{width}       Width of the resized image\n  #   %{height}      Height of the resized image\n  #\n  output_path_format: assets/resized/%{width}/%{basename}\n\n  # By default, only images referenced by the responsive_image and responsive_image_block\n  # tags are resized. Here you can set a list of paths or path globs to resize other\n  # images. This is useful for resizing images which will be referenced from stylesheets.\n  extra_images:\n    - assets/foo/bar.png\n    - assets/bgs/*.png\n    - assets/avatars/*.{jpeg,jpg}

Usage

\n

Replace your images with the responsive_image tag, specifying the path to the image in the path attribute.

\n
{% responsive_image path: assets/my-file.jpg %}

You can override the template on a per-image basis by specifying the template attribute.

\n
{% responsive_image path: assets/my-file.jpg template: _includes/another-template.html %}

Any extra attributes will be passed straight to the template as variables.

\n
{% responsive_image path: assets/image.jpg alt: "Lorem ipsum..." title: "Lorem ipsum..." %}

Liquid variables as attributes

\n

You can use Liquid variables as attributes with the responsive_image_block tag. This tag works in exactly the same way as the responsive_image tag, but is implemented as a block tag to allow for more complex logic.

\n
\n

Important! The attributes in the responsive_image_block tag are parsed as YAML, so whitespace and indentation are significant!

\n
\n
{% assign path = 'assets/test.png' %}\n{% assign alt = 'Lorem ipsum...' %}\n\n{% responsive_image_block %}\n    path: {{ path }}\n    alt: {{ alt }}\n    {% if title %}\n    title: {{ title }}\n    {% endif %}\n{% endresponsive_image_block %}

Template

\n

You will need to create a template in order to use the responsive_image tag. Below are some sample templates to get you started.

\n

Responsive images with srcset

\n
{% capture srcset %}\n    {% for i in resized %}\n        /{{ i.path }} {{ i.width }}w,\n    {% endfor %}\n{% endcapture %}\n\n<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">

Responsive images with <picture>

\n
<picture>\n    {% for i in resized %}\n        <source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">\n    {% endfor %}\n    <img src="/{{ path }}">\n</picture>

Responsive images using Imager.js

\n
\n

Note: This template assumes an output_path_format of assets/resized/%{width}/%{basename}

\n
\n
{% assign smallest = resized | sort: 'width' | first %}\n\n<div class="responsive-image">\n    <img class="responsive-image__placeholder" src="/{{ smallest.path }}">\n    <div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>\n</div>\n\n<script>\n    new Imager('.responsive-image__delayed', {\n        availableWidths: [{{ resized | map: 'width' | join: ', ' }}]\n        onImagesReplaced: function() {\n            $('.responsive-image__placeholder').hide();\n        }\n    });\n</script>

Template Variables

\n

The following variables are available in the template:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
VariableTypeDescription
pathStringThe path of the unmodified image. This is always the same as the path attribute passed to the tag.
resizedArrayAn array of all the resized images. Each image is an Image Object.
originalObjectAn Image Object containing information about the original image.
*StringAny other attributes will be passed to the template verbatim as strings.
\n

Image Objects

\n

Image objects (like original and each object in resized) contain the following properties:

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
VariableTypeDescription
pathStringThe path to the image.
widthIntegerThe width of the image.
heightIntegerThe height of the image.
basenameStringBasename of the file (assets/some-file.jpg => some-file.jpg).
dirnameStringDirectory of the file relative to base_path (assets/sub/dir/some-file.jpg => sub/dir).
filenameStringBasename without the extension (assets/some-file.jpg => some-file).
extensionStringExtension of the file (assets/some-file.jpg => jpg).
\n" }, { "component": "footer", @@ -135,4 +135,4 @@ ] } ] -} \ No newline at end of file +} diff --git a/features/support/env.rb b/features/support/env.rb index d686c8e..f305609 100644 --- a/features/support/env.rb +++ b/features/support/env.rb @@ -4,7 +4,7 @@ if ENV['CI'] end require 'test/unit/assertions' -require 'jekyll/responsive_image' +require 'jekyll-responsive-image' TEST_DIR = File.join('/', 'tmp', 'jekyll') diff --git a/jekyll-responsive_image.gemspec b/jekyll-responsive-image.gemspec similarity index 51% rename from jekyll-responsive_image.gemspec rename to jekyll-responsive-image.gemspec index eb75129..c78667c 100644 --- a/jekyll-responsive_image.gemspec +++ b/jekyll-responsive-image.gemspec @@ -2,31 +2,26 @@ lib = File.expand_path('../lib/', __FILE__) $:.unshift lib unless $:.include?(lib) -require 'jekyll/responsive_image/version' +require 'jekyll-responsive-image/version' Gem::Specification.new do |spec| - spec.name = 'jekyll-responsive_image' + 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.summary = 'Responsive images management for Jekyll' 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. + Highly configurable Jekyll plugin for managing responsive images. Automatically + resizes images and provides a Liquid template tag for loading the images with + picture, img srcset, Imager.js, etc. } spec.files = `git ls-files -z lib/`.split("\u0000") spec.executables = [] spec.require_paths = ['lib'] - if Gem::Version.new(RUBY_VERSION) < Gem::Version.new('2.0.0') - max_jekyll_version = '3.0' - else - max_jekyll_version = '4.0' - end - - spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< #{max_jekyll_version}"] + spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< 4.0"] spec.add_runtime_dependency 'rmagick', ['>= 2.0', '< 3.0'] end diff --git a/lib/jekyll-responsive-image.rb b/lib/jekyll-responsive-image.rb new file mode 100644 index 0000000..d7a3f83 --- /dev/null +++ b/lib/jekyll-responsive-image.rb @@ -0,0 +1,19 @@ +require 'fileutils' +require 'yaml' + +require 'jekyll' +require 'rmagick' + +require 'jekyll-responsive-image/version' +require 'jekyll-responsive-image/config' +require 'jekyll-responsive-image/utils' +require 'jekyll-responsive-image/render_cache' +require 'jekyll-responsive-image/image_processor' +require 'jekyll-responsive-image/resize_handler' +require 'jekyll-responsive-image/renderer' +require 'jekyll-responsive-image/tag' +require 'jekyll-responsive-image/block' +require 'jekyll-responsive-image/extra_image_generator' + +Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag) +Liquid::Template.register_tag('responsive_image_block', Jekyll::ResponsiveImage::Block) diff --git a/lib/jekyll/responsive_image/block.rb b/lib/jekyll-responsive-image/block.rb similarity index 100% rename from lib/jekyll/responsive_image/block.rb rename to lib/jekyll-responsive-image/block.rb diff --git a/lib/jekyll/responsive_image/config.rb b/lib/jekyll-responsive-image/config.rb similarity index 100% rename from lib/jekyll/responsive_image/config.rb rename to lib/jekyll-responsive-image/config.rb diff --git a/lib/jekyll/responsive_image/extra_image_generator.rb b/lib/jekyll-responsive-image/extra_image_generator.rb similarity index 100% rename from lib/jekyll/responsive_image/extra_image_generator.rb rename to lib/jekyll-responsive-image/extra_image_generator.rb diff --git a/lib/jekyll/responsive_image/image_processor.rb b/lib/jekyll-responsive-image/image_processor.rb similarity index 100% rename from lib/jekyll/responsive_image/image_processor.rb rename to lib/jekyll-responsive-image/image_processor.rb diff --git a/lib/jekyll/responsive_image/render_cache.rb b/lib/jekyll-responsive-image/render_cache.rb similarity index 100% rename from lib/jekyll/responsive_image/render_cache.rb rename to lib/jekyll-responsive-image/render_cache.rb diff --git a/lib/jekyll/responsive_image/renderer.rb b/lib/jekyll-responsive-image/renderer.rb similarity index 100% rename from lib/jekyll/responsive_image/renderer.rb rename to lib/jekyll-responsive-image/renderer.rb diff --git a/lib/jekyll/responsive_image/resize_handler.rb b/lib/jekyll-responsive-image/resize_handler.rb similarity index 100% rename from lib/jekyll/responsive_image/resize_handler.rb rename to lib/jekyll-responsive-image/resize_handler.rb diff --git a/lib/jekyll/responsive_image/tag.rb b/lib/jekyll-responsive-image/tag.rb similarity index 100% rename from lib/jekyll/responsive_image/tag.rb rename to lib/jekyll-responsive-image/tag.rb diff --git a/lib/jekyll/responsive_image/utils.rb b/lib/jekyll-responsive-image/utils.rb similarity index 100% rename from lib/jekyll/responsive_image/utils.rb rename to lib/jekyll-responsive-image/utils.rb diff --git a/lib/jekyll/responsive_image/version.rb b/lib/jekyll-responsive-image/version.rb similarity index 62% rename from lib/jekyll/responsive_image/version.rb rename to lib/jekyll-responsive-image/version.rb index 2d96067..95474a7 100644 --- a/lib/jekyll/responsive_image/version.rb +++ b/lib/jekyll-responsive-image/version.rb @@ -1,5 +1,5 @@ module Jekyll module ResponsiveImage - VERSION = '1.0.1'.freeze + VERSION = '1.0.2'.freeze end end diff --git a/lib/jekyll/responsive_image.rb b/lib/jekyll/responsive_image.rb deleted file mode 100644 index 1913060..0000000 --- a/lib/jekyll/responsive_image.rb +++ /dev/null @@ -1,19 +0,0 @@ -require 'fileutils' -require 'yaml' - -require 'jekyll' -require 'rmagick' - -require 'jekyll/responsive_image/version' -require 'jekyll/responsive_image/config' -require 'jekyll/responsive_image/utils' -require 'jekyll/responsive_image/render_cache' -require 'jekyll/responsive_image/image_processor' -require 'jekyll/responsive_image/resize_handler' -require 'jekyll/responsive_image/renderer' -require 'jekyll/responsive_image/tag' -require 'jekyll/responsive_image/block' -require 'jekyll/responsive_image/extra_image_generator' - -Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag) -Liquid::Template.register_tag('responsive_image_block', Jekyll::ResponsiveImage::Block)