Picturefill View helpers for Rails

This gem provides polyfills for 3 wys to render responsive images:

picturefill is currently the best way for rendering Responsive Images on a web page.

picturefill-rails provides nice view helper methods to render the picturefill.

<div data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    <div data-src="small.jpg"></div>
    <div data-src="small.jpg"         data-media="(min-device-pixel-ratio: 2.0)"></div>
    <div data-src="medium.jpg"        data-media="(min-width: 400px)"></div>
    <div data-src="medium_x2.jpg"     data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></div>
    <div data-src="large.jpg"         data-media="(min-width: 800px)"></div>
    <div data-src="large_x2.jpg"      data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></div>  
    <div data-src="extralarge.jpg"    data-media="(min-width: 1000px)"></div>
    <div data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></div> 

    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">
    </noscript>
</div>

The above can be rendered in Rails 3+ by writing the following code, using the View helpers provided by the Rails engine included:

= picturefill 'A giant stone face at The Bayon temple in Angkor Thom, Cambodia' do
  = picture_src 'small.jpg'
  = picture_src 'small.jpg',     "(min-device-pixel-ratio: 2.0)"
  = picture_src 'medium.jpg',    "(min-width: 400px)"
  = picture_src 'medium_x2.jpg', "(min-width: 400px) and (min-device-pixel-ratio: 2.0)"
  = picture_src 'largs.jpg',     "(min-width: 800px)"
  = picture_src 'large_x2.jpg',  "(min-width: 800px) and (min-device-pixel-ratio: 2.0)"
  # ...
  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon temple in Angkor Thom, Cambodia"

Note: This example uses HAML as the rendering engine.

Optimizations using conventions

Using conventions, and an extra ratio: option, the following shorthand is possible:

= picturefill 'A giant stone face at The Bayon temple in Angkor Thom, Cambodia' do
  = picture_src 'small.jpg', ratio: 'x2'
  = picture_src 'medium.jpg', "400", ratio: 'x2'
  = picture_src 'large.jpg',  "800", ratio: 'x2'  
  # ...
  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon temple in Angkor Thom, Cambodia"

This will ouput exactly the same HTML as the previous example :) See the specs for more details…

Usage

In your Gemfile:

gem 'picturefill-rails'

A number of specs are included which all pass and should ensure that the view helpers work as expected.

TODO

The #picture_src method works, but could use some heavy refactoring! I don’t like methods of more than 10 lines! Reponsibilities should be off-loaded to other methods (or classes)

Currently the gem only supports Ruby 1.9+ and has only been tested on 1.9.3.

Assets

The gem includes the picturefill javascript assets that are automatically available for the asset pipeline. In your application.js manifest file require:

See demo for a full example!

jQuery Picture

jquery picture is now also partly supported. It is very similar to picturefill but with slightly different tags.

The assets jquery-picture.min.js and jquery-picture.js are included in vendor/assets.

The view helper includes the helper methods:

Usage example:

= picture_tag 'A giant stone face at The Bayon temple in Angkor Thom, Cambodia' do
  = source_tag 'small.jpg', ratio: 'x2'
  = source_tag 'medium.jpg', "400", ratio: 'x2'
  = source_tag 'large.jpg',  "800", ratio: 'x2'  
  # ...
  = picture_fallback "external/imgs/small.jpg", alt: "A giant stone face at The Bayon

And to enable via jquery:

$(function(){
    $('picture').picture();
});

Arcticles

critique of picturefill

Img SrcSet Polyfill

See the specification for the reference algorithm.

See [repo]: github.com/borismus/srcset-polyfill

Usage

Use the srcset attribute of <img> elements. For example:

<img alt="The Breakfast Combo"
     src="banner.jpeg"
     srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w,
             banner-phone-HD.jpeg 100w 2x"/>

Include srcset.min.js in your page.

View helper

= imgset_tag "banner.jpeg", "banner-HD.jpeg 2x, banner-phone.jpeg 100w,banner-phone-HD.jpeg 100w 2x", alt: "The Breakfast Combo"

outputs the HTML code shown above.

If you leave out the srcset argument it will fallback to a single src image

= imgset_tag "banner.jpeg", alt: "The Breakfast Combo"

Same as

= image_tag "banner.jpeg", alt: "The Breakfast Combo"

Assets

The gem includes srcset javascript assets that are automatically available for the asset pipeline. In your application.js manifest file require:

Open questions

Contributing to picturefill-rails

Copyright © 2012 Kristian Mandrup. See LICENSE.txt for further details.