jekyll-srcset2 0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.gitignore +14 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +120 -0
- data/Rakefile +2 -0
- data/jekyll-srcset.gemspec +32 -0
- data/lib/jekyll-srcset.rb +3 -0
- data/lib/jekyll/srcset.rb +8 -0
- data/lib/jekyll/srcset/tag.rb +156 -0
- data/lib/jekyll/srcset/version.rb +5 -0
- metadata +118 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 250ccab63573fe6b70eb82aa4a1f2d8ec4c9dd3c
|
4
|
+
data.tar.gz: c451c1f25a511cd331aaf2146046a508078ba02c
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 8754d391e0b766382c2311fc05216fbf9c2171ce4c828b6a19ae35bf8f450d363d2e33067adacb59eea5f700c4b909df35afde81e3bf59955888da28f55f2048
|
7
|
+
data.tar.gz: bae0d544248ed7cdea6b54a7a57270b720fd290b8487e901cb493d2fbedd22c20198ffc133df9f529e3b46f7964a30a0f589af5b012a0498f3f498ec1fc1738b
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2015 Mathias Biilmann Christensen, MakerLoop Inc
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,120 @@
|
|
1
|
+
# Jekyll Srcset
|
2
|
+
|
3
|
+
This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities.
|
4
|
+
|
5
|
+
The plugin adds an `image_tag` Liquid tag that can be used like this:
|
6
|
+
|
7
|
+
```html
|
8
|
+
{% image_tag src="/image.png" width="100" %}
|
9
|
+
```
|
10
|
+
|
11
|
+
This will generate the right images and output something like:
|
12
|
+
|
13
|
+
```html
|
14
|
+
<img src="/image-100x50.png" srcset="/image-100x50.png 1x, /image-200x100.png 2x, /image-300x150.png 3x" width="100">
|
15
|
+
```
|
16
|
+
|
17
|
+
## Installation
|
18
|
+
|
19
|
+
Add this line to your Gemfile:
|
20
|
+
|
21
|
+
```ruby
|
22
|
+
gem 'jekyll-srcset2'
|
23
|
+
```
|
24
|
+
|
25
|
+
And then execute:
|
26
|
+
|
27
|
+
$ bundle
|
28
|
+
|
29
|
+
Or install it yourself as:
|
30
|
+
|
31
|
+
$ gem install jekyll-srcset2
|
32
|
+
|
33
|
+
Then add the gem to your Jekyll `_config.yml`:
|
34
|
+
|
35
|
+
```yml
|
36
|
+
gems:
|
37
|
+
- jekyll-srcset
|
38
|
+
```
|
39
|
+
|
40
|
+
## Usage
|
41
|
+
|
42
|
+
Use it like this in any Liquid template:
|
43
|
+
|
44
|
+
```html
|
45
|
+
{% image_tag src="/image.png" width="100" %}
|
46
|
+
```
|
47
|
+
|
48
|
+
You must specify either a `width` or a `height`, but never both. The width or height will be used to determine the smallest version of the image to use (for 1x pixel density devices). Based on this minimum size, the plugin will generate up to 3 versions of the image, one that matches the dimension specified, one that's twice the size and one that's 3 times the size. The plugin never upscales an image.
|
49
|
+
|
50
|
+
The plugin sets these as a srcset attribute on the final image tag, and modern browsers will then use this information to determine which version of the image to load based on the pixel density of the device (and in the future, potentially based on bandwidth or user settings).
|
51
|
+
|
52
|
+
This makes it a really straight forward way to serve the right size of image in all modern browsers and in works fine in older browsers without any polyfill (there's not a lot of high pixel density devices out there that runs old browsers, so simply serving the smallest version to the ones that don't understand srcset is fine).
|
53
|
+
|
54
|
+
To use variables for the image or the dimensions, simply leave out the quotes:
|
55
|
+
|
56
|
+
```html
|
57
|
+
{% image_tag src=page.cover_image height=page.cover_image_height %}
|
58
|
+
```
|
59
|
+
|
60
|
+
## Optipng
|
61
|
+
|
62
|
+
If you have `optipng` installed and in your PATH, you can tell the plugin to run it on all generated png images.
|
63
|
+
|
64
|
+
Just add:
|
65
|
+
|
66
|
+
```
|
67
|
+
srcset:
|
68
|
+
optipng: true
|
69
|
+
```
|
70
|
+
|
71
|
+
To your \_config.yml
|
72
|
+
|
73
|
+
## Mozjpeg
|
74
|
+
|
75
|
+
If you have `cjpeg` installed and added to your PATH, you can tell the plugin to optimize all output jpegs.
|
76
|
+
If you get the error `Unrecognized input file format --- perhaps you need -targa`, you have a different
|
77
|
+
cjpeg binary in your PATH. Make sure the Mozjpeg version is before it.
|
78
|
+
|
79
|
+
Just add:
|
80
|
+
|
81
|
+
```
|
82
|
+
srcset:
|
83
|
+
cjpeg: true
|
84
|
+
```
|
85
|
+
|
86
|
+
To your \_config.yml
|
87
|
+
|
88
|
+
**Note**: This can increase the generation time of your site significantly depending on how many images you have.
|
89
|
+
Also, you may want to bump the quality setting if you see more artifacts in the Mozjpeg-generated version.
|
90
|
+
|
91
|
+
## Caching images
|
92
|
+
|
93
|
+
Optimizing and resizing can take a while for some images. You can specify a cache folder in your Jekyll config to let jekyll-srcset cache images between runs.
|
94
|
+
|
95
|
+
```
|
96
|
+
srcset:
|
97
|
+
cache: "/tmp/images"
|
98
|
+
```
|
99
|
+
|
100
|
+
## JPEG quality
|
101
|
+
If you need to set jpeg quality you can use this option (default is 80).
|
102
|
+
|
103
|
+
```
|
104
|
+
srcset:
|
105
|
+
jpeg_quality: 60
|
106
|
+
```
|
107
|
+
|
108
|
+
## Contributing
|
109
|
+
|
110
|
+
1. Fork it ( https://github.com/[my-github-username]/jekyll-srcset/fork )
|
111
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
112
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
113
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
114
|
+
5. Create a new Pull Request
|
115
|
+
|
116
|
+
## Host your Jekyll sites with netlify
|
117
|
+
|
118
|
+
This plugin is developed by netlify, [the premium hosting for static websites](https://www.netlify.com).
|
119
|
+
|
120
|
+
You can use netlify if you're using custom plugins with your Jekyll sites. When you push to git, netlify will build your Jekyll site and deploy the result to a global CDN, while handling asset fingerprinting, caching headers, bundling, minification and true instant cache invalidation. A 1-click operation with no other setup needed.
|
data/Rakefile
ADDED
@@ -0,0 +1,32 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'jekyll/srcset/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "jekyll-srcset2"
|
8
|
+
spec.version = Jekyll::Srcset::VERSION
|
9
|
+
spec.authors = ["Jason Gabriele", "Mathias Biilmann Christensen"]
|
10
|
+
spec.email = ["jason.gabriele@gmail.com", "info@mathias-biilmann.net"]
|
11
|
+
spec.summary = %q{This Jekyll plugin ads an image_tag that will generate responsive img tags}
|
12
|
+
spec.description = %q{
|
13
|
+
This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities.
|
14
|
+
|
15
|
+
The plugin adds an `image_tag` Liquid tag that can be used like this:
|
16
|
+
|
17
|
+
\{% image_tag src="/image.png" width="100" %\}
|
18
|
+
}
|
19
|
+
spec.homepage = "https://github.com/niveus/jekyll-srcset"
|
20
|
+
spec.license = "MIT"
|
21
|
+
|
22
|
+
spec.files = `git ls-files -z`.split("\x0")
|
23
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
24
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
25
|
+
spec.require_paths = ["lib"]
|
26
|
+
|
27
|
+
spec.add_dependency "rmagick"
|
28
|
+
|
29
|
+
spec.add_development_dependency "bundler", "~> 1.7"
|
30
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
31
|
+
spec.add_runtime_dependency 'jekyll', '~> 3.0'
|
32
|
+
end
|
@@ -0,0 +1,156 @@
|
|
1
|
+
require "RMagick"
|
2
|
+
require "digest/sha1"
|
3
|
+
|
4
|
+
module Jekyll
|
5
|
+
class SrcsetTag < Liquid::Tag
|
6
|
+
include Magick
|
7
|
+
attr_accessor :markup
|
8
|
+
|
9
|
+
# Default quality
|
10
|
+
DEFAULT_QUALITY = 80
|
11
|
+
|
12
|
+
def self.optipng?
|
13
|
+
@optinpng ||= system("which", "optipng", :out => File::NULL)
|
14
|
+
end
|
15
|
+
|
16
|
+
def self.cjpeg?
|
17
|
+
@cjpeg ||= system("which", "cjpeg", :out => File::NULL)
|
18
|
+
end
|
19
|
+
|
20
|
+
def initialize(tag_name, markup, _)
|
21
|
+
@markup = markup
|
22
|
+
super
|
23
|
+
end
|
24
|
+
|
25
|
+
def render(context)
|
26
|
+
options = parse_options(markup, context)
|
27
|
+
|
28
|
+
return "Bad options to image_tag, syntax is: {% image_tag src=\"image.png\" width=\"100\"}" unless options["src"]
|
29
|
+
return "Error resizing - can't set both width and height" if options["width"] && options["height"]
|
30
|
+
|
31
|
+
site = context.registers[:site]
|
32
|
+
img_attrs = generate_image(site, options["src"], options)
|
33
|
+
|
34
|
+
srcset = []
|
35
|
+
(1..3).each do |factor|
|
36
|
+
srcset << {:factor => factor, :img => generate_image(site, options["src"], options.merge("factor" => factor))}
|
37
|
+
end
|
38
|
+
img_attrs["srcset"] = srcset.map {|i| "#{i[:img]["src"]} #{i[:factor]}x"}.join(", ")
|
39
|
+
|
40
|
+
"<img #{options.merge(img_attrs).map {|k,v| "#{k}=\"#{v}\""}.join(" ")}>"
|
41
|
+
end
|
42
|
+
|
43
|
+
def parse_options(markup, context)
|
44
|
+
options = {}
|
45
|
+
markup.scan(/(\w+)=((?:"[^"]+")|(?:'[^']+')|[\w\.\_-]+)/) do |key,value|
|
46
|
+
if (value[0..0] == "'" && value[-1..-1]) == "'" || (value[0..0] == '"' && value[-1..-1] == '"')
|
47
|
+
options[key] = value[1..-2]
|
48
|
+
else
|
49
|
+
options[key] = context[value]
|
50
|
+
end
|
51
|
+
end
|
52
|
+
options
|
53
|
+
end
|
54
|
+
|
55
|
+
def config(site)
|
56
|
+
site.config['srcset'] || {}
|
57
|
+
end
|
58
|
+
|
59
|
+
def optimize?(site)
|
60
|
+
config(site)['optipng']
|
61
|
+
end
|
62
|
+
|
63
|
+
def cjpeg?(site)
|
64
|
+
config(site)['cjpeg']
|
65
|
+
end
|
66
|
+
|
67
|
+
def cache_dir(site)
|
68
|
+
config(site)['cache']
|
69
|
+
end
|
70
|
+
|
71
|
+
def jpeg_quality(site)
|
72
|
+
if config(site).key? 'jpeg_quality'
|
73
|
+
config(site)['jpeg_quality']
|
74
|
+
else
|
75
|
+
DEFAULT_QUALITY
|
76
|
+
end
|
77
|
+
end
|
78
|
+
|
79
|
+
def generate_image(site, src, attrs)
|
80
|
+
cache = cache_dir(site)
|
81
|
+
sha = cache && Digest::SHA1.hexdigest(attrs.sort.inspect + File.read(File.join(site.source, src)) + (optimize?(site) ? "optimize" : ""))
|
82
|
+
if sha
|
83
|
+
if File.exists?(File.join(cache, sha))
|
84
|
+
img_attrs = JSON.parse(File.read(File.join(cache,sha,"json")))
|
85
|
+
filename = img_attrs["src"].sub(/^\//, '')
|
86
|
+
dest = File.join(site.dest, filename)
|
87
|
+
FileUtils.mkdir_p(File.dirname(dest))
|
88
|
+
FileUtils.cp(File.join(cache,sha,"img"), dest)
|
89
|
+
|
90
|
+
site.config['keep_files'] << filename unless site.config['keep_files'].include?(filename)
|
91
|
+
|
92
|
+
return img_attrs
|
93
|
+
end
|
94
|
+
end
|
95
|
+
|
96
|
+
img = Image.read(File.join(site.source, src)).first
|
97
|
+
img_attrs = {}
|
98
|
+
|
99
|
+
if attrs["height"]
|
100
|
+
scale = attrs["height"].to_f * (attrs["factor"] || 1) / img.rows.to_f
|
101
|
+
elsif attrs["width"]
|
102
|
+
scale = attrs["width"].to_f * (attrs["factor"] || 1) / img.columns.to_f
|
103
|
+
else
|
104
|
+
scale = attrs["factor"] || 1
|
105
|
+
end
|
106
|
+
|
107
|
+
img_attrs["height"] = attrs["height"] if attrs["height"]
|
108
|
+
img_attrs["width"] = attrs["width"] if attrs["width"]
|
109
|
+
img_width = img.columns * scale
|
110
|
+
img_height = img.rows * scale
|
111
|
+
img_attrs["src"] = src.sub(/(\.\w+)$/, "-" + (img_width.to_int.to_s) + "x" + (img_height.to_int.to_s) + '\1')
|
112
|
+
|
113
|
+
filename = img_attrs["src"].sub(/^\//, '')
|
114
|
+
dest = File.join(site.dest, filename)
|
115
|
+
FileUtils.mkdir_p(File.dirname(dest))
|
116
|
+
|
117
|
+
unless File.exist?(dest)
|
118
|
+
img.scale!(scale) if scale <= 1
|
119
|
+
img.strip!
|
120
|
+
|
121
|
+
# Write resized file
|
122
|
+
if dest.match(/\.jpe?g$/)
|
123
|
+
quality = jpeg_quality(site)
|
124
|
+
img.write(dest) do self.quality = quality end
|
125
|
+
else
|
126
|
+
img.write(dest)
|
127
|
+
end
|
128
|
+
|
129
|
+
# Optimize pngs
|
130
|
+
if dest.match(/\.png$/) && optimize?(site) && self.class.optipng?
|
131
|
+
IO.popen(["optipng", dest])
|
132
|
+
end
|
133
|
+
|
134
|
+
# Optimize jpegs using Mozjpeg
|
135
|
+
if dest.match(/\.jpe?g$/) && cjpeg?(site) && self.class.cjpeg?
|
136
|
+
IO.popen(["cjpeg", "-quality", jpeg_quality(site).to_s, dest])
|
137
|
+
end
|
138
|
+
end
|
139
|
+
|
140
|
+
site.config['keep_files'] << filename unless site.config['keep_files'].include?(filename)
|
141
|
+
|
142
|
+
# Keep files around for incremental builds in Jekyll 3
|
143
|
+
site.regenerator.add(filename) if site.respond_to?(:regenerator)
|
144
|
+
|
145
|
+
if sha
|
146
|
+
FileUtils.mkdir_p(File.join(cache, sha))
|
147
|
+
FileUtils.cp(dest, File.join(cache, sha, "img"))
|
148
|
+
File.open(File.join(cache, sha, "json"), "w") do |f|
|
149
|
+
f.write(JSON.generate(img_attrs))
|
150
|
+
end
|
151
|
+
end
|
152
|
+
|
153
|
+
img_attrs
|
154
|
+
end
|
155
|
+
end
|
156
|
+
end
|
metadata
ADDED
@@ -0,0 +1,118 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: jekyll-srcset2
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: '0.2'
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Jason Gabriele
|
8
|
+
- Mathias Biilmann Christensen
|
9
|
+
autorequire:
|
10
|
+
bindir: bin
|
11
|
+
cert_chain: []
|
12
|
+
date: 2017-06-03 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: rmagick
|
16
|
+
requirement: !ruby/object:Gem::Requirement
|
17
|
+
requirements:
|
18
|
+
- - ">="
|
19
|
+
- !ruby/object:Gem::Version
|
20
|
+
version: '0'
|
21
|
+
type: :runtime
|
22
|
+
prerelease: false
|
23
|
+
version_requirements: !ruby/object:Gem::Requirement
|
24
|
+
requirements:
|
25
|
+
- - ">="
|
26
|
+
- !ruby/object:Gem::Version
|
27
|
+
version: '0'
|
28
|
+
- !ruby/object:Gem::Dependency
|
29
|
+
name: bundler
|
30
|
+
requirement: !ruby/object:Gem::Requirement
|
31
|
+
requirements:
|
32
|
+
- - "~>"
|
33
|
+
- !ruby/object:Gem::Version
|
34
|
+
version: '1.7'
|
35
|
+
type: :development
|
36
|
+
prerelease: false
|
37
|
+
version_requirements: !ruby/object:Gem::Requirement
|
38
|
+
requirements:
|
39
|
+
- - "~>"
|
40
|
+
- !ruby/object:Gem::Version
|
41
|
+
version: '1.7'
|
42
|
+
- !ruby/object:Gem::Dependency
|
43
|
+
name: rake
|
44
|
+
requirement: !ruby/object:Gem::Requirement
|
45
|
+
requirements:
|
46
|
+
- - "~>"
|
47
|
+
- !ruby/object:Gem::Version
|
48
|
+
version: '10.0'
|
49
|
+
type: :development
|
50
|
+
prerelease: false
|
51
|
+
version_requirements: !ruby/object:Gem::Requirement
|
52
|
+
requirements:
|
53
|
+
- - "~>"
|
54
|
+
- !ruby/object:Gem::Version
|
55
|
+
version: '10.0'
|
56
|
+
- !ruby/object:Gem::Dependency
|
57
|
+
name: jekyll
|
58
|
+
requirement: !ruby/object:Gem::Requirement
|
59
|
+
requirements:
|
60
|
+
- - "~>"
|
61
|
+
- !ruby/object:Gem::Version
|
62
|
+
version: '3.0'
|
63
|
+
type: :runtime
|
64
|
+
prerelease: false
|
65
|
+
version_requirements: !ruby/object:Gem::Requirement
|
66
|
+
requirements:
|
67
|
+
- - "~>"
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: '3.0'
|
70
|
+
description: |2
|
71
|
+
|
72
|
+
This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities.
|
73
|
+
|
74
|
+
The plugin adds an `image_tag` Liquid tag that can be used like this:
|
75
|
+
|
76
|
+
{% image_tag src="/image.png" width="100" %}
|
77
|
+
email:
|
78
|
+
- jason.gabriele@gmail.com
|
79
|
+
- info@mathias-biilmann.net
|
80
|
+
executables: []
|
81
|
+
extensions: []
|
82
|
+
extra_rdoc_files: []
|
83
|
+
files:
|
84
|
+
- ".gitignore"
|
85
|
+
- Gemfile
|
86
|
+
- LICENSE.txt
|
87
|
+
- README.md
|
88
|
+
- Rakefile
|
89
|
+
- jekyll-srcset.gemspec
|
90
|
+
- lib/jekyll-srcset.rb
|
91
|
+
- lib/jekyll/srcset.rb
|
92
|
+
- lib/jekyll/srcset/tag.rb
|
93
|
+
- lib/jekyll/srcset/version.rb
|
94
|
+
homepage: https://github.com/niveus/jekyll-srcset
|
95
|
+
licenses:
|
96
|
+
- MIT
|
97
|
+
metadata: {}
|
98
|
+
post_install_message:
|
99
|
+
rdoc_options: []
|
100
|
+
require_paths:
|
101
|
+
- lib
|
102
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
103
|
+
requirements:
|
104
|
+
- - ">="
|
105
|
+
- !ruby/object:Gem::Version
|
106
|
+
version: '0'
|
107
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
108
|
+
requirements:
|
109
|
+
- - ">="
|
110
|
+
- !ruby/object:Gem::Version
|
111
|
+
version: '0'
|
112
|
+
requirements: []
|
113
|
+
rubyforge_project:
|
114
|
+
rubygems_version: 2.6.10
|
115
|
+
signing_key:
|
116
|
+
specification_version: 4
|
117
|
+
summary: This Jekyll plugin ads an image_tag that will generate responsive img tags
|
118
|
+
test_files: []
|