rails_responsive_images 0.1.7 → 0.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 13049b1147fe8e29db96643666c275b9a30ea48e
-  data.tar.gz: f762fe8b1e23f2b539ffab1fc2017b902e1ba5a5
+  metadata.gz: 636e30776b10d8dfb9ebf9c83c263f6387b82f96
+  data.tar.gz: 6a466b6951613dc0f9f205a448e1b57b4d8683c1
 SHA512:
-  metadata.gz: 9797bd598b532e3743e1ebeee890c7826817baef58a7502a57f6ca7312ba4edf2b53d920c862c4bffd8f19d55a991d7e29a2ae2fa2e47177aa6f97e7b759863d
-  data.tar.gz: b2b1b479247b67706c6767534d8fa19f268746f97a570bcabe2640827364a932edc99c5fdfe568fbf9547d0c70cefc3980448d4cf8795fe9365a2e4298da117c
+  metadata.gz: 2bbf5bde4f4faabdf629ad3c9a1a24d13fa72850277dfb267de91491aa502a86cce6390cbb9779f87d2f209c1c6d425039dd850b31e7bb3593f141cae8e601f1
+  data.tar.gz: 5a97bb421b3ae8b2c965dc07b9077c4f77cd41e7e822d4d1ee1d1de4e3dd91bf1b77612a33d84ba771d8361f00742e80ef64bff16f60100fa5a11a0306c3e9e2

data/.gitignore

@@ -12,3 +12,4 @@
 *.o
 *.a
 mkmf.log
+rails_responsive_images-*.gem

data/README.md

@@ -1,6 +1,6 @@
 # Rails responsive images
 
-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".
+A Rails `image_tag()` extension to generate HTML5 `<img>` tag using `srcset`. To resize images use the rake task "rake rails_responsive_images".
 
 The following image_tag
 ```ruby
@@ -8,12 +8,14 @@ The following image_tag
 ```
 will generate this output:
 ```html
-<picture>
-  <source media="(max-width: 767px)" srcset="/assets/responsive_images_767/picture.jpg">
-  <source media="(max-width: 991px)" srcset="/assets/responsive_images_991/picture.jpg">
-  <source media="(max-width: 1999px)" srcset="/assets/responsive_images_1999/picture.jpg">
-  <img width="2568" height="878" alt="awesome" src="/assets/picture.jpg">
-</picture>
+<img src="/assets/picture.png"
+     srcset="/assets/responsive_images_360/picture.png 360w,
+             /assets/responsive_images_576/picture.png 576w,
+             /assets/responsive_images_768/picture.png 768w,
+             /assets/responsive_images_992/picture.png 992w,
+             /assets/responsive_images_1200/picture.png 1200w,
+             /assets/responsive_images_1600/picture.png 1600w"
+>
 ```
 
 ## Installation
@@ -40,19 +42,26 @@ RailsResponsiveImages.configure do |c|
   c.image_sizes  = [767, 991, 1999]
 end
 ```
-
-Require jquery-picture for cross browser support
-```javascript
-//= require jquery-picture
+Default is:
+```ruby
+image_sizes  = [360, 576, 768, 992, 1200, 1600]
 ```
 
+Add the responsive flag on image_tag helper
 ```ruby
 = image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true
 ```
-## TODO
-- write tests
-- write docs
-- review & cleanup the code
+
+## Capistrano - Integration
+```ruby
+before 'deploy:assets:precompile', 'build_responsive_images'
+task :build_responsive_images, roles: :app do
+  run "cd #{release_path} && RAILS_ENV=#{rails_env} bundle exec rake rails_responsive_images"
+end
+```
+
+## TODO's & issues
+https://github.com/chilian/rails_responsive_images/issues
 
 ## Contributing
 

data/app/models/rails_responsive_images/image.rb

@@ -1,5 +1,5 @@
 module RailsResponsiveImages
-  require 'RMagick'
+  require 'mini_magick'
   require 'fileutils'
   class Image
     include Singleton
@@ -12,9 +12,9 @@ module RailsResponsiveImages
     end
 
     def generate_responsive_image!(original_image, size, output_path)
-      img = ::Magick::Image.read(original_image).first
-      img = img.resize_to_fit(size)
-      img.write(output_path)
+      img = MiniMagick::Image.open(original_image)
+      img.resize size
+      img.write output_path
       img.destroy!
     end
   end

data/config/routes.rb

@@ -1,3 +1,3 @@
-::Rails.application.routes.draw do
+Rails.application.routes.draw do
   get '/assets/*filepath/:filename', to: 'rails_responsive_images/assets#responsive_image'
 end

data/lib/rails_responsive_images.rb

@@ -12,12 +12,6 @@ module RailsResponsiveImages
     @configuration = new_configuration
   end
 
-  # Yields the global configuration to a block.
-  #
-  # Example:
-  #   RailsResponsiveImages::Rails.configure do |config|
-  #     config.sizes = [767, 991, 1999]
-  #   end
   def self.configure
     yield configuration if block_given?
   end
@@ -30,22 +24,20 @@ end
 
 ActionView::Helpers::AssetTagHelper.module_eval do
 
-  def image_tag_with_responsiveness(path, options = {})
-    options = options.dup
-    responsive = options.delete(:responsive) { false }
-    if responsive
-      content_tag :picture do
-        original_filepath = path.sub(/\A\/assets/, '')
-        ::RailsResponsiveImages.configuration.image_sizes.each do |size|
-          responsive_image_path = image_path("responsive_images_#{size}/#{original_filepath}")
-          concat content_tag(:source, '', media: "(max-width: #{size}px)", srcset: responsive_image_path)
-        end
-        concat image_tag_without_responsiveness(path, options)
-      end
-    else
-      image_tag_without_responsiveness(path, options)
-    end
-  end
+  def image_tag_with_responsiveness(source, options = {})
+    options = options.symbolize_keys
+    check_for_image_tag_errors(options)
+    skip_pipeline = options.delete(:skip_pipeline)
+
+    options[:src] = resolve_image_source(source, skip_pipeline)
+    original_file = source.sub(/^\/assets/, '')
 
-  alias_method_chain :image_tag, :responsiveness
+    options[:srcset] = RailsResponsiveImages.configuration.image_sizes.map do |size|
+      src_path = path_to_image("responsive_images_#{size}/#{original_file}", skip_pipeline: skip_pipeline)
+      "#{src_path} #{size}w"
+    end.join(", ")
+
+    options[:width], options[:height] = extract_dimensions(options.delete(:size)) if options[:size]
+    tag("img", options)
+  end
 end

data/lib/rails_responsive_images/configuration.rb

@@ -17,7 +17,7 @@ module RailsResponsiveImages
 
     # Set default settings
     def initialize
-      @image_sizes = [767, 991, 1999]
+      @image_sizes = [360, 576, 768, 992, 1200, 1600]
     end
   end
 end

data/lib/rails_responsive_images/version.rb

@@ -1,3 +1,3 @@
 module RailsResponsiveImages
-  VERSION = '0.1.7'
+  VERSION = '0.2.0'
 end

data/lib/tasks/rails_responsive_images.rake

@@ -4,6 +4,7 @@ desc "Rails responsive images builds different sized versions from your images i
 task rails_responsive_images: [ 'rails_responsive_images:check_requirements', 'rails_responsive_images:resize' ]
 
 namespace :rails_responsive_images do
+
   desc "Check for required programms"
   task :check_requirements do
     RakeFileUtils.verbose(false)
@@ -24,12 +25,12 @@ namespace :rails_responsive_images do
 
     puts "\nResize #{ file_list.size } image files."
 
-    ::RailsResponsiveImages.configuration.image_sizes.each do |size|
+    RailsResponsiveImages.configuration.image_sizes.each do |size|
       file_list.to_a.each do |original_filepath|
         filepath = original_filepath.gsub(Rails.root.join('app', 'assets', 'images').to_s, '')
         responsive_filepath = Rails.root.join('app', 'assets', 'images', "responsive_images_#{size}", filepath.sub(/\A\//, ''))
-        ::RailsResponsiveImages::Image.instance.create_responsive_folder!(responsive_filepath)
-        ::RailsResponsiveImages::Image.instance.generate_responsive_image!(original_filepath, size, responsive_filepath)
+        RailsResponsiveImages::Image.instance.create_responsive_folder!(responsive_filepath)
+        RailsResponsiveImages::Image.instance.generate_responsive_image!(original_filepath, size, responsive_filepath)
       end
     end
 

data/rails_responsive_images.gemspec

@@ -6,11 +6,11 @@ require 'rails_responsive_images/version'
 Gem::Specification.new do |spec|
   spec.name          = 'rails_responsive_images'
   spec.version       = RailsResponsiveImages::VERSION
-  spec.authors       = ['Christoph Chilian']
-  spec.email         = ['christoph@chilian.de']
-  spec.summary       = %q{A Rails image_tag() extension to generate HTML5 <picture> tag markup from the W3C HTML Responsive Images Extension Proposal.}
-  spec.description   = %q{A Rails image_tag() extension to generate HTML5 <picture> tag markup from the W3C HTML Responsive Images Extension Proposal.}
-  spec.homepage      = "https://chilian.de"
+  spec.authors       = ['Christoph Chilian', 'Josh Bradley']
+  spec.email         = ['christoph@chilian.de', 'hello@joshbradley.me']
+  spec.summary       = %q{A Rails image_tag() extension to generate HTML5 <img> tags using srcset.}
+  spec.description   = %q{Generate responsive images sizes on assets:precompile and include a handy img_tag helper.}
+  spec.homepage      = 'https://github.com/chilian/rails_responsive_images'
   spec.license       = 'MIT'
 
   spec.files         = `git ls-files -z`.split("\x0")
@@ -19,8 +19,8 @@ Gem::Specification.new do |spec|
   spec.require_paths = ['lib']
 
   spec.add_development_dependency 'bundler', '~> 1.7'
-  spec.add_development_dependency 'rake', '~> 10.0'
-  spec.add_development_dependency 'rspec'
-  spec.add_runtime_dependency 'rmagick', '~> 2.13'
-  spec.add_runtime_dependency 'rails', '>= 4.0'
+  spec.add_development_dependency 'rake', '~> 11.2'
+  spec.add_development_dependency 'rspec', '~> 3.5'
+  spec.add_runtime_dependency 'mini_magick', '~> 4.8'
+  spec.add_runtime_dependency 'rails', '~> 5.2', '>= 5.2.0'
 end

metadata

@@ -1,14 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: rails_responsive_images
 version: !ruby/object:Gem::Version
-  version: 0.1.7
+  version: 0.2.0
 platform: ruby
 authors:
 - Christoph Chilian
+- Josh Bradley
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2015-03-23 00:00:00.000000000 Z
+date: 2018-06-27 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler
@@ -30,60 +31,67 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '11.2'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '10.0'
+        version: '11.2'
 - !ruby/object:Gem::Dependency
   name: rspec
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.5'
   type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '0'
+        version: '3.5'
 - !ruby/object:Gem::Dependency
-  name: rmagick
+  name: mini_magick
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.13'
+        version: '4.8'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '2.13'
+        version: '4.8'
 - !ruby/object:Gem::Dependency
   name: rails
   requirement: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4.0'
+        version: 5.2.0
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '5.2'
     - - ">="
       - !ruby/object:Gem::Version
-        version: '4.0'
-description: A Rails image_tag() extension to generate HTML5 <picture> tag markup
-  from the W3C HTML Responsive Images Extension Proposal.
+        version: 5.2.0
+description: Generate responsive images sizes on assets:precompile and include a handy
+  img_tag helper.
 email:
 - christoph@chilian.de
+- hello@joshbradley.me
 executables: []
 extensions: []
 extra_rdoc_files: []
@@ -97,7 +105,6 @@ files:
 - app/controllers/rails_responsive_images/assets_controller.rb
 - app/models/rails_responsive_images/image.rb
 - config/routes.rb
-- lib/assets/javascripts/jquery-picture.js
 - lib/rails_responsive_images.rb
 - lib/rails_responsive_images/configuration.rb
 - lib/rails_responsive_images/engine.rb
@@ -105,7 +112,7 @@ files:
 - lib/tasks/rails_responsive_images.rake
 - rails_responsive_images.gemspec
 - spec/spec_helper.rb
-homepage: https://chilian.de
+homepage: https://github.com/chilian/rails_responsive_images
 licenses:
 - MIT
 metadata: {}
@@ -125,10 +132,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubyforge_project: 
-rubygems_version: 2.4.3
+rubygems_version: 2.4.8
 signing_key: 
 specification_version: 4
-summary: A Rails image_tag() extension to generate HTML5 <picture> tag markup from
-  the W3C HTML Responsive Images Extension Proposal.
+summary: A Rails image_tag() extension to generate HTML5 <img> tags using srcset.
 test_files:
 - spec/spec_helper.rb

data/lib/assets/javascripts/jquery-picture.js

@@ -1,279 +0,0 @@
-/**
- * jQuery Picture
- * http://jquerypicture.com
- * http://github.com/Abban/jQuery-Picture
- *
- * May 2012
- *
- * @version 0.9
- * @author Abban Dunne http://abandon.ie
- * @license MIT
- *
- * jQuery Picture is a plugin to add support for responsive images to your layouts.
- * It supports both figure elements with some custom data attributes and the new
- * proposed picture format. This plugin will be made redundant when the format is
- * approved and implemented by browsers. Lets hope that happens soon. In the meantime
- * this plugin will be kept up to date with latest developments.
- *
- */
-(function($){
-
-	$.fn.picture = function(args){
-
-		var defaults = {
-
-			container : null,
-			ignorePixelRatio: false,
-			useLarger: false,
-			insertElement: '>a',
-			inlineDimensions: false
-
-        };
-
-		var settings = $.extend({}, defaults, args);
-
-		this.each(function(){
-
-			var breakpoints = new Array();
-
-			var windowWidth, currentMedia, element, timeoutOffset;
-
-			// Check the device pixel ratio
-			var PixelRatio = 1;
-			if(!settings.ignorePixelRatio && window.devicePixelRatio !== undefined) PixelRatio = window.devicePixelRatio;
-
-			// Save off the element so it can be easily used inside a function
-			element = $(this);
-
-			//Delete the noscript we don't need it now anyway
-			element.find('noscript').remove();
-
-			// Initialise the images
-			getCurrentMedia(true);
-
-			// Only call the image resize function 200ms after window stops being resized
-			timeoutOffset = false;
-
-			$(window).resize(function(){
-
-				if(timeoutOffset !== false)
-					clearTimeout(timeoutOffset);
-
-				timeoutOffset = setTimeout(getCurrentMedia, 200);
-
-			});
-
-
-			/**
-			 * getCurrentMedia
-			 *
-			 * Checks the window width off the media query types and selects the current one.
-			 * Calls the setPicture or setFigure function to set the image.
-			 *
-			 */
-			function getCurrentMedia(init){
-
-				if(init){
-
-					if(element.get(0).tagName.toLowerCase() == 'figure'){
-
-						var mediaObj = element.data();
-
-						$.each(mediaObj, function(media){
-
-							var num;
-
-							num = media.replace(/[^\d.]/g, '');
-
-							if(num)
-								breakpoints.push(parseInt(num));
-
-						});
-
-					}else{
-
-						element.find('source').each(function(){
-
-							var media, num;
-
-							media = $(this).attr('media');
-
-							if(media){
-
-								num = media.replace(/[^\d.]/g, '');
-
-								breakpoints.push(parseInt(num));
-							}
-
-						});
-
-					}
-					breakpoints.sort(function(a,b){return a - b}); //make sure the largest breakpoint is the last
-
-				}
-
-				var c = 0;
-
-				// Check if user defined container, otherwise take window
-				if (settings.container == null){
-
-					windowWidth = ($(window).width()) * PixelRatio;
-
-				}else{
-
-					windowWidth = ($(settings.container).width()) * PixelRatio;
-
-				}
-
-				// Set the c variable to the current media width
-				$.each(breakpoints, function(i,v){
-
-					if(parseInt(windowWidth) >= parseInt(v) && parseInt(c) <= parseInt(v))
-						c = v;
-
-				});
-
-				if (settings.useLarger ){
-					idx = breakpoints.indexOf(c);
-					if (idx < breakpoints.length-1) //make sure we're not already using the largest breakpoint
-						c = breakpoints[ idx + 1];
-				}
-
-				if(currentMedia !== c){
-					currentMedia = c;
-
-					if(element.get(0).tagName.toLowerCase() == 'figure')
-						setFigure();
-					else
-						setPicture();
-				}
-
-			}
-
-
-			/**
-			 * setPicture
-			 *
-			 * Pulls the image src and media attributes from the source tags and sets
-			 * the src of the enclosed img tag to the appropriate one.
-			 *
-			 */
-			function setPicture(){
-
-				var sizes = new Object();
-
-				element.find('source').each(function(){
-
-					var media, path, num;
-					media = $(this).attr('media');
-					path = $(this).attr('src');
-
-					if(media)
-						num = media.replace(/[^\d.]/g, '');
-					else
-						num = 0;
-
-					sizes[num] = path;
-
-				});
-
-				if(element.find('img').length == 0){
-
-					var prep = '<img src="' + sizes[currentMedia] + '"'
-					if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
-					if(element.attr('alt')) prep += ' alt="' + element.attr('alt') + '"';
-					prep += '>';
-
-					if($(settings.insertElement, element).length == 0){
-
-						element.append(prep);
-
-					}else{
-
-						$(settings.insertElement, element).append(prep);
-
-					}
-
-				}else{
-
-					element.find('img').attr('src', sizes[currentMedia]);
-
-				}
-
-				if(settings.inlineDimensions){
-
-					$("<img/>").attr("src", $('img', element).attr("src")).load(function(){
-						$('img', element).attr('height', this.height);
-						$('img', element).attr('width', this.width);
-				    });
-
-				}
-
-			}
-
-
-			/**
-			 * setFigure
-			 *
-			 * Pulls the image src and and media values from the data attributes
-			 * and sets the src of the enclosed img tag to the appropriate one.
-			 *
-			 */
-			function setFigure(){
-
-				var sizes = new Object();
-
-				var mediaObj = element.data();
-
-				$.each(mediaObj, function(media, path){
-
-					var num;
-
-					num = media.replace(/[^\d.]/g, '');
-
-					if(!num)
-						num = 0;
-
-					sizes[num] = path;
-
-				});
-
-				if(element.find('img').length == 0){
-
-					var prep = '<img src="' + sizes[currentMedia] + '"';
-					if(element.attr('style')) prep += ' style="' + element.attr('style') + '"';
-					if(element.attr('title')) prep += ' alt="' + element.attr('title') + '"';
-					prep += '>';
-
-					if($(settings.insertElement, element).length == 0){
-
-						element.append(prep);
-
-					}else{
-
-						$(settings.insertElement, element).append(prep);
-
-					}
-
-				}else{
-
-					$('img', element).attr('src', sizes[currentMedia]);
-
-				}
-
-				if(settings.inlineDimensions){
-
-					$("<img/>").attr("src", $('img', element).attr("src")).load(function(){
-						$('img', element).attr('height', this.height);
-						$('img', element).attr('width', this.width);
-				    });
-
-				}
-
-			}
-
-		});
-
-	};
-
-})(jQuery);