mirror of
https://github.com/wildlyinaccurate/jekyll-responsive-image.git
synced 2025-07-04 00:00:41 -04:00
Compare commits
35 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
0b01bc0f05 | ||
|
756eccc5c3 | ||
|
|
f8c699c6de | ||
|
|
b0da1e1a4e | ||
|
fd201e770c | ||
|
301d9bf466 | ||
|
|
2f7e4effcd | ||
|
|
a3a5511c68 | ||
|
|
17cf3dac3b | ||
|
|
68cf843bd7 | ||
|
|
e8dc907fb7 | ||
|
|
1853bc19cb | ||
|
89114ab2be | ||
|
|
a0166e8cbe | ||
|
|
7fc132a808 | ||
|
|
4000e0532f | ||
|
|
f6b42d264f | ||
|
|
b117107385 | ||
|
|
c9b9c97faf | ||
|
|
1565091d6e | ||
|
|
f297cf4c6e | ||
|
|
3a60fcf266 | ||
|
|
b0c38098c8 | ||
|
|
76f834ce09 | ||
|
|
9e122233e5 | ||
|
|
fd418bb7f6 | ||
|
|
350adaa8d7 | ||
|
|
7500a6aef2 | ||
|
|
8c9a131317 | ||
|
|
64954f8610 | ||
|
|
54237df9e0 | ||
|
|
66a9ef9759 | ||
|
|
29fa70fea4 | ||
|
|
0c4a8e82e4 | ||
|
|
173205ec66 |
11
.travis.yml
11
.travis.yml
@ -1,9 +1,10 @@
|
||||
sudo: false
|
||||
language: ruby
|
||||
bundler_args: --without debug
|
||||
before_script: bundle exec jekyll --version
|
||||
script: bundle exec rake features_with_coveralls
|
||||
rvm:
|
||||
- 2.2.0
|
||||
- 2.1.0
|
||||
- 2.0.0
|
||||
- 1.9.3
|
||||
- rbx-2
|
||||
- 2.2
|
||||
- 2.1
|
||||
- 2.0
|
||||
- 1.9
|
||||
|
||||
4
Gemfile
4
Gemfile
@ -7,4 +7,8 @@ group :development do
|
||||
gem 'test-unit', '~> 3.1'
|
||||
|
||||
gem 'coveralls', :require => false
|
||||
|
||||
platform :ruby_18, :ruby_19 do
|
||||
gem 'simplecov', '>= 0.10', '< 0.12'
|
||||
end
|
||||
end
|
||||
|
||||
38
README.md
38
README.md
@ -2,24 +2,25 @@
|
||||
|
||||
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/).
|
||||
|
||||
[](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image)
|
||||
[](https://coveralls.io/github/wildlyinaccurate/jekyll-responsive-images?branch=master)
|
||||
[](https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images)
|
||||
[](https://travis-ci.org/wildlyinaccurate/jekyll-responsive-image)
|
||||
[](https://coveralls.io/repos/github/wildlyinaccurate/jekyll-responsive-image/badge.svg?branch=master)
|
||||
[](https://gemnasium.com/wildlyinaccurate/jekyll-responsive-images)
|
||||
|
||||
## Installation
|
||||
|
||||
You can either use the gem and update your `_config.yml`:
|
||||
First, install the gem:
|
||||
|
||||
```
|
||||
$ gem install jekyll-responsive_image
|
||||
```
|
||||
|
||||
Then you can either add it to the `gems` section of your `_config.yml`:
|
||||
|
||||
```yaml
|
||||
# _config.yml
|
||||
gems: [jekyll-responsive_image]
|
||||
gems: [jekyll/responsive_image]
|
||||
```
|
||||
|
||||
Or you can simply copy [`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
|
||||
|
||||
@ -45,11 +46,17 @@ responsive_image:
|
||||
- width: 1400
|
||||
quality: 90
|
||||
|
||||
# [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)
|
||||
@ -57,6 +64,14 @@ responsive_image:
|
||||
# %{height} Height of the resized image
|
||||
#
|
||||
output_path_format: assets/resized/%{width}/%{basename}
|
||||
|
||||
# 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}
|
||||
```
|
||||
|
||||
## Usage
|
||||
@ -83,7 +98,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 important!
|
||||
> **Important!** The attributes in the `responsive_image_block` tag are parsed as YAML, so whitespace and indentation are significant!
|
||||
|
||||
```twig
|
||||
{% assign path = 'assets/test.png' %}
|
||||
@ -111,7 +126,7 @@ You will need to create a template in order to use the `responsive_image` tag. B
|
||||
{% endfor %}
|
||||
{% endcapture %}
|
||||
|
||||
<img src="/{{ path }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
|
||||
<img src="/{{ path }}" alt="{{ alt }}" srcset="{{ srcset | strip_newlines }} /{{ original.path }} {{ original.width }}w">
|
||||
```
|
||||
|
||||
#### Responsive images with `<picture>`
|
||||
@ -127,7 +142,7 @@ You will need to create a template in order to use the `responsive_image` tag. B
|
||||
|
||||
#### Responsive images using [Imager.js](https://github.com/BBC-News/Imager.js/)
|
||||
|
||||
> This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
||||
> **Note:** This template assumes an `output_path_format` of `assets/resized/%{width}/%{basename}`
|
||||
|
||||
```twig
|
||||
{% assign smallest = resized | sort: 'width' | first %}
|
||||
@ -163,10 +178,11 @@ The following variables are available in the template:
|
||||
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`). |
|
||||
|
||||
43
features/extra-image-generation.feature
Normal file
43
features/extra-image-generation.feature
Normal file
@ -0,0 +1,43 @@
|
||||
Feature: Extra image generation
|
||||
As a Jekyll user
|
||||
I want to resize images that aren't used in posts or pages
|
||||
In order to use them in my stylesheets
|
||||
|
||||
Scenario: Resizing a single image
|
||||
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 image "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should have the dimensions "100x50"
|
||||
|
||||
Scenario: Using glob patterns
|
||||
Given I have a responsive_image configuration with:
|
||||
"""
|
||||
sizes:
|
||||
- width: 100
|
||||
|
||||
extra_images:
|
||||
- assets/*.png
|
||||
"""
|
||||
|
||||
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"
|
||||
|
||||
Scenario: No extra images
|
||||
Given I have a responsive_image configuration with:
|
||||
"""
|
||||
sizes:
|
||||
- width: 100
|
||||
"""
|
||||
|
||||
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
|
||||
1
features/fixtures/_includes/base-url.html
Normal file
1
features/fixtures/_includes/base-url.html
Normal file
@ -0,0 +1 @@
|
||||
<img src="{{ site.baseurl }}/{{ path }}">
|
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
BIN
features/fixtures/assets/subdir/test.png
Normal file
BIN
features/fixtures/assets/subdir/test.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
36
features/image-generation.feature
Normal file
36
features/image-generation.feature
Normal file
@ -0,0 +1,36 @@
|
||||
Feature: Responsive image generation
|
||||
As a Jekyll user
|
||||
I want to generate responsive images
|
||||
In order to use them on my pages
|
||||
|
||||
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"
|
||||
|
||||
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 "assets/resized/subdir/test-100.png" should exist
|
||||
@ -7,7 +7,7 @@ Feature: Jekyll responsive_image_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/test.png' %}
|
||||
{% assign path = 'assets/everybody-loves-jalapeño-pineapple-cornbread.png' %}
|
||||
{% assign alt = 'Lorem ipsum' %}
|
||||
|
||||
{% responsive_image_block %}
|
||||
@ -17,13 +17,29 @@ Feature: Jekyll responsive_image_block tag
|
||||
{% endresponsive_image_block %}
|
||||
"""
|
||||
When I run Jekyll
|
||||
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\" title=\"Magic rainbow adventure!\"" in "_site/index.html"
|
||||
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"
|
||||
|
||||
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/test.png' %}
|
||||
{% assign path = 'assets/everybody-loves-jalapeño-pineapple-cornbread.png' %}
|
||||
{% assign alt = 'Lorem ipsum' %}
|
||||
|
||||
{% responsive_image_block %}
|
||||
@ -37,7 +53,7 @@ Feature: Jekyll responsive_image_block tag
|
||||
{% endresponsive_image_block %}
|
||||
"""
|
||||
When I run Jekyll
|
||||
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/test.png\"" in "_site/index.html"
|
||||
Then I should see "<img alt=\"Lorem ipsum\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.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"
|
||||
|
||||
@ -5,24 +5,35 @@ Feature: Jekyll responsive_image tag
|
||||
|
||||
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/test.png alt: Foobar %}"
|
||||
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 I should see "<img alt=\"Foobar\" src=\"/assets/test.png\"" in "_site/index.html"
|
||||
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"
|
||||
|
||||
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/test.png alt: 'Foobar bazbar' title: "Lorem Ipsum" %}
|
||||
{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: 'Foobar bazbar' title: "Lorem Ipsum" %}
|
||||
"""
|
||||
When I run Jekyll
|
||||
Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/test.png\" title=\"Lorem Ipsum\"" in "_site/index.html"
|
||||
Then I should see "<img alt=\"Foobar bazbar\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.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/test.png alt: 'かっこいい！ ジェケルが好きです！' %}"
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png alt: 'かっこいい！ ジェケルが好きです！' %}"
|
||||
When I run Jekyll
|
||||
Then I should see "<img alt=\"かっこいい！ ジェケルが好きです！\" src=\"/assets/test.png\"" in "_site/index.html"
|
||||
Then I should see "<img alt=\"かっこいい！ ジェケルが好きです！\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\"" in "_site/index.html"
|
||||
|
||||
Scenario: Image with multiple sizes
|
||||
Given I have a responsive_image configuration with:
|
||||
@ -32,14 +43,14 @@ Feature: Jekyll responsive_image tag
|
||||
- width: 100
|
||||
- width: 200
|
||||
"""
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.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 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
|
||||
Then I should see "<img alt=\"\" src=\"/assets/everybody-loves-jalapeño-pineapple-cornbread.png\"" in "_site/index.html"
|
||||
And I should see "/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png 100w" in "_site/index.html"
|
||||
And I should see "/assets/resized/everybody-loves-jalapeño-pineapple-cornbread-200x100.png 200w" in "_site/index.html"
|
||||
And I should see "/assets/everybody-loves-jalapeño-pineapple-cornbread.png 300w" in "_site/index.html"
|
||||
And the file "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-100x50.png" should exist
|
||||
And the file "assets/resized/everybody-loves-jalapeño-pineapple-cornbread-200x100.png" should exist
|
||||
|
||||
Scenario: Overriding the template
|
||||
Given I have a responsive_image configuration with:
|
||||
@ -50,7 +61,7 @@ Feature: Jekyll responsive_image tag
|
||||
- width: 200
|
||||
- width: 300
|
||||
"""
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/test.png template: _includes/custom-template.html %}"
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png template: _includes/custom-template.html %}"
|
||||
When I run Jekyll
|
||||
Then I should see "[100, 200, 300]" in "_site/index.html"
|
||||
|
||||
@ -58,11 +69,11 @@ Feature: Jekyll responsive_image tag
|
||||
Given I have a responsive_image configuration with:
|
||||
"""
|
||||
template: _includes/responsive-image.html
|
||||
output_path_format: assets/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
|
||||
output_path_format: assets/%{dirname}/%{basename}-resized/%{width}/%{filename}-%{height}.%{extension}
|
||||
sizes:
|
||||
- width: 100
|
||||
"""
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/test.png %}"
|
||||
And I have a file "index.html" with "{% responsive_image path: assets/everybody-loves-jalapeño-pineapple-cornbread.png %}"
|
||||
When I run Jekyll
|
||||
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
|
||||
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"
|
||||
And the file "assets/everybody-loves-jalapeño-pineapple-cornbread.png-resized/100/everybody-loves-jalapeño-pineapple-cornbread-50.png" should exist
|
||||
|
||||
@ -8,6 +8,10 @@ Then /^Jekyll should throw a "(.+)"$/ do |error_class|
|
||||
assert_raise(Object.const_get(error_class)) { run_jekyll }
|
||||
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
|
||||
@ -29,7 +33,17 @@ Then /^I should see "(.+)" in "(.*)"$/ do |text, file|
|
||||
end
|
||||
|
||||
Then /^the file "(.+)" should exist$/ do |path|
|
||||
assert File.exists?(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
|
||||
|
||||
def write_file(path, contents)
|
||||
|
||||
@ -29,5 +29,5 @@ Gem::Specification.new do |spec|
|
||||
end
|
||||
|
||||
spec.add_runtime_dependency 'jekyll', ['>= 2.0', "< #{max_jekyll_version}"]
|
||||
spec.add_runtime_dependency 'rmagick'
|
||||
spec.add_runtime_dependency 'rmagick', ['>= 2.0', '< 3.0']
|
||||
end
|
||||
|
||||
@ -7,11 +7,13 @@ require 'rmagick'
|
||||
require 'jekyll/responsive_image/version'
|
||||
require 'jekyll/responsive_image/defaults'
|
||||
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/common'
|
||||
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)
|
||||
|
||||
@ -4,9 +4,15 @@ module Jekyll
|
||||
include Jekyll::ResponsiveImage::Common
|
||||
|
||||
def render(context)
|
||||
config = make_config(context.registers[:site])
|
||||
|
||||
attributes = YAML.load(super)
|
||||
|
||||
cache_key = attributes.to_s
|
||||
result = attributes['cache'] ? RenderCache.get(cache_key) : nil
|
||||
|
||||
if result.nil?
|
||||
site = context.registers[:site]
|
||||
config = make_config(site)
|
||||
|
||||
image_template = attributes['template'] || config['template']
|
||||
|
||||
image = ImageProcessor.process(attributes['path'], config)
|
||||
@ -16,7 +22,12 @@ module Jekyll
|
||||
partial = File.read(image_template)
|
||||
template = Liquid::Template.parse(partial)
|
||||
|
||||
template.render!(attributes)
|
||||
result = template.render!(attributes.merge(site.site_payload))
|
||||
|
||||
RenderCache.set(cache_key, result)
|
||||
end
|
||||
|
||||
result
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -7,7 +7,9 @@ module Jekyll
|
||||
config = ResponsiveImage.defaults.dup.merge(site.config['responsive_image']).merge(:site_dest => site.dest)
|
||||
|
||||
# Not very nice, but this is needed to create a clean path to add to keep_files
|
||||
output_dir = format_output_path(config['output_path_format'], '*', '*', '*')
|
||||
output_dir = format_output_path(config['output_path_format'], config['base_path'], '*', '*', '*')
|
||||
output_dir = "#{File.dirname(output_dir)}/*"
|
||||
|
||||
site.config['keep_files'] << output_dir unless site.config['keep_files'].include?(output_dir)
|
||||
|
||||
config
|
||||
|
||||
@ -2,8 +2,10 @@ module Jekyll
|
||||
class ResponsiveImage
|
||||
@defaults = {
|
||||
'default_quality' => 85,
|
||||
'base_path' => 'assets',
|
||||
'output_path_format' => 'assets/resized/%{filename}-%{width}x%{height}.%{extension}',
|
||||
'sizes' => [],
|
||||
'extra_images' => []
|
||||
}.freeze
|
||||
|
||||
class << self
|
||||
|
||||
15
lib/jekyll/responsive_image/extra_image_generator.rb
Normal file
15
lib/jekyll/responsive_image/extra_image_generator.rb
Normal file
@ -0,0 +1,15 @@
|
||||
module Jekyll
|
||||
class ResponsiveImage
|
||||
class ExtraImageGenerator < Jekyll::Generator
|
||||
include Jekyll::ResponsiveImage::Common
|
||||
|
||||
def generate(site)
|
||||
config = make_config(site)
|
||||
|
||||
config['extra_images'].each do |pathspec|
|
||||
Dir.glob(pathspec) { |path| ImageProcessor.process(path, config) }
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
@ -4,13 +4,13 @@ module Jekyll
|
||||
include ResponsiveImage::Utils
|
||||
|
||||
def process(image_path, config)
|
||||
raise SyntaxError.new("Invalid image path specified: #{image_path}") unless File.exists?(image_path.to_s)
|
||||
raise SyntaxError.new("Invalid image path specified: #{image_path}") unless File.exist?(image_path.to_s)
|
||||
|
||||
resize_handler = ResizeHandler.new
|
||||
img = Magick::Image::read(image_path).first
|
||||
|
||||
{
|
||||
original: image_hash(image_path, img.columns, img.rows),
|
||||
original: image_hash(config['base_path'], image_path, img.columns, img.rows),
|
||||
resized: resize_handler.resize_image(img, config),
|
||||
}
|
||||
end
|
||||
|
||||
21
lib/jekyll/responsive_image/render_cache.rb
Normal file
21
lib/jekyll/responsive_image/render_cache.rb
Normal file
@ -0,0 +1,21 @@
|
||||
module Jekyll
|
||||
class 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
|
||||
@ -13,11 +13,12 @@ module Jekyll
|
||||
|
||||
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))
|
||||
image_path = img.filename.force_encoding(Encoding::UTF_8)
|
||||
filepath = format_output_path(config['output_path_format'], config['base_path'], image_path, width, height)
|
||||
resized.push(image_hash(config['base_path'], filepath, width, height))
|
||||
|
||||
# Don't resize images more than once
|
||||
next if File.exists?(filepath)
|
||||
next if File.exist?(filepath)
|
||||
|
||||
ensure_output_dir_exists!(File.dirname(filepath))
|
||||
|
||||
@ -36,6 +37,8 @@ module Jekyll
|
||||
i.destroy!
|
||||
end
|
||||
|
||||
img.destroy!
|
||||
|
||||
resized
|
||||
end
|
||||
|
||||
@ -44,7 +47,7 @@ module Jekyll
|
||||
end
|
||||
|
||||
def ensure_output_dir_exists!(dir)
|
||||
unless Dir.exists?(dir)
|
||||
unless Dir.exist?(dir)
|
||||
Jekyll.logger.info "Creating output directory #{dir}"
|
||||
FileUtils.mkdir_p(dir)
|
||||
end
|
||||
|
||||
@ -15,7 +15,12 @@ module Jekyll
|
||||
end
|
||||
|
||||
def render(context)
|
||||
config = make_config(context.registers[:site])
|
||||
cache_key = @attributes.to_s
|
||||
result = @attributes['cache'] ? RenderCache.get(cache_key) : nil
|
||||
|
||||
if result.nil?
|
||||
site = context.registers[:site]
|
||||
config = make_config(site)
|
||||
|
||||
image = ImageProcessor.process(@attributes['path'], config)
|
||||
@attributes['original'] = image[:original]
|
||||
@ -26,7 +31,12 @@ module Jekyll
|
||||
partial = File.read(image_template)
|
||||
template = Liquid::Template.parse(partial)
|
||||
|
||||
template.render!(@attributes)
|
||||
result = template.render!(@attributes.merge(site.site_payload))
|
||||
|
||||
RenderCache.set(cache_key, result)
|
||||
end
|
||||
|
||||
result
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,3 +1,5 @@
|
||||
require 'pathname'
|
||||
|
||||
module Jekyll
|
||||
class ResponsiveImage
|
||||
module Utils
|
||||
@ -9,22 +11,31 @@ module Jekyll
|
||||
result
|
||||
end
|
||||
|
||||
def format_output_path(format, path, width, height)
|
||||
params = symbolize_keys(image_hash(path, width, height))
|
||||
format % params
|
||||
def format_output_path(format, base_path, image_path, width, height)
|
||||
params = symbolize_keys(image_hash(base_path, image_path, width, height))
|
||||
|
||||
Pathname.new(format % params).cleanpath.to_s
|
||||
end
|
||||
|
||||
# Build a hash containing image information
|
||||
def image_hash(path, width, height)
|
||||
def image_hash(base_path, image_path, width, height)
|
||||
{
|
||||
'path' => path,
|
||||
'basename' => File.basename(path),
|
||||
'filename' => File.basename(path, '.*'),
|
||||
'extension' => File.extname(path).delete('.'),
|
||||
'path' => image_path,
|
||||
'dirname' => relative_dirname(base_path, 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(base_path, image_path)
|
||||
path = Pathname.new(image_path).expand_path
|
||||
base = Pathname.new(base_path).expand_path
|
||||
|
||||
path.relative_path_from(base).dirname.to_s.delete('.')
|
||||
end
|
||||
end
|
||||
end
|
||||
end
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
module Jekyll
|
||||
class ResponsiveImage
|
||||
VERSION = '0.12.0'.freeze
|
||||
VERSION = '0.18.0'.freeze
|
||||
end
|
||||
end
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user