rails_responsive_images 0.1.7 → 0.2.0

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA1:
3
- metadata.gz: 13049b1147fe8e29db96643666c275b9a30ea48e
4
- data.tar.gz: f762fe8b1e23f2b539ffab1fc2017b902e1ba5a5
3
+ metadata.gz: 636e30776b10d8dfb9ebf9c83c263f6387b82f96
4
+ data.tar.gz: 6a466b6951613dc0f9f205a448e1b57b4d8683c1
5
5
  SHA512:
6
- metadata.gz: 9797bd598b532e3743e1ebeee890c7826817baef58a7502a57f6ca7312ba4edf2b53d920c862c4bffd8f19d55a991d7e29a2ae2fa2e47177aa6f97e7b759863d
7
- data.tar.gz: b2b1b479247b67706c6767534d8fa19f268746f97a570bcabe2640827364a932edc99c5fdfe568fbf9547d0c70cefc3980448d4cf8795fe9365a2e4298da117c
6
+ metadata.gz: 2bbf5bde4f4faabdf629ad3c9a1a24d13fa72850277dfb267de91491aa502a86cce6390cbb9779f87d2f209c1c6d425039dd850b31e7bb3593f141cae8e601f1
7
+ data.tar.gz: 5a97bb421b3ae8b2c965dc07b9077c4f77cd41e7e822d4d1ee1d1de4e3dd91bf1b77612a33d84ba771d8361f00742e80ef64bff16f60100fa5a11a0306c3e9e2
data/.gitignore CHANGED
@@ -12,3 +12,4 @@
12
12
  *.o
13
13
  *.a
14
14
  mkmf.log
15
+ rails_responsive_images-*.gem
data/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Rails responsive images
2
2
 
3
- A Rails image_tag() extension to generate HTML5 <picture> tag markup from the W3C HTML Responsive Images Extension Proposal. Dont't care about image resizing, the gem will do the work for you - on the fly ;-) or just use the rake task "rake rails_responsive_images".
3
+ A Rails `image_tag()` extension to generate HTML5 `<img>` tag using `srcset`. To resize images use the rake task "rake rails_responsive_images".
4
4
 
5
5
  The following image_tag
6
6
  ```ruby
@@ -8,12 +8,14 @@ The following image_tag
8
8
  ```
9
9
  will generate this output:
10
10
  ```html
11
- <picture>
12
- <source media="(max-width: 767px)" srcset="/assets/responsive_images_767/picture.jpg">
13
- <source media="(max-width: 991px)" srcset="/assets/responsive_images_991/picture.jpg">
14
- <source media="(max-width: 1999px)" srcset="/assets/responsive_images_1999/picture.jpg">
15
- <img width="2568" height="878" alt="awesome" src="/assets/picture.jpg">
16
- </picture>
11
+ <img src="/assets/picture.png"
12
+ srcset="/assets/responsive_images_360/picture.png 360w,
13
+ /assets/responsive_images_576/picture.png 576w,
14
+ /assets/responsive_images_768/picture.png 768w,
15
+ /assets/responsive_images_992/picture.png 992w,
16
+ /assets/responsive_images_1200/picture.png 1200w,
17
+ /assets/responsive_images_1600/picture.png 1600w"
18
+ >
17
19
  ```
18
20
 
19
21
  ## Installation
@@ -40,19 +42,26 @@ RailsResponsiveImages.configure do |c|
40
42
  c.image_sizes = [767, 991, 1999]
41
43
  end
42
44
  ```
43
-
44
- Require jquery-picture for cross browser support
45
- ```javascript
46
- //= require jquery-picture
45
+ Default is:
46
+ ```ruby
47
+ image_sizes = [360, 576, 768, 992, 1200, 1600]
47
48
  ```
48
49
 
50
+ Add the responsive flag on image_tag helper
49
51
  ```ruby
50
52
  = image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true
51
53
  ```
52
- ## TODO
53
- - write tests
54
- - write docs
55
- - review & cleanup the code
54
+
55
+ ## Capistrano - Integration
56
+ ```ruby
57
+ before 'deploy:assets:precompile', 'build_responsive_images'
58
+ task :build_responsive_images, roles: :app do
59
+ run "cd #{release_path} && RAILS_ENV=#{rails_env} bundle exec rake rails_responsive_images"
60
+ end
61
+ ```
62
+
63
+ ## TODO's & issues
64
+ https://github.com/chilian/rails_responsive_images/issues
56
65
 
57
66
  ## Contributing
58
67
 
@@ -1,5 +1,5 @@
1
1
  module RailsResponsiveImages
2
- require 'RMagick'
2
+ require 'mini_magick'
3
3
  require 'fileutils'
4
4
  class Image
5
5
  include Singleton
@@ -12,9 +12,9 @@ module RailsResponsiveImages
12
12
  end
13
13
 
14
14
  def generate_responsive_image!(original_image, size, output_path)
15
- img = ::Magick::Image.read(original_image).first
16
- img = img.resize_to_fit(size)
17
- img.write(output_path)
15
+ img = MiniMagick::Image.open(original_image)
16
+ img.resize size
17
+ img.write output_path
18
18
  img.destroy!
19
19
  end
20
20
  end
@@ -1,3 +1,3 @@
1
- ::Rails.application.routes.draw do
1
+ Rails.application.routes.draw do
2
2
  get '/assets/*filepath/:filename', to: 'rails_responsive_images/assets#responsive_image'
3
3
  end
@@ -12,12 +12,6 @@ module RailsResponsiveImages
12
12
  @configuration = new_configuration
13
13
  end
14
14
 
15
- # Yields the global configuration to a block.
16
- #
17
- # Example:
18
- # RailsResponsiveImages::Rails.configure do |config|
19
- # config.sizes = [767, 991, 1999]
20
- # end
21
15
  def self.configure
22
16
  yield configuration if block_given?
23
17
  end
@@ -30,22 +24,20 @@ end
30
24
 
31
25
  ActionView::Helpers::AssetTagHelper.module_eval do
32
26
 
33
- def image_tag_with_responsiveness(path, options = {})
34
- options = options.dup
35
- responsive = options.delete(:responsive) { false }
36
- if responsive
37
- content_tag :picture do
38
- original_filepath = path.sub(/\A\/assets/, '')
39
- ::RailsResponsiveImages.configuration.image_sizes.each do |size|
40
- responsive_image_path = image_path("responsive_images_#{size}/#{original_filepath}")
41
- concat content_tag(:source, '', media: "(max-width: #{size}px)", srcset: responsive_image_path)
42
- end
43
- concat image_tag_without_responsiveness(path, options)
44
- end
45
- else
46
- image_tag_without_responsiveness(path, options)
47
- end
48
- end
27
+ def image_tag_with_responsiveness(source, options = {})
28
+ options = options.symbolize_keys
29
+ check_for_image_tag_errors(options)
30
+ skip_pipeline = options.delete(:skip_pipeline)
31
+
32
+ options[:src] = resolve_image_source(source, skip_pipeline)
33
+ original_file = source.sub(/^\/assets/, '')
49
34
 
50
- alias_method_chain :image_tag, :responsiveness
35
+ options[:srcset] = RailsResponsiveImages.configuration.image_sizes.map do |size|
36
+ src_path = path_to_image("responsive_images_#{size}/#{original_file}", skip_pipeline: skip_pipeline)
37
+ "#{src_path} #{size}w"
38
+ end.join(", ")
39
+
40
+ options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
41
+ tag("img", options)
42
+ end
51
43
  end
@@ -17,7 +17,7 @@ module RailsResponsiveImages
17
17
 
18
18
  # Set default settings
19
19
  def initialize
20
- @image_sizes = [767, 991, 1999]
20
+ @image_sizes = [360, 576, 768, 992, 1200, 1600]
21
21
  end
22
22
  end
23
23
  end
@@ -1,3 +1,3 @@
1
1
  module RailsResponsiveImages
2
- VERSION = '0.1.7'
2
+ VERSION = '0.2.0'
3
3
  end
@@ -4,6 +4,7 @@ desc "Rails responsive images builds different sized versions from your images i
4
4
  task rails_responsive_images: [ 'rails_responsive_images:check_requirements', 'rails_responsive_images:resize' ]
5
5
 
6
6
  namespace :rails_responsive_images do
7
+
7
8
  desc "Check for required programms"
8
9
  task :check_requirements do
9
10
  RakeFileUtils.verbose(false)
@@ -24,12 +25,12 @@ namespace :rails_responsive_images do
24
25
 
25
26
  puts "\nResize #{ file_list.size } image files."
26
27
 
27
- ::RailsResponsiveImages.configuration.image_sizes.each do |size|
28
+ RailsResponsiveImages.configuration.image_sizes.each do |size|
28
29
  file_list.to_a.each do |original_filepath|
29
30
  filepath = original_filepath.gsub(Rails.root.join('app', 'assets', 'images').to_s, '')
30
31
  responsive_filepath = Rails.root.join('app', 'assets', 'images', "responsive_images_#{size}", filepath.sub(/\A\//, ''))
31
- ::RailsResponsiveImages::Image.instance.create_responsive_folder!(responsive_filepath)
32
- ::RailsResponsiveImages::Image.instance.generate_responsive_image!(original_filepath, size, responsive_filepath)
32
+ RailsResponsiveImages::Image.instance.create_responsive_folder!(responsive_filepath)
33
+ RailsResponsiveImages::Image.instance.generate_responsive_image!(original_filepath, size, responsive_filepath)
33
34
  end
34
35
  end
35
36
 
@@ -6,11 +6,11 @@ require 'rails_responsive_images/version'
6
6
  Gem::Specification.new do |spec|
7
7
  spec.name = 'rails_responsive_images'
8
8
  spec.version = RailsResponsiveImages::VERSION
9
- spec.authors = ['Christoph Chilian']
10
- spec.email = ['christoph@chilian.de']
11
- spec.summary = %q{A Rails image_tag() extension to generate HTML5 <picture> tag markup from the W3C HTML Responsive Images Extension Proposal.}
12
- spec.description = %q{A Rails image_tag() extension to generate HTML5 <picture> tag markup from the W3C HTML Responsive Images Extension Proposal.}
13
- spec.homepage = "https://chilian.de"
9
+ spec.authors = ['Christoph Chilian', 'Josh Bradley']
10
+ spec.email = ['christoph@chilian.de', 'hello@joshbradley.me']
11
+ spec.summary = %q{A Rails image_tag() extension to generate HTML5 <img> tags using srcset.}
12
+ spec.description = %q{Generate responsive images sizes on assets:precompile and include a handy img_tag helper.}
13
+ spec.homepage = 'https://github.com/chilian/rails_responsive_images'
14
14
  spec.license = 'MIT'
15
15
 
16
16
  spec.files = `git ls-files -z`.split("\x0")
@@ -19,8 +19,8 @@ Gem::Specification.new do |spec|
19
19
  spec.require_paths = ['lib']
20
20
 
21
21
  spec.add_development_dependency 'bundler', '~> 1.7'
22
- spec.add_development_dependency 'rake', '~> 10.0'
23
- spec.add_development_dependency 'rspec'
24
- spec.add_runtime_dependency 'rmagick', '~> 2.13'
25
- spec.add_runtime_dependency 'rails', '>= 4.0'
22
+ spec.add_development_dependency 'rake', '~> 11.2'
23
+ spec.add_development_dependency 'rspec', '~> 3.5'
24
+ spec.add_runtime_dependency 'mini_magick', '~> 4.8'
25
+ spec.add_runtime_dependency 'rails', '~> 5.2', '>= 5.2.0'
26
26
  end
metadata CHANGED
@@ -1,14 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: rails_responsive_images
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.7
4
+ version: 0.2.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Christoph Chilian
8
+ - Josh Bradley
8
9
  autorequire:
9
10
  bindir: bin
10
11
  cert_chain: []
11
- date: 2015-03-23 00:00:00.000000000 Z
12
+ date: 2018-06-27 00:00:00.000000000 Z
12
13
  dependencies:
13
14
  - !ruby/object:Gem::Dependency
14
15
  name: bundler
@@ -30,60 +31,67 @@ dependencies:
30
31
  requirements:
31
32
  - - "~>"
32
33
  - !ruby/object:Gem::Version
33
- version: '10.0'
34
+ version: '11.2'
34
35
  type: :development
35
36
  prerelease: false
36
37
  version_requirements: !ruby/object:Gem::Requirement
37
38
  requirements:
38
39
  - - "~>"
39
40
  - !ruby/object:Gem::Version
40
- version: '10.0'
41
+ version: '11.2'
41
42
  - !ruby/object:Gem::Dependency
42
43
  name: rspec
43
44
  requirement: !ruby/object:Gem::Requirement
44
45
  requirements:
45
- - - ">="
46
+ - - "~>"
46
47
  - !ruby/object:Gem::Version
47
- version: '0'
48
+ version: '3.5'
48
49
  type: :development
49
50
  prerelease: false
50
51
  version_requirements: !ruby/object:Gem::Requirement
51
52
  requirements:
52
- - - ">="
53
+ - - "~>"
53
54
  - !ruby/object:Gem::Version
54
- version: '0'
55
+ version: '3.5'
55
56
  - !ruby/object:Gem::Dependency
56
- name: rmagick
57
+ name: mini_magick
57
58
  requirement: !ruby/object:Gem::Requirement
58
59
  requirements:
59
60
  - - "~>"
60
61
  - !ruby/object:Gem::Version
61
- version: '2.13'
62
+ version: '4.8'
62
63
  type: :runtime
63
64
  prerelease: false
64
65
  version_requirements: !ruby/object:Gem::Requirement
65
66
  requirements:
66
67
  - - "~>"
67
68
  - !ruby/object:Gem::Version
68
- version: '2.13'
69
+ version: '4.8'
69
70
  - !ruby/object:Gem::Dependency
70
71
  name: rails
71
72
  requirement: !ruby/object:Gem::Requirement
72
73
  requirements:
74
+ - - "~>"
75
+ - !ruby/object:Gem::Version
76
+ version: '5.2'
73
77
  - - ">="
74
78
  - !ruby/object:Gem::Version
75
- version: '4.0'
79
+ version: 5.2.0
76
80
  type: :runtime
77
81
  prerelease: false
78
82
  version_requirements: !ruby/object:Gem::Requirement
79
83
  requirements:
84
+ - - "~>"
85
+ - !ruby/object:Gem::Version
86
+ version: '5.2'
80
87
  - - ">="
81
88
  - !ruby/object:Gem::Version
82
- version: '4.0'
83
- description: A Rails image_tag() extension to generate HTML5 <picture> tag markup
84
- from the W3C HTML Responsive Images Extension Proposal.
89
+ version: 5.2.0
90
+ description: Generate responsive images sizes on assets:precompile and include a handy
91
+ img_tag helper.
85
92
  email:
86
93
  - christoph@chilian.de
94
+ - hello@joshbradley.me
87
95
  executables: []
88
96
  extensions: []
89
97
  extra_rdoc_files: []
@@ -97,7 +105,6 @@ files:
97
105
  - app/controllers/rails_responsive_images/assets_controller.rb
98
106
  - app/models/rails_responsive_images/image.rb
99
107
  - config/routes.rb
100
- - lib/assets/javascripts/jquery-picture.js
101
108
  - lib/rails_responsive_images.rb
102
109
  - lib/rails_responsive_images/configuration.rb
103
110
  - lib/rails_responsive_images/engine.rb
@@ -105,7 +112,7 @@ files:
105
112
  - lib/tasks/rails_responsive_images.rake
106
113
  - rails_responsive_images.gemspec
107
114
  - spec/spec_helper.rb
108
- homepage: https://chilian.de
115
+ homepage: https://github.com/chilian/rails_responsive_images
109
116
  licenses:
110
117
  - MIT
111
118
  metadata: {}
@@ -125,10 +132,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
125
132
  version: '0'
126
133
  requirements: []
127
134
  rubyforge_project:
128
- rubygems_version: 2.4.3
135
+ rubygems_version: 2.4.8
129
136
  signing_key:
130
137
  specification_version: 4
131
- summary: A Rails image_tag() extension to generate HTML5 <picture> tag markup from
132
- the W3C HTML Responsive Images Extension Proposal.
138
+ summary: A Rails image_tag() extension to generate HTML5 <img> tags using srcset.
133
139
  test_files:
134
140
  - spec/spec_helper.rb
@@ -1,279 +0,0 @@
1
- /**
2
- * jQuery Picture
3
- * http://jquerypicture.com
4
- * http://github.com/Abban/jQuery-Picture
5
- *
6
- * May 2012
7
- *
8
- * @version 0.9
9
- * @author Abban Dunne http://abandon.ie
10
- * @license MIT
11
- *
12
- * jQuery Picture is a plugin to add support for responsive images to your layouts.
13
- * It supports both figure elements with some custom data attributes and the new
14
- * proposed picture format. This plugin will be made redundant when the format is
15
- * approved and implemented by browsers. Lets hope that happens soon. In the meantime
16
- * this plugin will be kept up to date with latest developments.
17
- *
18
- */
19
- (function($){
20
-
21
- $.fn.picture = function(args){
22
-
23
- var defaults = {
24
-
25
- container : null,
26
- ignorePixelRatio: false,
27
- useLarger: false,
28
- insertElement: '>a',
29
- inlineDimensions: false
30
-
31
- };
32
-
33
- var settings = $.extend({}, defaults, args);
34
-
35
- this.each(function(){
36
-
37
- var breakpoints = new Array();
38
-
39
- var windowWidth, currentMedia, element, timeoutOffset;
40
-
41
- // Check the device pixel ratio
42
- var PixelRatio = 1;
43
- if(!settings.ignorePixelRatio && window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;
44
-
45
- // Save off the element so it can be easily used inside a function
46
- element = $(this);
47
-
48
- //Delete the noscript we don't need it now anyway
49
- element.find('noscript').remove();
50
-
51
- // Initialise the images
52
- getCurrentMedia(true);
53
-
54
- // Only call the image resize function 200ms after window stops being resized
55
- timeoutOffset = false;
56
-
57
- $(window).resize(function(){
58
-
59
- if(timeoutOffset !== false)
60
- clearTimeout(timeoutOffset);
61
-
62
- timeoutOffset = setTimeout(getCurrentMedia, 200);
63
-
64
- });
65
-
66
-
67
- /**
68
- * getCurrentMedia
69
- *
70
- * Checks the window width off the media query types and selects the current one.
71
- * Calls the setPicture or setFigure function to set the image.
72
- *
73
- */
74
- function getCurrentMedia(init){
75
-
76
- if(init){
77
-
78
- if(element.get(0).tagName.toLowerCase() == 'figure'){
79
-
80
- var mediaObj = element.data();
81
-
82
- $.each(mediaObj, function(media){
83
-
84
- var num;
85
-
86
- num = media.replace(/[^\d.]/g, '');
87
-
88
- if(num)
89
- breakpoints.push(parseInt(num));
90
-
91
- });
92
-
93
- }else{
94
-
95
- element.find('source').each(function(){
96
-
97
- var media, num;
98
-
99
- media = $(this).attr('media');
100
-
101
- if(media){
102
-
103
- num = media.replace(/[^\d.]/g, '');
104
-
105
- breakpoints.push(parseInt(num));
106
- }
107
-
108
- });
109
-
110
- }
111
- breakpoints.sort(function(a,b){return a - b}); //make sure the largest breakpoint is the last
112
-
113
- }
114
-
115
- var c = 0;
116
-
117
- // Check if user defined container, otherwise take window
118
- if (settings.container == null){
119
-
120
- windowWidth = ($(window).width()) * PixelRatio;
121
-
122
- }else{
123
-
124
- windowWidth = ($(settings.container).width()) * PixelRatio;
125
-
126
- }
127
-
128
- // Set the c variable to the current media width
129
- $.each(breakpoints, function(i,v){
130
-
131
- if(parseInt(windowWidth) >= parseInt(v) && parseInt(c) <= parseInt(v))
132
- c = v;
133
-
134
- });
135
-
136
- if (settings.useLarger ){
137
- idx = breakpoints.indexOf(c);
138
- if (idx < breakpoints.length-1) //make sure we're not already using the largest breakpoint
139
- c = breakpoints[ idx + 1];
140
- }
141
-
142
- if(currentMedia !== c){
143
- currentMedia = c;
144
-
145
- if(element.get(0).tagName.toLowerCase() == 'figure')
146
- setFigure();
147
- else
148
- setPicture();
149
- }
150
-
151
- }
152
-
153
-
154
- /**
155
- * setPicture
156
- *
157
- * Pulls the image src and media attributes from the source tags and sets
158
- * the src of the enclosed img tag to the appropriate one.
159
- *
160
- */
161
- function setPicture(){
162
-
163
- var sizes = new Object();
164
-
165
- element.find('source').each(function(){
166
-
167
- var media, path, num;
168
- media = $(this).attr('media');
169
- path = $(this).attr('src');
170
-
171
- if(media)
172
- num = media.replace(/[^\d.]/g, '');
173
- else
174
- num = 0;
175
-
176
- sizes[num] = path;
177
-
178
- });
179
-
180
- if(element.find('img').length == 0){
181
-
182
- var prep = '<img src="' + sizes[currentMedia] + '"'
183
- if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
184
- if(element.attr('alt')) prep += ' alt="' + element.attr('alt') + '"';
185
- prep += '>';
186
-
187
- if($(settings.insertElement, element).length == 0){
188
-
189
- element.append(prep);
190
-
191
- }else{
192
-
193
- $(settings.insertElement, element).append(prep);
194
-
195
- }
196
-
197
- }else{
198
-
199
- element.find('img').attr('src', sizes[currentMedia]);
200
-
201
- }
202
-
203
- if(settings.inlineDimensions){
204
-
205
- $("<img/>").attr("src", $('img', element).attr("src")).load(function(){
206
- $('img', element).attr('height', this.height);
207
- $('img', element).attr('width', this.width);
208
- });
209
-
210
- }
211
-
212
- }
213
-
214
-
215
- /**
216
- * setFigure
217
- *
218
- * Pulls the image src and and media values from the data attributes
219
- * and sets the src of the enclosed img tag to the appropriate one.
220
- *
221
- */
222
- function setFigure(){
223
-
224
- var sizes = new Object();
225
-
226
- var mediaObj = element.data();
227
-
228
- $.each(mediaObj, function(media, path){
229
-
230
- var num;
231
-
232
- num = media.replace(/[^\d.]/g, '');
233
-
234
- if(!num)
235
- num = 0;
236
-
237
- sizes[num] = path;
238
-
239
- });
240
-
241
- if(element.find('img').length == 0){
242
-
243
- var prep = '<img src="' + sizes[currentMedia] + '"';
244
- if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
245
- if(element.attr('title')) prep += ' alt="' + element.attr('title') + '"';
246
- prep += '>';
247
-
248
- if($(settings.insertElement, element).length == 0){
249
-
250
- element.append(prep);
251
-
252
- }else{
253
-
254
- $(settings.insertElement, element).append(prep);
255
-
256
- }
257
-
258
- }else{
259
-
260
- $('img', element).attr('src', sizes[currentMedia]);
261
-
262
- }
263
-
264
- if(settings.inlineDimensions){
265
-
266
- $("<img/>").attr("src", $('img', element).attr("src")).load(function(){
267
- $('img', element).attr('height', this.height);
268
- $('img', element).attr('width', this.width);
269
- });
270
-
271
- }
272
-
273
- }
274
-
275
- });
276
-
277
- };
278
-
279
- })(jQuery);