Compare commits

..

2 Commits

Author SHA1 Message Date
Joseph Wynn
59ac55be81 0.11.2 2014-12-07 22:40:49 +00:00
Joseph Wynn
3288141b74 Better error messages 2014-12-07 22:40:41 +00:00
52 changed files with 394 additions and 1217 deletions

1
.gitattributes vendored
View File

@ -1 +0,0 @@
features/test-site/* linguist-vendored

10
.github/stale.yml vendored
View File

@ -1,10 +0,0 @@
daysUntilStale: 18
daysUntilClose: 3
staleLabel: stale
exemptLabels:
- pinned
markComment: >
This issue has been automatically marked as stale because it has not had
recent activity. It will be closed if no further activity occurs. Thank you
for your contributions.
closeComment: false

View File

@ -1,12 +1,8 @@
sudo: false
dist: trusty
language: ruby
bundler_args: --without debug
before_script: bundle exec jekyll --version
script: bundle exec rake features_with_coveralls
rvm:
- '2.6'
- '2.5'
- '2.4'
- '2.3'
- '2.2'
- 2.1.0
- 2.0.0
- 1.9.3
- rbx-2

View File

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

View File

@ -1,6 +1,6 @@
The MIT License (MIT)
Copyright (c) 2018 Joseph Wynn
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

268
README.md
View File

@ -1,52 +1,62 @@
# jekyll-responsive-image
# Jekyll Responsive Images
A [Jekyll](http://jekyllrb.com/) plugin for automatically resizing images. Fully configurable and unopinionated, jekyll-responsive-image allows you to display responsive images however you like: using [`<img srcset>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-srcset), [`<picture>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture), or [Imager.js](https://github.com/BBC-News/Imager.js/).
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://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)
[![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
This plugin can be installed in three steps:
### 1. Install the gem
Either add `jekyll-responsive-image` to your Gemfile, or run the following command to install the gem:
You can either use the gem and update your `_config.yml`:
```
$ gem install jekyll-responsive-image
$ gem install jekyll-responsive_image
```
Then you can either add `jekyll-responsive-image` to the `plugins` section of your `_config.yml`:
```yaml
plugins:
- jekyll-responsive-image
# _config.yml
gems: [jekyll-responsive_image]
```
Note: If you are using a Jekyll version less than 3.5.0, use the `gems` key instead of `plugins`.
Or you can copy the contents of [`responsive_image.rb`](lib/jekyll-responsive-image.rb) into your `_plugins` directory.
Or you can simply copy [`responsive_image.rb`](lib/jekyll/responsive_image.rb) into your `_plugins` directory.
### 2. Create an image template file
## Configuration
You will need to create a template in order to use the `responsive_image` and `responsive_image_block` tags. Normally the template lives in your `_includes/` directory. Not sure where to start? [Take a look at the sample templates](sample-templates).
For more advanced templates, see the [**Templates**](#templates) section below.
### 3. Configure the plugin
You **must** have a `responsive_image` block in your `_config.yml` for this plugin to work. At a minimum, your `responsive_image` configuration should have a template path and a list of sizes.
An example configuration is below.
```yaml
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
sizes:
- width: 320
- width: 480
- width: 800
```
For a list of all the available configuration options, see the [**All configuration options**](#all-configuration-options) section below.
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
- width: 1400
quality: 90
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images.
#
# Parameters available are:
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: assets/resized/%{width}/%{basename}
```
## Usage
@ -72,7 +82,7 @@ Any extra attributes will be passed straight to the template as variables.
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.
> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are significant!
> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are important!
```twig
{% assign path = 'assets/test.png' %}
@ -87,169 +97,75 @@ You can use Liquid variables as attributes with the `responsive_image_block` tag
{% endresponsive_image_block %}
```
## Templates
### Template
It's easy to build your own custom templates to render images however you want using the template variables provided by jekyll-responsive-image.
You will need to create a template in order to use the `responsive_image` tag. Below are some sample templates to get you started.
#### Responsive images with `srcset`
```twig
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
```
#### Responsive images with `<picture>`
```twig
<picture>
{% for i in resized %}
<source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
{% endfor %}
<img src="/{{ path }}">
</picture>
```
#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
```twig
{% assign smallest = resized | sort: 'width' | first %}
<div class="responsive-image">
<img class="responsive-image__placeholder" src="/{{ smallest.path }}">
<div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>
</div>
<script>
new Imager('.responsive-image__delayed', {
availableWidths: [{{ resized | map: 'width' | join: ', ' }}]
onImagesReplaced: function() {
$('.responsive-image__placeholder').hide();
}
});
</script>
```
### Template Variables
The following variables are available in the template:
| Variable | Type | Description |
|------------|---------------|------------------------------------------------------------------------------------------------------|
|----------- |--------|------------------------------------------------------------------------------------------------------|
| `path` | String | The path of the unmodified image. This is always the same as the `path` attribute passed to the tag. |
| `resized` | Array<Object> | An array of all the resized images. Each image is an **Image Object**. |
| `resized` | Array | An array of all the resized images. Each image is an **Image Object**. |
| `original` | Object | An **Image Object** containing information about the original image. |
| `*` | String | Any other attributes will be passed to the template verbatim as strings (see below). |
Any other attributes that are given to the `responsive_image` or `responsive_image_block` tags will be available in the template. For example the following tag will provide an `{{ alt }}` variable to the template:
```twig
{% responsive_image path: assets/my-file.jpg alt: "A description of the image" %}
```
| `*` | String | Any other attributes will be passed to the template verbatim as strings. |
#### Image Objects
Image objects (like `original` and each object in `resized`) contain the following properties:
| Variable | Type | Description |
|-------------|---------|----------------------------------------------------------------------------------------------|
|-------------|---------|-------------------------------------------------------------------------|
| `path` | String | The path to the image. |
| `width` | Integer | The width of the image. |
| `height` | Integer | The height of the image. |
| `basename` | String | Basename of the file (`assets/some-file.jpg` => `some-file.jpg`). |
| `dirname` | String | Directory of the file relative to `base_path` (`assets/sub/dir/some-file.jpg` => `sub/dir`). |
| `filename` | String | Basename without the extension (`assets/some-file.jpg` => `some-file`). |
| `extension` | String | Extension of the file (`assets/some-file.jpg` => `jpg`). |
## All configuration options
A full list of all of the available configuration options is below.
```yaml
responsive_image:
# [Required]
# Path to the image template.
template: _includes/responsive-image.html
# [Optional, Default: 85]
# Quality to use when resizing images.
default_quality: 90
# [Optional, Default: []]
# An array of resize configuration objects. Each object must contain at least
# a `width` value.
sizes:
- width: 480 # [Required] How wide the resized image will be.
quality: 80 # [Optional] Overrides default_quality for this size.
- width: 800
- width: 1400
quality: 90
# [Optional, Default: false]
# Rotate resized images depending on their EXIF rotation attribute. Useful for
# working with JPGs directly from digital cameras and smartphones
auto_rotate: false
# [Optional, Default: false]
# Strip EXIF and other JPEG profiles. Helps to minimize JPEG size and win friends
# at Google PageSpeed.
strip: false
# [Optional, Default: assets]
# The base directory where assets are stored. This is used to determine the
# `dirname` value in `output_path_format` below.
base_path: assets
# [Optional, Default: assets/resized/%{filename}-%{width}x%{height}.%{extension}]
# The template used when generating filenames for resized images. Must be a
# relative path.
#
# Parameters available are:
# %{dirname} Directory of the file relative to `base_path` (assets/sub/dir/some-file.jpg => sub/dir)
# %{basename} Basename of the file (assets/some-file.jpg => some-file.jpg)
# %{filename} Basename without the extension (assets/some-file.jpg => some-file)
# %{extension} Extension of the file (assets/some-file.jpg => jpg)
# %{width} Width of the resized image
# %{height} Height of the resized image
#
output_path_format: assets/resized/%{width}/%{basename}
# [Optional, Default: true]
# Whether or not to save the generated assets into the source folder.
save_to_source: false
# [Optional, Default: false]
# Cache the result of {% responsive_image %} and {% responsive_image_block %}
# tags. See the "Caching" section of the README for more information.
cache: false
# [Optional, Default: []]
# By default, only images referenced by the responsive_image and responsive_image_block
# tags are resized. Here you can set a list of paths or path globs to resize other
# images. This is useful for resizing images which will be referenced from stylesheets.
extra_images:
- assets/foo/bar.png
- assets/bgs/*.png
- assets/avatars/*.{jpeg,jpg}
```
## Troubleshooting
### Error: Can't install RMagick
`jekyll-responsive-image` uses `rmagick` which is currently incompatible with ImageMagick 7. If you get an error like:
```
Can't install RMagick 2.16.0. Can't find MagickWand.h
```
Then you will need to install ImageMagick 6. If you are using Homebrew on Mac OS, this can be done with the following commands:
```
$ brew uninstall imagemagick
$ brew install imagemagick@6 && brew link imagemagick@6 --force
```
## Caching
You may be able to speed up the build of large sites by enabling render caching. This is usually only effective when the same image is used many times, for example a header image that is rendered in every post.
The recommended way to enable caching is on an image-by-image basis, by adding `cache: true` to the tag:
```twig
{% responsive_image path: 'assets/my-file.jpg' cache: true %}
{% responsive_image_block %}
path: assets/my-file.jpg
cache: true
{% endresponsive_image_block %}
```
You can also enable it for all images by adding `cache: true` to your `_config.yml`:
```yaml
responsive_image:
cache: true
template: _includes/responsive-image.html
sizes:
- ...
```
## Development
If you'd like to contribute to this repository, here's how you can set it up for development:
1. Fork this repository
2. Clone the fork to your local machine
3. Install [ImageMagick](http://www.imagemagick.org/) (if you haven't already)
4. Run `bundle install`
5. Run the tests like this: `cucumber`
If you'd like your Jekyll project to use your local fork directly, you can add the `:path` parameter to your gem command in the project's Gemfile:
```ruby
gem 'jekyll-responsive-image', :path => "/your/local/path/to/jekyll-responsive-image"
```
If you'd like your changes to be considered for the original repository, simply submit a pull request after you've made your changes. Please make sure all tests pass.

View File

@ -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'
@ -21,8 +21,8 @@ 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} -a -m 'Tagged release of jekyll-responsive-image-#{Jekyll::ResponsiveImage::VERSION}.gem'"
system "gem build jekyll-responsive_image.gemspec"
system "git tag v#{Jekyll::ResponsiveImage::VERSION} -a -m 'Tagged release of jekyll-responsive_image-#{Jekyll::ResponsiveImage::VERSION}.gem'"
system "git push --tags"
system "gem push jekyll-responsive-image-#{Jekyll::ResponsiveImage::VERSION}.gem"
system "gem push jekyll-responsive_image-#{Jekyll::ResponsiveImage::VERSION}.gem"
end

File diff suppressed because one or more lines are too long

View File

@ -1,52 +0,0 @@
Feature: Extra image generation
Scenario: Specifying a single image and glob patterns
Given I have a responsive_image configuration with:
"""
sizes:
- width: 100
extra_images:
- assets/everybody-loves-jalapeño-pineapple-cornbread.png
- assets/*.jpeg
"""
And I have a file "index.html" with "Hello, world!"
When I run Jekyll
Then the image "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should have the dimensions "100x50"
And the image "assets/resized/progressive-100x50.jpeg" should have the dimensions "100x50"
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
And the file "_site/assets/resized/progressive-100x50.jpeg" should exist
Scenario: Specifying a recursive glob pattern
Given I have a responsive_image configuration with:
"""
sizes:
- width: 100
extra_images:
- assets/**/*
"""
And I have a file "index.html" with "Hello, world!"
When I run Jekyll
Then the image "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should have the dimensions "100x50"
And the image "assets/resized/exif-rotation-100x50.jpeg" should have the dimensions "100x50"
And the image "assets/resized/progressive-100x50.jpeg" should have the dimensions "100x50"
And the image "assets/resized/test-100x50.png" should have the dimensions "100x50"
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
And the file "_site/assets/resized/exif-rotation-100x50.jpeg" should exist
And the file "_site/assets/resized/progressive-100x50.jpeg" should exist
And the file "_site/assets/resized/test-100x50.png" should exist
Scenario: Honouring Jekyll 'source' configuration
Given I have copied my site to "sub-dir/my-site-copy"
And I have a configuration with:
"""
source: sub-dir/my-site-copy
responsive_image:
sizes:
- width: 100
extra_images:
- assets/*.png
"""
And I have a file "index.html" with "Hello, world!"
When I run Jekyll
Then the image "sub-dir/my-site-copy/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should have the dimensions "100x50"
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
And the file "_site/assets/resized/progressive-100x50.jpeg" should not exist

View File

@ -0,0 +1,4 @@
<img alt="{{ alt }}" src="/{{ path }}" title="{{ title }}" srcset="
{% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}
/{{ original.path }} {{ original.width }}w
">

View File

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View File

@ -1,119 +0,0 @@
Feature: Responsive image generation
Scenario: Resizing images
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
"""
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: Foobar %}"
When I run Jekyll
Then the image "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should have the dimensions "100x50"
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
Scenario: Handling subdirectories
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
output_path_format: assets/resized/%{dirname}/%{filename}-%{width}.%{extension}
sizes:
- width: 100
"""
And I have a file "index.html" with:
"""
{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png %}
{% responsive_image path: assets/subdir/test.png %}
{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png cache: true %}
"""
When I run Jekyll
Then the file "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100.png" should exist
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100.png" should exist
And the file "assets/resized/subdir/test-100.png" should exist
And the file "_site/assets/resized/subdir/test-100.png" should exist
Scenario: Honouring source image interlace mode
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
"""
And I have a file "index.html" with "{% responsive_image path: assets/progressive.jpeg %}"
When I run Jekyll
Then the image "assets/resized/progressive-100x50.jpeg" should be interlaced
Scenario: Honouring Jekyll 'source' configuration
Given I have copied my site to "my-site-copy/src"
And I have a configuration with:
"""
source: my-site-copy/src
responsive_image:
base_path: assets
template: _includes/responsive-image.html
output_path_format: assets/resized/%{dirname}/%{width}/%{basename}
sizes:
- width: 100
"""
And I have a file "my-site-copy/src/index.html" with "{% responsive_image path: assets/subdir/test.png %}"
When I run Jekyll
Then the image "my-site-copy/src/assets/resized/subdir/100/test.png" should have the dimensions "100x50"
And the file "_site/assets/resized/subdir/100/test.png" should exist
Scenario: Images can be auto-rotated based on EXIF rotation
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
auto_rotate: true
"""
And I have a file "index.html" with "{% responsive_image path: assets/exif-rotation.jpeg %}"
When I run Jekyll
Then the file "_site/assets/resized/exif-rotation-100x200.jpeg" should exist
Scenario: Images aren't auto-rotated by default
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
"""
And I have a file "index.html" with:
"""
{% responsive_image path: assets/exif-rotation.jpeg %}
{% responsive_image path: assets/progressive.jpeg %}
"""
When I run Jekyll
Then the file "_site/assets/resized/exif-rotation-100x50.jpeg" should exist
Then the file "_site/assets/resized/progressive-100x50.jpeg" should exist
Scenario: Images should not be stripped of EXIF info by default
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
"""
And I have a file "index.html" with:
"""
{% responsive_image path: assets/exif-rotation.jpeg %}
"""
When I run Jekyll
Then the file "_site/assets/resized/exif-rotation-100x50.jpeg" should exist
Then the image "_site/assets/resized/exif-rotation-100x50.jpeg" should have an EXIF orientation
Scenario: Images can be stripped of EXIF info
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 100
strip: true
"""
And I have a file "index.html" with:
"""
{% responsive_image path: assets/exif-rotation.jpeg %}
"""
When I run Jekyll
Then the file "_site/assets/resized/exif-rotation-100x50.jpeg" should exist
Then the image "_site/assets/resized/exif-rotation-100x50.jpeg" should have no EXIF orientation

View File

@ -1,32 +0,0 @@
Feature: Image hashes inside responsive image templates
Scenario: Using the {% responsive_image %} tag
Given I have copied my site to "my-site-copy/src"
And I have a configuration with:
"""
source: my-site-copy/src
responsive_image:
template: _includes/hash.html
output_path_format: assets/resized/%{dirname}/%{width}/%{basename}
sizes:
- width: 100
"""
And I have a file "my-site-copy/src/index.html" with "{% responsive_image path: assets/subdir/test.png %}"
When I run Jekyll
Then the file "_site/index.html" should contain:
"""
path: assets/subdir/test.png
width: 300
height: 150
basename: test.png
dirname: subdir
filename: test
extension: png
path: assets/resized/subdir/100/test.png
width: 100
height: 50
basename: test.png
dirname: resized/subdir/100
filename: test
extension: png
"""

View File

@ -1,12 +0,0 @@
Feature: General plugin usage
Scenario: No config at all
Given I have no configuration
When I run Jekyll
Then there should be no errors
Scenario: Config with empty responsive_image block
Given I have a responsive_image configuration with:
"""
"""
When I run Jekyll
Then there should be no errors

View File

@ -1,54 +1,31 @@
Feature: Jekyll responsive_image_block tag
As a Jekyll template developer
I want to include Liquid variables when rendering my responsive images
In order to dynamically generate my responsive images
Scenario: Simple image tag
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
And I have a file "index.html" with:
"""
{% assign path = 'assets/everybody-loves-jalapeño-pineapple-cornbread.png' %}
{% assign path = 'assets/test.png' %}
{% assign alt = 'Lorem ipsum' %}
{% responsive_image_block %}
path: {{ path }}
title: Magic rainbow adventure!
alt: Lorem ipsum
alt: {{ alt }}
{% endresponsive_image_block %}
"""
When I run Jekyll
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
Scenario: Tabs for indentation
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
And I have a file "index.html" with:
"""
{% assign path = 'assets/everybody-loves-jalapeño-pineapple-cornbread.png' %}
{% responsive_image_block %}
path: {{ path }}
title: Magic rainbow adventure!
alt: Lorem ipsum
{% endresponsive_image_block %}
"""
When I run Jekyll
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
Scenario: Global variables available in templates
Given I have a file "index.html" with:
"""
{% responsive_image_block %}
path: assets/everybody-loves-jalapeño-pineapple-cornbread.png
{% endresponsive_image_block %}
"""
And I have a configuration with:
"""
baseurl: https://wildlyinaccurate.com
responsive_image:
template: _includes/base-url.html
"""
When I run Jekyll
Then I should see "<img src=\"https://wildlyinaccurate.com/assets/everybody-loves-jalapeño-pineapple-cornbread.png\">" in "_site/index.html"
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
Scenario: More complex logic in the block tag
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
And I have a file "index.html" with:
"""
{% assign path = 'assets/everybody-loves-jalapeño-pineapple-cornbread.png' %}
{% assign path = 'assets/test.png' %}
{% assign alt = 'Lorem ipsum' %}
{% responsive_image_block %}
path: {{ path }}
@ -60,7 +37,7 @@ Feature: Jekyll responsive_image_block tag
{% endresponsive_image_block %}
"""
When I run Jekyll
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\"" in "_site/index.html"
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\"" in "_site/index.html"
Scenario: Handling a nil path
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
@ -70,4 +47,4 @@ Feature: Jekyll responsive_image_block tag
path: {{ path }}
{% endresponsive_image_block %}
"""
Then Jekyll should throw a "Magick::ImageMagickError"
Then Jekyll should throw a "SyntaxError"

View File

@ -1,32 +1,28 @@
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" set to "_includes/responsive-image.html"
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: Foobar %}"
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/everybody-loves-jalapeño-pineapple-cornbread.png\"" in "_site/index.html"
Scenario: Global variables available in templates
Given I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png %}"
And I have a configuration with:
"""
baseurl: https://wildlyinaccurate.com
responsive_image:
template: _includes/base-url.html
"""
When I run Jekyll
Then I should see "<img src=\"https://wildlyinaccurate.com/assets/everybody-loves-jalapeño-pineapple-cornbread.png\">" in "_site/index.html"
Then I should see "<img alt=\"Foobar\" src=\"/assets/test.png\"" in "_site/index.html"
Scenario: Adding custom attributes
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: 'Foobar bazbar' title: 'Lorem Ipsum' %}"
And I have a file "index.html" with:
"""
{% responsive_image path: assets/test.png alt: 'Foobar bazbar' title: "Lorem Ipsum" %}
"""
When I run Jekyll
Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/test.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
Scenario: UTF-8 attributes
Given I have a responsive_image configuration with "template" set to "_includes/responsive-image.html"
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: ' ' %}"
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/everybody-loves-jalapeño-pineapple-cornbread.png\"" in "_site/index.html"
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:
@ -36,31 +32,37 @@ Feature: Jekyll responsive_image tag
- width: 100
- width: 200
"""
And I have a file "index.html" with "{% responsive_image path: assets/subdir/test.png %}"
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/subdir/test.png\"" in "_site/index.html"
And I should see "/assets/resized/test-100x50.png 100w,/assets/resized/test-200x100.png 200w,/assets/subdir/test.png 300w" in "_site/index.html"
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 I should see "/assets/test.png 300w" in "_site/index.html"
And the file "assets/resized/test-100x50.png" should exist
And the file "assets/resized/test-200x100.png" should exist
Scenario: Overriding the template
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
sizes:
- width: 50
- width: 100
- width: 200
- width: 300
"""
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png template: _includes/custom-template.html %}"
And I have a file "index.html" with "{% responsive_image path: assets/test.png template: _includes/custom-template.html %}"
When I run Jekyll
Then I should see "[50, 100]" in "_site/index.html"
Then I should see "[100, 200, 300]" in "_site/index.html"
Scenario: Overriding the generated filenames
Given I have a responsive_image configuration with:
"""
template: _includes/responsive-image.html
output_path_format: assets/%{dirname}/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
output_path_format: assets/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
sizes:
- width: 100
"""
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png %}"
And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
When I run Jekyll
Then I should see "/assets/everybody-loves-jalapeño-pineapple-cornbread.png-resized/100/everybody-loves-jalapeño-pineapple-cornbread-50.png 100w" in "_site/index.html"
Then I should see "/assets/test.png-resized/100/test-50.png 100w" in "_site/index.html"
And the file "assets/test.png-resized/100/test-50.png" should exist

View File

@ -1,28 +0,0 @@
Feature: Save to source
Scenario: Resized images are saved to the source directory by default
Given I have a responsive_image configuration with:
"""
sizes:
- width: 100
extra_images:
- assets/everybody-loves-jalapeño-pineapple-cornbread.png
"""
And I have a file "index.html" with "Hello, world!"
When I run Jekyll
Then the file "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
And the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
Scenario: Resized images can be saved to the destination directory only with save_to_source: false
Given I have a responsive_image configuration with:
"""
save_to_source: false
sizes:
- width: 100
extra_images:
- assets/everybody-loves-jalapeño-pineapple-cornbread.png
- assets/*.jpeg
"""
And I have a file "index.html" with "Hello, world!"
When I run Jekyll
Then the file "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should not exist
But the file "_site/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist

View File

@ -1,3 +1,5 @@
include Test::Unit::Assertions
When /^I run Jekyll$/ do
run_jekyll
end
@ -6,28 +8,6 @@ Then /^Jekyll should throw a "(.+)"$/ do |error_class|
assert_raise(Object.const_get(error_class)) { run_jekyll }
end
Then /^there should be no errors$/ do
# Implicit pass
end
Given /^I have copied my site to "(.+)"$/ do |path|
new_site_dir = File.join(TEST_DIR, path)
FileUtils.mkdir_p(new_site_dir)
Dir.glob(File.join(TEST_DIR, '*'))
.reject { |f| File.basename(f) == File.dirname(path) }
.each { |f| FileUtils.mv(f, new_site_dir) }
end
Given /^I have no configuration$/ do
write_file('_config.yml', '')
end
Given /^I have a configuration with:$/ do |config|
write_file('_config.yml', config)
end
Given /^I have a responsive_image configuration with:$/ do |config|
write_file('_config.yml', "responsive_image:\n#{config}")
end
@ -45,44 +25,11 @@ Given /^I have a file "(.+)" with "(.+)"$/ do |path, contents|
end
Then /^I should see "(.+)" in "(.*)"$/ do |text, file|
contents = File.open(file).readlines.join
assert contents.inspect.include?(text), "Expected to find #{text.inspect} in #{contents.inspect}"
end
Then /^the file "(.+)" should contain:$/ do |file, contents|
assert_equal contents.strip, File.open(file).readlines.join.strip
assert_match(Regexp.new(text), File.open(file).readlines.join)
end
Then /^the file "(.+)" should exist$/ do |path|
assert File.exist?(path)
end
Then /^the file "(.+)" should not exist$/ do |path|
assert !File.exist?(path)
end
Then /^the image "(.+)" should have the dimensions "(\d+)x(\d+)"$/ do |path, width, height|
img = Magick::Image::read(path).first
assert_equal "#{width}x#{height}", "#{img.columns}x#{img.rows}"
img.destroy!
end
Then /^the image "(.+)" should be interlaced$/ do |path|
img = Magick::Image::read(path).first
assert_equal Magick::JPEGInterlace, img.interlace
img.destroy!
end
Then /^the image "(.+)" should have an EXIF orientation$/ do |path|
img = Magick::Image::read(path).first
assert_not_equal img.orientation.to_i, 0
img.destroy!
end
Then /^the image "(.+)" should have no EXIF orientation$/ do |path|
img = Magick::Image::read(path).first
assert_equal img.orientation.to_i, 0
img.destroy!
assert File.exists?(path)
end
def write_file(path, contents)

View File

@ -1,22 +1,19 @@
require 'simplecov'
require 'coveralls'
if ENV['CI']
require 'coveralls'
Coveralls.wear!
end
formatters = [SimpleCov::Formatter::HTMLFormatter]
formatters << Coveralls::SimpleCov::Formatter if ENV['CI']
SimpleCov.formatters = formatters
SimpleCov.start
require 'test/unit/assertions'
require 'jekyll-responsive-image'
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
World(Test::Unit::Assertions)

View File

@ -2,8 +2,8 @@ Before do
FileUtils.rm_rf(TEST_DIR) if File.exist?(TEST_DIR)
FileUtils.mkdir_p(TEST_DIR)
test_site = File.expand_path('../../test-site', __FILE__)
FileUtils.cp_r(Dir.glob("#{test_site}/*"), TEST_DIR)
fixtures = File.expand_path('../../fixtures', __FILE__)
FileUtils.cp_r(Dir.glob("#{fixtures}/*"), TEST_DIR)
Dir.chdir(TEST_DIR)
end

View File

@ -1 +0,0 @@
<img src="{{ site.baseurl }}/{{ original.path }}">

View File

@ -1,16 +0,0 @@
path: {{ original.path }}
width: {{ original.width }}
height: {{ original.height }}
basename: {{ original.basename }}
dirname: {{ original.dirname }}
filename: {{ original.filename }}
extension: {{ original.extension }}
{% for i in resized %}
path: {{ i.path }}
width: {{ i.width }}
height: {{ i.height }}
basename: {{ i.basename }}
dirname: {{ i.dirname }}
filename: {{ i.filename }}
extension: {{ i.extension }}
{% endfor %}

View File

@ -1,3 +0,0 @@
{% assign largest = resized | sort: 'width' | last %}
<img alt="{{ alt }}" src="/{{ original.path }}" title="{{ title }}" srcset="{% for i in resized %}/{{ i.path }} {{ i.width }}w,{% endfor %}/{{ original.path }} {{ original.width }}w">

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.9 KiB

View File

@ -1,27 +0,0 @@
# -*- 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 image management for Jekyll'
spec.homepage = 'https://github.com/wildlyinaccurate/jekyll-responsive-image'
spec.licenses = ['MIT']
spec.description = %q{
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']
spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< 5.0"]
spec.add_runtime_dependency 'rmagick', ['>= 2.0', '< 5.0']
end

View File

@ -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

View File

@ -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)

View File

@ -1,18 +0,0 @@
module Jekyll
module ResponsiveImage
class Block < Liquid::Block
include Jekyll::ResponsiveImage::Utils
def render(context)
content = super
if content.include?("\t")
content = content.lines.map {|line| line.gsub(/\G[\t ]/, " ")}.join("\n")
end
attributes = YAML.load(content)
Renderer.new(context.registers[:site], attributes).render_responsive_image
end
end
end
end

View File

@ -1,37 +0,0 @@
module Jekyll
module ResponsiveImage
class Config
DEFAULTS = {
'default_quality' => 85,
'base_path' => 'assets',
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
'sizes' => [],
'extra_images' => [],
'auto_rotate' => false,
'save_to_source' => true,
'cache' => false,
'strip' => false
}
def initialize(site)
@site = site
end
def valid_config(config)
config.has_key?('responsive_image') && config['responsive_image'].is_a?(Hash)
end
def to_h
config = {}
if valid_config(@site.config)
config = @site.config['responsive_image']
end
DEFAULTS.merge(config)
.merge(site_source: @site.source, site_dest: @site.dest)
end
end
end
end

View File

@ -1,25 +0,0 @@
module Jekyll
module ResponsiveImage
class ExtraImageGenerator < Jekyll::Generator
include Jekyll::ResponsiveImage::Utils
include FileTest
def generate(site)
config = Config.new(site).to_h
site_source = Pathname.new(site.source)
config['extra_images'].each do |pathspec|
Dir.glob(site.in_source_dir(pathspec)) do |image_path|
if FileTest.file?(image_path)
path = Pathname.new(image_path)
relative_image_path = path.relative_path_from(site_source)
result = ImageProcessor.process(relative_image_path, config)
result[:resized].each { |image| keep_resized_image!(site, image) }
end
end
end
end
end
end
end

View File

@ -1,24 +0,0 @@
module Jekyll
module ResponsiveImage
class ImageProcessor
include ResponsiveImage::Utils
def process(image_path, config)
absolute_image_path = File.expand_path(image_path.to_s, config[:site_source])
Jekyll.logger.warn "Invalid image path specified: #{image_path.inspect}" unless File.file?(absolute_image_path)
resize_handler = ResizeHandler.new(absolute_image_path, config)
{
original: image_hash(config, image_path, resize_handler.original_image.columns, resize_handler.original_image.rows),
resized: resize_handler.resize_image,
}
end
def self.process(image_path, config)
self.new.process(image_path, config)
end
end
end
end

View File

@ -1,21 +0,0 @@
module Jekyll
module ResponsiveImage
class RenderCache
attr_accessor :store
class << self
def store
@store ||= {}
end
def get(key)
store[key]
end
def set(key, val)
store[key] = val
end
end
end
end
end

View File

@ -1,41 +0,0 @@
module Jekyll
module ResponsiveImage
class Renderer
include Jekyll::ResponsiveImage::Utils
def initialize(site, attributes)
@site = site
@attributes = attributes
end
def render_responsive_image
config = Config.new(@site).to_h
use_cache = config['cache'] || @attributes['cache']
cache_key = @attributes.to_s
result = use_cache ? RenderCache.get(cache_key) : nil
if result.nil?
image = ImageProcessor.process(@attributes['path'], config)
@attributes['original'] = image[:original]
@attributes['resized'] = image[:resized]
@attributes['resized'].each { |resized| keep_resized_image!(@site, resized) }
image_template = @site.in_source_dir(@attributes['template'] || config['template'])
partial = File.read(image_template)
template = Liquid::Template.parse(partial)
info = {
registers: { site: @site }
}
result = template.render!(@attributes.merge(@site.site_payload), info)
RenderCache.set(cache_key, result)
end
result
end
end
end
end

View File

@ -1,111 +0,0 @@
module Jekyll
module ResponsiveImage
class ResizeHandler
include ResponsiveImage::Utils
attr_reader :original_image
def initialize(original_image_absolute_path, config)
@config = config
@original_image_absolute_path = original_image_absolute_path
if @config['auto_rotate']
load_full_image
@original_image.auto_orient!
else
load_image_properties_only
end
end
def resize_image
resized = []
@config['sizes'].each do |size|
width = size['width']
ratio = width.to_f / @original_image.columns.to_f
height = (@original_image.rows.to_f * ratio).round
next unless needs_resizing?(width)
image_path = @original_image.filename.force_encoding(Encoding::UTF_8)
filepath = format_output_path(@config['output_path_format'], @config, image_path, width, height)
resized.push(image_hash(@config, filepath, width, height))
site_source_filepath = File.expand_path(filepath, @config[:site_source])
site_dest_filepath = File.expand_path(filepath, @config[:site_dest])
if @config['save_to_source']
target_filepath = site_source_filepath
else
target_filepath = site_dest_filepath
end
# Don't resize images more than once
next if File.exist?(target_filepath)
ensure_output_dir_exists!(target_filepath)
ensure_output_dir_exists!(site_dest_filepath)
Jekyll.logger.info "Generating #{target_filepath}"
load_full_image unless @original_image_pixels_loaded
if @config['strip']
@original_image.strip!
end
i = @original_image.scale(ratio)
quality = size['quality'] || @config['default_quality']
i.write(target_filepath) do |f|
f.interlace = i.interlace
f.quality = quality
end
if @config['save_to_source']
# Ensure the generated file is copied to the _site directory
Jekyll.logger.info "Copying resized image to #{site_dest_filepath}"
FileUtils.copy_file(site_source_filepath, site_dest_filepath)
end
i.destroy!
end
@original_image.destroy!
resized
end
def format_output_path(format, config, image_path, width, height)
params = symbolize_keys(image_hash(config, image_path, width, height))
Pathname.new(format % params).cleanpath.to_s
end
def needs_resizing?(width)
@original_image.columns > width
end
def load_full_image
@original_image = Magick::Image::read(@original_image_absolute_path).first
@original_image_pixels_loaded = true
end
def load_image_properties_only
@original_image = Magick::Image::ping(@original_image_absolute_path).first
@original_image_pixels_loaded = false
end
def ensure_output_dir_exists!(path)
dir = File.dirname(path)
unless Dir.exist?(dir)
Jekyll.logger.info "Creating output directory #{dir}"
FileUtils.mkdir_p(dir)
end
end
end
end
end

View File

@ -1,20 +0,0 @@
module Jekyll
module ResponsiveImage
class Tag < Liquid::Tag
def initialize(tag_name, markup, tokens)
super
@attributes = {}
markup.scan(::Liquid::TagAttributes) do |key, value|
# Strip quotes from around attribute values
@attributes[key] = value.gsub(/^['"]|['"]$/, '')
end
end
def render(context)
Renderer.new(context.registers[:site], @attributes).render_responsive_image
end
end
end
end

View File

@ -1,40 +0,0 @@
require 'pathname'
module Jekyll
module ResponsiveImage
module Utils
def keep_resized_image!(site, image)
keep_dir = File.dirname(image['path'])
site.config['keep_files'] << keep_dir unless site.config['keep_files'].include?(keep_dir)
end
def symbolize_keys(hash)
result = {}
hash.each_key do |key|
result[key.to_sym] = hash[key]
end
result
end
# Build a hash containing image information
def image_hash(config, image_path, width, height)
{
'path' => image_path,
'dirname' => relative_dirname(config, image_path),
'basename' => File.basename(image_path),
'filename' => File.basename(image_path, '.*'),
'extension' => File.extname(image_path).delete('.'),
'width' => width,
'height' => height,
}
end
def relative_dirname(config, image_path)
path = Pathname.new(File.expand_path(image_path, config[:site_source]))
base = Pathname.new(File.expand_path(config['base_path'], config[:site_source]))
path.relative_path_from(base).dirname.to_s.delete('.')
end
end
end
end

View File

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

View File

@ -0,0 +1,16 @@
require 'fileutils'
require 'yaml'
require 'jekyll'
require 'rmagick'
require 'jekyll/responsive_image/version'
require 'jekyll/responsive_image/defaults'
require 'jekyll/responsive_image/utils'
require 'jekyll/responsive_image/image_processor'
require 'jekyll/responsive_image/resize_handler'
require 'jekyll/responsive_image/tag'
require 'jekyll/responsive_image/block'
Liquid::Template.register_tag('responsive_image', Jekyll::ResponsiveImage::Tag)
Liquid::Template.register_tag('responsive_image_block', Jekyll::ResponsiveImage::Block)

View File

@ -0,0 +1,22 @@
module Jekyll
class ResponsiveImage
class Block < Liquid::Block
def render(context)
config = ResponsiveImage.defaults.dup
config.merge!(context.registers[:site].config['responsive_image'])
attributes = YAML.load(super)
image_template = attributes['template'] || config['template']
image = ImageProcessor.process(attributes['path'], config)
attributes['original'] = image[:original]
attributes['resized'] = image[:resized]
partial = File.read(image_template)
template = Liquid::Template.parse(partial)
template.render!(attributes)
end
end
end
end

View File

@ -0,0 +1,13 @@
module Jekyll
class ResponsiveImage
@defaults = {
'default_quality' => 85,
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
'sizes' => [],
}.freeze
class << self
attr_reader :defaults
end
end
end

View File

@ -0,0 +1,23 @@
module Jekyll
class ResponsiveImage
class ImageProcessor
include ResponsiveImage::Utils
def process(image_path, config)
raise SyntaxError.new("Invalid image path specified: #{image_path}") unless File.exists?(image_path.to_s)
resize_handler = ResizeHandler.new
img = Magick::Image::read(image_path).first
{
original: image_hash(image_path, img.columns, img.rows),
resized: resize_handler.resize_image(img, config),
}
end
def self.process(image_path, config)
self.new.process(image_path, config)
end
end
end
end

View File

@ -0,0 +1,54 @@
module Jekyll
class ResponsiveImage
class ResizeHandler
include ResponsiveImage::Utils
def resize_image(img, config)
resized = []
config['sizes'].each do |size|
width = size['width']
ratio = width.to_f / img.columns.to_f
height = (img.rows.to_f * ratio).round
next unless needs_resizing?(img, width)
filepath = format_output_path(config['output_path_format'], img.filename, width, height)
resized.push(image_hash(filepath, width, height))
# Don't resize images more than once
next if File.exists?(filepath)
ensure_output_dir_exists!(File.dirname(filepath))
Jekyll.logger.info "Generating #{filepath}"
i = img.scale(ratio)
i.write(filepath) do |f|
f.quality = size['quality'] || config['default_quality']
end
i.destroy!
end
resized
end
def format_output_path(format, path, width, height)
params = symbolize_keys(image_hash(path, width, height))
format % params
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}"
FileUtils.mkdir_p(dir)
end
end
end
end
end

View File

@ -0,0 +1,32 @@
module Jekyll
class ResponsiveImage
class Tag < Liquid::Tag
def initialize(tag_name, markup, tokens)
super
@attributes = {}
markup.scan(::Liquid::TagAttributes) do |key, value|
# Strip quotes from around attribute values
@attributes[key] = value.gsub(/^['"]|['"]$/, '')
end
end
def render(context)
config = ResponsiveImage.defaults.dup
config.merge!(context.registers[:site].config['responsive_image'])
image = ImageProcessor.process(@attributes['path'], config)
@attributes['original'] = image[:original]
@attributes['resized'] = image[:resized]
image_template = @attributes['template'] || config['template']
partial = File.read(image_template)
template = Liquid::Template.parse(partial)
template.render!(@attributes)
end
end
end
end

View File

@ -0,0 +1,25 @@
module Jekyll
class ResponsiveImage
module Utils
def symbolize_keys(hash)
result = {}
hash.each_key do |key|
result[key.to_sym] = hash[key]
end
result
end
# Build a hash containing image information
def image_hash(path, width, height)
{
'path' => path,
'basename' => File.basename(path),
'filename' => File.basename(path, '.*'),
'extension' => File.extname(path).delete('.'),
'width' => width,
'height' => height,
}
end
end
end
end

View File

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

View File

@ -1,25 +0,0 @@
{% comment %}
Render your responsive images using Imager.js (https://github.com/BBC-News/Imager.js/), with the smallest resized image used as a fallback.
Usage:
{% responsive_image path: assets/image.jpg alt: "A description of the image" %}
(P.S. You can safely delete this comment block)
{% endcomment %}
{% assign smallest = resized | sort: 'width' | first %}
<div class="responsive-image">
<img class="responsive-image__placeholder" src="/{{ smallest.path }}">
<div class="responsive-image__delayed" data-src="/assets/resized/{width}/{{ original.basename }}"></div>
</div>
<script>
new Imager('.responsive-image__delayed', {
availableWidths: [{{ resized | map: 'width' | join: ', ' }}],
onImagesReplaced: function() {
$('.responsive-image__placeholder').hide()
}
})
</script>

View File

@ -1,16 +0,0 @@
{% comment %}
Render your responsive images using <picture>, with the original asset used as a fallback. Note: If your original assets are not web-friendly (e.g. they are very large), you can use a resized image as the fallback instead. See the srcset-resized-fallback.html template for how to do this.
Usage:
{% responsive_image path: assets/image.jpg alt: "A description of the image" %}
(P.S. You can safely delete this comment block)
{% endcomment %}
<picture>
{% for i in resized %}
<source media="(min-width: {{ i.width }}px)" srcset="/{{ i.path }}">
{% endfor %}
<img src="/{{ path }}">
</picture>

View File

@ -1,18 +0,0 @@
{% comment %}
Render your responsive images using <img srcset>, with the largest resized image used as a fallback.
Usage:
{% responsive_image path: assets/image.jpg alt: "A description of the image" %}
(P.S. You can safely delete this comment block)
{% endcomment %}
{% assign largest = resized | sort: 'width' | last %}
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ largest.path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ path }} {{ original.width }}w">

View File

@ -1,17 +0,0 @@
{% comment %}
Render your responsive images using <img srcset>, with the original asset used as a fallback. Note: If your original assets are not web-friendly (e.g. they are very large), you might prefer to use the srcset-resized-fallback.html template.
Usage:
{% responsive_image path: assets/image.jpg alt: "A description of the image" %}
(P.S. You can safely delete this comment block)
{% endcomment %}
{% capture srcset %}
{% for i in resized %}
/{{ i.path }} {{ i.width }}w,
{% endfor %}
{% endcapture %}
<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ path }} {{ original.width }}w">