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:

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:

gem 'responsive_image_tag'

Then install it:

bundle install

There’s a generator which copies a JavaScript file into place in @public/javascripts@.

You can run it like this:

Rails 3

rails g responsive_image_tag:jquery

or

rails g responsive_image_tag:prototype

Rails 2

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-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") %>

Contributing to responsive_image_tag

  • Check out the latest master to make sure the feature hasn’t been implemented or the bug hasn’t been fixed yet

  • Check out the issue tracker to make sure someone already hasn’t requested it and/or contributed it

  • Fork the project

  • Start a feature/bugfix branch

  • Commit and push until you are happy with your contribution

  • Make sure to add tests for it. This is important so I don’t break it in a future version unintentionally.

  • Please try not to mess with the Rakefile, version, or history. If you want to have your own version, or is otherwise necessary, that is fine, but please isolate to its own commit so I can cherry-pick around it.

Copyright © 2011 Headlondon, www.headlondon.com

Authors: Dave Hrycyszyn, Mairead Buchan

See LICENSE.txt for further details.