Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Picturefill view helpers for Rails to facilitate Responsive Images
Ruby JavaScript
tree: a8269e3816

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

Picturefill View helpers for Rails

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. -->
        <img src="external/imgs/small.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia">

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

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'  

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


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.


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

Contributing to picturefill-rails

  • 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 (c) 2012 Kristian Mandrup. See LICENSE.txt for further details.

Something went wrong with that request. Please try again.