jekyll-srcset 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 7c7418640e348e981fa4227f1441ae8e06cb2f67
4
+ data.tar.gz: ea892df1d928b935aad0ec409c8848a1b6d0157e
5
+ SHA512:
6
+ metadata.gz: a21c4aedeb8d0b6a6da50229a503e09924dd6783c27ef0394dc5b282fb9e4d8883588624404e7d2d121f7c74361614e6a44a342ec539a4b5e718e2bf85e053b5
7
+ data.tar.gz: 42417e1b5b3b66a9cd78f9ccaa5800ae567ef9d6496bae2df017e7f453f9308e10a0d09c6e540c797103e60697b9695d7834f14133f27506303dfb0c5b1075e9
@@ -0,0 +1,14 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ *.bundle
11
+ *.so
12
+ *.o
13
+ *.a
14
+ mkmf.log
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in jekyll-srcset.gemspec
4
+ gemspec
@@ -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.
@@ -0,0 +1,66 @@
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
+ ```liquid
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-srcset'
23
+ ```
24
+
25
+ And then execute:
26
+
27
+ $ bundle
28
+
29
+ Or install it yourself as:
30
+
31
+ $ gem install jekyll-srcset
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. 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.
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
+ ## Optipng
55
+
56
+ If you have `optipng` installed and in your PATH, the plugin wil automatically run it on all generated png images.
57
+
58
+ Currently the plugin doesn't optimize other image formats, except for stripping color palettes.
59
+
60
+ ## Contributing
61
+
62
+ 1. Fork it ( https://github.com/[my-github-username]/jekyll-srcset/fork )
63
+ 2. Create your feature branch (`git checkout -b my-new-feature`)
64
+ 3. Commit your changes (`git commit -am 'Add some feature'`)
65
+ 4. Push to the branch (`git push origin my-new-feature`)
66
+ 5. Create a new Pull Request
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+
@@ -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-srcset"
8
+ spec.version = Jekyll::Srcset::VERSION
9
+ spec.authors = ["Mathias Biilmann Christensen"]
10
+ spec.email = ["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 = ""
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'
32
+ end
@@ -0,0 +1,3 @@
1
+ require "jekyll/srcset"
2
+
3
+ Liquid::Template.register_tag('image_tag', Jekyll::SrcsetTag)
@@ -0,0 +1,8 @@
1
+ require "jekyll/srcset/version"
2
+ require "jekyll/srcset/tag"
3
+ require "jekyll"
4
+
5
+ module Jekyll
6
+ module Srcset
7
+ end
8
+ end
@@ -0,0 +1,78 @@
1
+ require "RMagick"
2
+
3
+ module Jekyll
4
+ class SrcsetTag < Liquid::Tag
5
+ include Magick
6
+ attr_accessor :markup
7
+
8
+ def self.optipng?
9
+ @optinpng ||= system("which optipng")
10
+ end
11
+
12
+ def initialize(tag_name, markup, _)
13
+ @markup = markup
14
+ super
15
+ end
16
+
17
+ def render(context)
18
+ options = parse_options(markup, context)
19
+
20
+ return "Bad options to image_tag, syntax is: {% image_tag src=\"image.png\" width=\"100\"}" unless options["src"]
21
+ return "Error resizing - can't set both width and height" if options["width"] && options["height"]
22
+
23
+ site = context.registers[:site]
24
+ img_attrs = generate_image(site, options["src"], options)
25
+
26
+ srcset = []
27
+ (1..3).each do |factor|
28
+ srcset << {:factor => factor, :img => generate_image(site, options["src"], options.merge("factor" => factor))}
29
+ end
30
+ img_attrs["srcset"] = srcset.map {|i| "#{i[:img]["src"]} #{i[:factor]}x"}.join(", ")
31
+
32
+ "<img #{options.merge(img_attrs).map {|k,v| "#{k}=\"#{v}\""}.join(" ")}>"
33
+ end
34
+
35
+ def parse_options(markup, context)
36
+ options = {}
37
+ markup.scan(/(\w+)=((?:"[^"]+")|(?:'[^']+')|[\w\.\_-]+)/) do |key,value|
38
+ if (value[0..0] == "'" && value[-1..-1]) == "'" || (value[0..0] == '"' && value[-1..-1] == '"')
39
+ options[key] = value[1..-2]
40
+ else
41
+ options[key] = context[value]
42
+ end
43
+ end
44
+ options
45
+ end
46
+
47
+ def generate_image(site, src, attrs)
48
+ img = Image.read(File.join(site.source, src)).first
49
+ img_attrs = {}
50
+
51
+ if attrs["height"]
52
+ scale = attrs["height"].to_f * (attrs["factor"] || 1) / img.rows.to_f
53
+ elsif attrs["width"]
54
+ scale = attrs["width"].to_f * (attrs["factor"] || 1) / img.columns.to_f
55
+ else
56
+ scale = attrs["factor"] || 1
57
+ end
58
+
59
+ img.scale!(scale) if scale <= 1
60
+ img_attrs["height"] = attrs["height"] if attrs["height"]
61
+ img_attrs["width"] = attrs["width"] if attrs["width"]
62
+
63
+ img_attrs["src"] = src.sub(/(\.\w+)$/, "-#{img.columns}x#{img.rows}" + '\1')
64
+ filename = img_attrs["src"].sub(/^\//, '')
65
+ dest = File.join(site.dest, filename)
66
+ FileUtils.mkdir_p(File.dirname(dest))
67
+ unless File.exist?(dest)
68
+ img.strip!
69
+ img.write(dest)
70
+ if dest.match(/\.png$/) && self.class.optipng?
71
+ `optipng #{dest}`
72
+ end
73
+ end
74
+ site.config['keep_files'] << filename unless site.config['keep_files'].include?(filename)
75
+ img_attrs
76
+ end
77
+ end
78
+ end
@@ -0,0 +1,5 @@
1
+ module Jekyll
2
+ module Srcset
3
+ VERSION = "0.0.1"
4
+ end
5
+ end
metadata ADDED
@@ -0,0 +1,117 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: jekyll-srcset
3
+ version: !ruby/object:Gem::Version
4
+ version: 0.0.1
5
+ platform: ruby
6
+ authors:
7
+ - Mathias Biilmann Christensen
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2015-08-19 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: rmagick
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ">="
18
+ - !ruby/object:Gem::Version
19
+ version: '0'
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ">="
25
+ - !ruby/object:Gem::Version
26
+ version: '0'
27
+ - !ruby/object:Gem::Dependency
28
+ name: bundler
29
+ requirement: !ruby/object:Gem::Requirement
30
+ requirements:
31
+ - - "~>"
32
+ - !ruby/object:Gem::Version
33
+ version: '1.7'
34
+ type: :development
35
+ prerelease: false
36
+ version_requirements: !ruby/object:Gem::Requirement
37
+ requirements:
38
+ - - "~>"
39
+ - !ruby/object:Gem::Version
40
+ version: '1.7'
41
+ - !ruby/object:Gem::Dependency
42
+ name: rake
43
+ requirement: !ruby/object:Gem::Requirement
44
+ requirements:
45
+ - - "~>"
46
+ - !ruby/object:Gem::Version
47
+ version: '10.0'
48
+ type: :development
49
+ prerelease: false
50
+ version_requirements: !ruby/object:Gem::Requirement
51
+ requirements:
52
+ - - "~>"
53
+ - !ruby/object:Gem::Version
54
+ version: '10.0'
55
+ - !ruby/object:Gem::Dependency
56
+ name: jekyll
57
+ requirement: !ruby/object:Gem::Requirement
58
+ requirements:
59
+ - - "<"
60
+ - !ruby/object:Gem::Version
61
+ version: '3'
62
+ type: :runtime
63
+ prerelease: false
64
+ version_requirements: !ruby/object:Gem::Requirement
65
+ requirements:
66
+ - - "<"
67
+ - !ruby/object:Gem::Version
68
+ version: '3'
69
+ description: |2
70
+
71
+ This Jekyll plugin makes it very easy to send larger images to devices with high pixel densities.
72
+
73
+ The plugin adds an `image_tag` Liquid tag that can be used like this:
74
+
75
+ {% image_tag src="/image.png" width="100" %}
76
+ email:
77
+ - info@mathias-biilmann.net
78
+ executables: []
79
+ extensions: []
80
+ extra_rdoc_files: []
81
+ files:
82
+ - ".gitignore"
83
+ - Gemfile
84
+ - LICENSE.txt
85
+ - README.md
86
+ - Rakefile
87
+ - jekyll-srcset.gemspec
88
+ - lib/jekyll-srcset.rb
89
+ - lib/jekyll/srcset.rb
90
+ - lib/jekyll/srcset/tag.rb
91
+ - lib/jekyll/srcset/version.rb
92
+ homepage: ''
93
+ licenses:
94
+ - MIT
95
+ metadata: {}
96
+ post_install_message:
97
+ rdoc_options: []
98
+ require_paths:
99
+ - lib
100
+ required_ruby_version: !ruby/object:Gem::Requirement
101
+ requirements:
102
+ - - ">="
103
+ - !ruby/object:Gem::Version
104
+ version: '0'
105
+ required_rubygems_version: !ruby/object:Gem::Requirement
106
+ requirements:
107
+ - - ">="
108
+ - !ruby/object:Gem::Version
109
+ version: '0'
110
+ requirements: []
111
+ rubyforge_project:
112
+ rubygems_version: 2.2.2
113
+ signing_key:
114
+ specification_version: 4
115
+ summary: This Jekyll plugin ads an image_tag that will generate responsive img tags
116
+ test_files: []
117
+ has_rdoc: