responsive_image_tag 0.2.2 → 0.2.3

data/README.rdoc

@@ -1,5 +1,51 @@
 = responsive_image_tag
 
+== 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 works with Rails 2 and Rails 3, and there are javascript adapters for both Jquery and Prototype.  Pick your poison. 
+
+== HTML structure
+
+Here's the HTML which the helper inserts into the page:
+
+ <span class="img-placeholder"></span>
+ <noscript data-mobilesrc="small.jpg" data-fullsrc="big.jpg" data-alttext="your alt text" class="responsivize">
+ 	<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.
+
 == Installation
 
 Put it in your Gemfile:
@@ -17,19 +63,31 @@ You can run it like this:
  
 === Rails 3
 
- rails g responsive_image_tag:javascript
+ rails g responsive_image_tag:jquery
+
+or 
+
+rails g responsive_image_tag:prototype
 
 === Rails 2
 
- script/generate responsive_image_tag
+ script/generate jquery_responsive_image_tag
+
+or
+
+ script/generate prototype_responsive_image_tag
 
 
 == Usage
 
 You need to do two things. First, make sure that you include a reference to the JavaScript file in your layout:
 
- <%= javascript_include_tag "responsive-image-tag" %>
- 
+ <%= javascript_include_tag "responsive-image-tag-jquery" %>
+
+or 
+
+ <%= javascript_include_tag "responsive-image-tag-prototype" %>
+
 After that, you can use the new tag like so, in a view:
 
  <%= responsive_image_tag("small.jpg", "big.jpg") %>

data/VERSION

@@ -1 +1 @@
-0.2.2
+0.2.3

data/lib/generators/responsive_image_tag/jquery_generator.rb

@@ -12,7 +12,7 @@ module ResponsiveImageTag
       def create_javascript_file
         template 'responsive-image-tag-jquery.js', 
           File.join(
-            'public', 'javascripts', 'responsive-image-tag-prototype.js')
+            'public', 'javascripts', 'responsive-image-tag-jquery.js')
       end
       
     end

data/responsive_image_tag.gemspec

@@ -5,7 +5,7 @@
 
 Gem::Specification.new do |s|
   s.name = %q{responsive_image_tag}
-  s.version = "0.2.2"
+  s.version = "0.2.3"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Dave Hrycyszyn"]

metadata

@@ -1,13 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: responsive_image_tag
 version: !ruby/object:Gem::Version 
-  hash: 19
+  hash: 17
   prerelease: 
   segments: 
   - 0
   - 2
-  - 2
-  version: 0.2.2
+  - 3
+  version: 0.2.3
 platform: ruby
 authors: 
 - Dave Hrycyszyn