responsive_image_tag 0.2.5 → 0.2.6

data/README.rdoc

@@ -2,12 +2,22 @@
 
 == Creating responsive images
 
-The @responsive_image_tag@ helper selects an image depending on the width of 
-the current device. The @screen.width@ is detected by javascript and then an 
-image element is inserted in the page with a dynamically created @src@ 
-attribute.
+It's quite common today for web sites to be viewed on a wide range of devices, from powerful desktop workstations with huge screen resolutions and plenty of bandwidth, to tiny resource-constrained mobile devices. Serving images to this wide range of clients becomes an issue: if you make your images large, you'll severely degrade performance on mobile phones, but if you make your images small, they'll look terrible to desktop users.
 
-It works with Rails 2 and Rails 3, and there are javascript adapters for both Jquery and Prototype.  Pick your poison. 
+Wouldn't it be nice if you could serve small images to mobile clients, and large images to desktop clients?  The HTML spec doesn't really allow for device-specific asset serving, but it can be done with a little dash of cleverness. The technique used here allows you to serve device-specific images, and not make two server requests (saving bandwidth and server load).
+
+We've packaged it up as a rubygem. 
+
+responsive_image_tag is a Rails helper which selects an image depending on the width of the current device. The <tt>screen.width</tt> is detected by javascript and then an image element is inserted in the page with a dynamically created <tt>src</tt> attribute.
+
+It works with Rails 2 and Rails 3, and there are javascript adapters for both jQuery and Prototype.  Pick your poison. 
+
+== Motivation and approach
+
+You can find out what problems we're trying to solve with this code by reading
+the blog post about it here[http://headlondon.com/our-thoughts/technology/posts/creating-responsive-images-using-the-noscript-tag].
+
+Although this is packaged as a ruby gem, the approach is generally valid across platforms, and as a bonus, it is accessible - screenreaders and web crawlers will see the content of the <noscript> tag, and parse the content quite happily.
 
 == HTML structure
 
@@ -18,33 +28,17 @@ Here's the HTML which the helper inserts into the page:
  	<img src="big.jpg">
  </noscript>
 
-The responsive images have to appear for non-javascript users as well as 
-those with javascript turned on. 
- 
-To achieve this the helper places the default image inside a <noscript>
-tag which is then deleted by the javascript library. The image attributes 
-such as full size, mobile size and alt text are also stored as HTML5 data 
-attributes on the <noscript> tag so they are available in the DOM for the 
-javascript to access. 
-
-The library relies on a trick which has all the elegance of a greasy 
-late-night kebab: child elements of the <noscript> tag are not added to the 
-DOM, so deleting the <noscript> prevents an HTTP request being made to the 
-server. This way only the image being requested by the dynamically inserted image tag is making a request.
-
-To insert the dynamically created image element into the page you need a
-parent element in the DOM to append to. The rails helper also creates a 
-<span> tag with a class of "img-placeholder" to house the new image. 
-
-When the DOM is ready the javascript object responsiveImageTag detects 
-all <noscript> elements on the page with a class of "responsivize".
-
-It retrieves the HTML5 data attributes (@data-mobilesrc@, @data-fullsrc@, and
-@data-alttext@) and then creates an image tag with the correct source  
-depending on the available screen width of the users device. Any device 
-smaller than 768px is considered to be a mobile device. The library 
-inserts the new element into the page and the <noscript> tags are then hidden 
-from view.
+The responsive images have to appear for non-javascript users as well as those with javascript turned on.
+
+To achieve this the helper places the default image inside a <noscript> tag which is then deleted by the javascript library. The image attributes such as full size, mobile size and alt text are also stored as HTML5 data attributes on the <noscript> tag so they are available in the DOM for the javascript to access.
+
+The library relies on a trick which has all the elegance of a greasy late-night kebab: child elements of the <noscript> tag are not added to the DOM, so deleting the <noscript> prevents an HTTP request being made to the server. This way only the image being requested by the dynamically inserted image tag is making a request.
+
+To insert the dynamically created image element into the page you need a parent element in the DOM to append to. The rails helper also creates a <span> tag with a class of "img-placeholder" to house the new image.
+
+When the DOM is ready the javascript object responsiveImageTag detects all <noscript> elements on the page with a class of "responsivize".
+
+It retrieves the HTML5 data attributes (<tt>data-mobilesrc</tt>, <tt>data-fullsrc</tt>, and <tt>data-alttext</tt>) and then creates an image tag with the correct source depending on the available screen width of the users device. Any device smaller than 768px is considered to be a mobile device. The library inserts the new element into the page and the <noscript> tags are then hidden from view.
 
 == Installation
 
@@ -56,7 +50,7 @@ Then install it:
 
  bundle install
  
-There's a generator which copies a JavaScript file into place in @public/javascripts@.
+There's a generator which copies a JavaScript file into place in <tt>public/javascripts</tt>.
 
 You can run it like this:
 
@@ -67,7 +61,7 @@ You can run it like this:
 
 or 
 
-rails g responsive_image_tag:prototype
+ rails g responsive_image_tag:prototype
 
 === Rails 2
 

data/VERSION

@@ -1 +1 @@
-0.2.5
+0.2.6

data/lib/generators/responsive_image_tag/padrino_rit.rb

@@ -0,0 +1,33 @@
+module Padrino
+  module Generators
+    ##
+    # Defines the generator for installing the Jquery Responsive Image Tag script.
+    #
+    class Rit < Thor::Group
+
+      # Add this generator to our padrino-gen
+      Padrino::Generators.add_generator(:rit, self)
+
+      # Define the source template root and themes.
+      def self.source_root; File.expand_path(File.dirname(__FILE__)); end
+      # Defines the "banner" text for the CLI.
+      def self.banner; "padrino g rit"; end
+
+      # Include related modules
+      include Thor::Actions
+      include Padrino::Generators::Actions
+      include Padrino::Generators::Admin::Actions
+
+      desc "Description:\n\n\tpadrino g rit - Creates a JavaScript file which takes care of responsive images for you"
+
+      class_option :js_destination, :aliases => "-d", :desc => "The destination path to copy the Javascript file too", :default => 'public/javascripts', :type => :string
+      class_option :js_type, :aliases => "-t", :desc => "The type of Javascript file to use [jquery or prototype]", :default => 'jquery', :type => :string
+
+      def create_javascript_file
+        template "templates/responsive-image-tag-#{options[:js_type]}.js",
+          destination_root(options[:js_destination] + "/responsive-image-tag-#{options[:js_type]}.js")
+      end
+
+    end
+  end
+end

data/lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js

@@ -7,20 +7,20 @@
 // It retrieves both HTML5 data attributes and then creates an image tag with
 // the correct source destination depending on the available screen width of
 // the user's device. This way smaller images are sent to mobile devices or
-// any device smaller than 768px. 
+// any device smaller than 768px.
 
 // The <noscript> tags are then removed from the page.
 var responsiveImageTag = {
-	
+
     replaceInitialImages:function() {
 		var platform = "desktop";
 		var responsiveImages = $(".responsivize");
-		var i, 
+		var i,
 			noOfresponsiveImages = responsiveImages.length;
 
 			// Test for available width in current browser window
 			// 767px, anything smaller than an ipad is considered mobile
-		if(screen.width <= 767){ 
+		if(screen.width <= 767){
 			platform = "mobile";
 		}
 
@@ -30,6 +30,7 @@ var responsiveImageTag = {
 			var img = window.document.createElement("img");
 
 			img.alt = noScriptElem.attr("data-alttext");
+			img.className = noScriptElem.attr("data-cssclass");
 
 			if(platform === "mobile"){
 				img.src = noScriptElem.attr("data-mobilesrc");
@@ -37,8 +38,7 @@ var responsiveImageTag = {
 				img.src = noScriptElem.attr("data-fullsrc");
 			}
 
-			img.className = "responsive";
-			noScriptElem.prev().append(img);	
+			noScriptElem.prev().append(img);
 			noScriptElem.hide();
 		}
     }
@@ -47,4 +47,4 @@ var responsiveImageTag = {
 $(function() {
 	responsiveImageTag.replaceInitialImages();
 });
-       
+

data/lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js

@@ -1,26 +1,26 @@
 /*jslint browser:true */
 /*global $, $$*/
 
-// responsiveImageTag detects all noscript elements on the page with a class 
+// responsiveImageTag detects all noscript elements on the page with a class
 // of 'responsivize'.
 
 // It retrieves both HTML5 data attributes and then creates an image tag with
-// the correct source destination depending on the available screen width of 
+// the correct source destination depending on the available screen width of
 // the user'ss device. This way smaller images are sent to mobile devices or
-// any device smaller than 768px. 
+// any device smaller than 768px.
 
 // The <noscript> tags are then removed from the page.
 var responsiveImageTag = {
-	
+
     replaceInitialImages:function() {
 		var platform = "desktop";
 		var responsiveImages = $$(".responsivize");
-		var i, 
+		var i,
 			noOfresponsiveImages = responsiveImages.length;
 
 		// Test for available width in current browser window
-		// 767px, anything smaller than an ipad is considered mobile 
-		if(screen.width <= 767){ 
+		// 767px, anything smaller than an ipad is considered mobile
+		if(screen.width <= 767){
 			platform = "mobile";
 		}
 
@@ -30,6 +30,7 @@ var responsiveImageTag = {
 			var img = window.document.createElement("img");
 
 			img.alt = noScriptElem.getAttribute("data-alttext");
+			img.className = noScriptElem.getAttribute("data-cssclass");
 
 			if(platform === "mobile"){
 				img.src = noScriptElem.getAttribute("data-mobilesrc");
@@ -37,8 +38,7 @@ var responsiveImageTag = {
 				img.src = noScriptElem.getAttribute("data-fullsrc");
 			}
 
-			img.className = "responsive";
-			noScriptElem.previous().appendChild(img);	
+			noScriptElem.previous().appendChild(img);
 			noScriptElem.style.display = "none";
 		}
     }

data/lib/responsive_image_tag.rb

@@ -1,5 +1,14 @@
+begin
+  require 'padrino-gen'
+  # debugger
+  Padrino::Generators.load_paths << Dir[File.dirname(__FILE__) + '/generators/responsive_image_tag/padrino_rit.rb']
+rescue LoadError
+  # Fail silently
+  puts "Error"
+end
+
 module ResponsiveImageTag
-  
+
   # Emits the special (and somewhat ugly) markup for our responsive image
   # tag.
   #
@@ -9,26 +18,27 @@ module ResponsiveImageTag
   def responsive_image_tag(small, big, options = {})
     output = tag "span", {:class => "img-placeholder"}
     output += tag "/span", nil, true
-    output += tag "noscript", noscript_attributes(small, big, options), true  
+    output += tag "noscript", noscript_attributes(small, big, options), true
     output += image_tag(big, options)
     output += tag "/noscript", nil, true
     output
   end
-  
-  private 
-  
+
+  private
+
   def noscript_attributes(small, big, options)
     attrs = {
       "data-fullsrc" => image_path(big),
       "data-mobilesrc" => image_path(small),
       :class => "responsivize"
     }
-    unless options.nil? || options == {} || options[:alt].nil?
-      attrs.merge!("data-alttext" => options[:alt])
+    unless options.nil? || options == {}
+      attrs.merge!("data-alttext" => options[:alt]) unless options[:alt].nil?
+      attrs.merge!("data-cssclass" => options[:class]) unless options[:class].nil?
     end
     attrs
   end
-  
+
 end
 
 ActionView::Base.send(:include, ResponsiveImageTag) if defined?(ActionView::Base)

data/responsive_image_tag.gemspec

@@ -4,14 +4,14 @@
 # -*- encoding: utf-8 -*-
 
 Gem::Specification.new do |s|
-  s.name = %q{responsive_image_tag}
-  s.version = "0.2.5"
+  s.name = "responsive_image_tag"
+  s.version = "0.2.6"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]
-  s.date = %q{2011-08-18}
-  s.description = %q{Allows you to specify two images in a responsive_image_tag, and includes a javascript generator which will rewrite the DOM, requesting the correct image based on the screen size of the current client device.}
-  s.email = %q{dave.hrycyszyn@headlondon.com}
+  s.date = "2012-10-02"
+  s.description = "Allows you to specify two images in a responsive_image_tag, and includes a javascript generator which will rewrite the DOM, requesting the correct image based on the screen size of the current client device."
+  s.email = "dave.hrycyszyn@headlondon.com"
   s.extra_rdoc_files = [
     "LICENSE.txt",
     "README.rdoc"
@@ -28,6 +28,7 @@ Gem::Specification.new do |s|
     "generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb",
     "generators/responsive_image_tag/templates/README",
     "lib/generators/responsive_image_tag/jquery_generator.rb",
+    "lib/generators/responsive_image_tag/padrino_rit.rb",
     "lib/generators/responsive_image_tag/prototype_generator.rb",
     "lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js",
     "lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js",
@@ -36,11 +37,11 @@ Gem::Specification.new do |s|
     "test/helper.rb",
     "test/test_responsive_image_tag.rb"
   ]
-  s.homepage = %q{http://github.com/futurechimp/responsive_image_tag}
+  s.homepage = "http://github.com/futurechimp/responsive_image_tag"
   s.licenses = ["MIT"]
   s.require_paths = ["lib"]
-  s.rubygems_version = %q{1.4.2}
-  s.summary = %q{DO NOT USE THIS YET! Helps you insert responsive images into your views}
+  s.rubygems_version = "1.8.17"
+  s.summary = "DO NOT USE THIS YET! Helps you insert responsive images into your views"
 
   if s.respond_to? :specification_version then
     s.specification_version = 3

data/test/test_responsive_image_tag.rb

@@ -1,7 +1,7 @@
 require 'helper'
 
 class TestResponsiveImageTag < MiniTest::Unit::TestCase
-    
+
   describe "A responsive_image_tag" do
     describe "in rails" do
       before do
@@ -11,11 +11,11 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
         @tag = view.responsive_image_tag("small.jpg", "big.jpg")
         @doc = Nokogiri::HTML.fragment(@tag)
       end
-      
+
       it "should write in one <span>" do
         assert_equal 1, @doc.xpath('span').length
       end
-      
+
       it "should put a img-placeholder class on the <span>" do
         span_class = @doc.xpath('span').first.attributes["class"]
         assert_equal "img-placeholder", span_class.value
@@ -40,41 +40,41 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
       it "should use big.jpg as the value for full-src" do
         @tag.must_match "data-fullsrc=\"/images/big.jpg\""
       end
-      
+
       describe "the noscript tag" do
         before do
           @noscript = @doc.xpath("noscript").first
         end
-      
+
         it "should exist, once" do
           assert_equal(1, @doc.xpath("noscript").length)
         end
-      
+
         it "should have a data-fullsrc attribute" do
           assert @noscript.attributes["data-fullsrc"]
         end
-        
+
         it "should point data-fullsrc at the big image" do
           assert_equal "/images/big.jpg",
             @noscript.attributes["data-fullsrc"].value
         end
-      
+
         it "should have a data-mobilesrc attribute" do
           assert @noscript.attributes["data-mobilesrc"]
         end
-        
+
         it "should point data-mobilesrc at the small image" do
           assert_equal "/images/small.jpg",
             @noscript.attributes["data-mobilesrc"].value
         end
-      
+
         it "should put the 'responsivize' class on the <noscript> tag" do
           assert @noscript.attributes["class"]
           assert @noscript.attributes["class"].value = "responsivize"
         end
-        
-      end  
-      
+
+      end
+
       describe "with an :alt option specified" do
         before do
           view = ActionView::Base.new
@@ -82,19 +82,37 @@ class TestResponsiveImageTag < MiniTest::Unit::TestCase
                     "small.jpg", "big.jpg", :alt => "foo")
           @doc = Nokogiri::HTML.fragment(@tag)
         end
-        
+
         it "should put an :alt attribute on the <noscript> tag" do
           noscript = @doc.xpath("noscript").first
           assert noscript.attributes["data-alttext"]
         end
-        
+
         it "should put a value of 'foo' into the :alt" do
           noscript = @doc.xpath("noscript").first
           assert_equal "foo", noscript.attributes["data-alttext"].value
-        end        
-        
+        end
       end
-       
+
+      describe "with an :class option specified" do
+        before do
+          view = ActionView::Base.new
+          @tag = view.responsive_image_tag(
+                    "small.jpg", "big.jpg", :class => "foo")
+          @doc = Nokogiri::HTML.fragment(@tag)
+        end
+
+        it "should put an :alt attribute on the <noscript> tag" do
+          noscript = @doc.xpath("noscript").first
+          assert noscript.attributes["data-cssclass"]
+        end
+
+        it "should put a value of 'foo' into the :class" do
+          noscript = @doc.xpath("noscript").first
+          assert_equal "foo", noscript.attributes["data-cssclass"].value
+        end
+      end
+
     end
   end
 end

metadata

@@ -1,121 +1,92 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: responsive_image_tag
-version: !ruby/object:Gem::Version 
-  hash: 29
+version: !ruby/object:Gem::Version
+  version: 0.2.6
   prerelease: 
-  segments: 
-  - 0
-  - 2
-  - 5
-  version: 0.2.5
 platform: ruby
-authors: 
+authors:
 - Dave Hrycyszyn
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2011-08-18 00:00:00 +01:00
-default_executable: 
-dependencies: 
-- !ruby/object:Gem::Dependency 
-  type: :development
-  version_requirements: &id001 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
-  requirement: *id001
-  prerelease: false
+date: 2012-10-02 00:00:00.000000000Z
+dependencies:
+- !ruby/object:Gem::Dependency
   name: minitest
-- !ruby/object:Gem::Dependency 
+  requirement: &2169114280 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
   type: :development
-  version_requirements: &id002 !ruby/object:Gem::Requirement 
+  prerelease: false
+  version_requirements: *2169114280
+- !ruby/object:Gem::Dependency
+  name: bundler
+  requirement: &2169113760 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 23
-        segments: 
-        - 1
-        - 0
-        - 0
+      - !ruby/object:Gem::Version
         version: 1.0.0
-  requirement: *id002
-  prerelease: false
-  name: bundler
-- !ruby/object:Gem::Dependency 
   type: :development
-  version_requirements: &id003 !ruby/object:Gem::Requirement 
+  prerelease: false
+  version_requirements: *2169113760
+- !ruby/object:Gem::Dependency
+  name: jeweler
+  requirement: &2169113240 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
+    requirements:
     - - ~>
-      - !ruby/object:Gem::Version 
-        hash: 7
-        segments: 
-        - 1
-        - 6
-        - 4
+      - !ruby/object:Gem::Version
         version: 1.6.4
-  requirement: *id003
-  prerelease: false
-  name: jeweler
-- !ruby/object:Gem::Dependency 
   type: :development
-  version_requirements: &id004 !ruby/object:Gem::Requirement 
-    none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
-  requirement: *id004
   prerelease: false
+  version_requirements: *2169113240
+- !ruby/object:Gem::Dependency
   name: rcov
-- !ruby/object:Gem::Dependency 
-  type: :development
-  version_requirements: &id005 !ruby/object:Gem::Requirement 
+  requirement: &2169112420 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
-  requirement: *id005
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
   prerelease: false
+  version_requirements: *2169112420
+- !ruby/object:Gem::Dependency
   name: actionpack
-- !ruby/object:Gem::Dependency 
-  type: :development
-  version_requirements: &id006 !ruby/object:Gem::Requirement 
+  requirement: &2169109680 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        hash: 3
-        segments: 
-        - 0
-        version: "0"
-  requirement: *id006
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
   prerelease: false
+  version_requirements: *2169109680
+- !ruby/object:Gem::Dependency
   name: nokogiri
-description: Allows you to specify two images in a responsive_image_tag, and includes a javascript generator which will rewrite the DOM, requesting the correct image based on the screen size of the current client device.
+  requirement: &2169108780 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: *2169108780
+description: Allows you to specify two images in a responsive_image_tag, and includes
+  a javascript generator which will rewrite the DOM, requesting the correct image
+  based on the screen size of the current client device.
 email: dave.hrycyszyn@headlondon.com
 executables: []
-
 extensions: []
-
-extra_rdoc_files: 
+extra_rdoc_files:
 - LICENSE.txt
 - README.rdoc
-files: 
+files:
 - .document
 - Gemfile
 - Gemfile.lock
@@ -127,6 +98,7 @@ files:
 - generators/responsive_image_tag/prototype_responsive_image_tag_generator.rb
 - generators/responsive_image_tag/templates/README
 - lib/generators/responsive_image_tag/jquery_generator.rb
+- lib/generators/responsive_image_tag/padrino_rit.rb
 - lib/generators/responsive_image_tag/prototype_generator.rb
 - lib/generators/responsive_image_tag/templates/responsive-image-tag-jquery.js
 - lib/generators/responsive_image_tag/templates/responsive-image-tag-prototype.js
@@ -134,39 +106,32 @@ files:
 - responsive_image_tag.gemspec
 - test/helper.rb
 - test/test_responsive_image_tag.rb
-has_rdoc: true
 homepage: http://github.com/futurechimp/responsive_image_tag
-licenses: 
+licenses:
 - MIT
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
+required_ruby_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+      segments:
       - 0
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
+      hash: 1939109034445376453
+required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      hash: 3
-      segments: 
-      - 0
-      version: "0"
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.4.2
+rubygems_version: 1.8.17
 signing_key: 
 specification_version: 3
 summary: DO NOT USE THIS YET! Helps you insert responsive images into your views
 test_files: []
-