PictureTag

Rails helper for <picture> tag integrated with Picturefill.

Add this to your application's Gemfile:

  gem 'picture_tag'

And then execute:

$ bundle

Or install it yourself as:

$ gem install picture_tag

In case you would like to add a picture polyfill:

  source 'https://rails-assets.org' do
    gem 'rails-assets-picturefill'
  end

And add to your application.js:

//= require picture_tag

= picture_tag '/images/fallback.jpg', image: { alt: 'Your smart alt attribute' } do
  = source_tag srcset: '/images/large.jpg', media: '(min-width: 2000px)', sizes: '100vw'
  = source_tag srcset: '/images/large_retina.jpg 2x', media: '(min-width: 2000px)', sizes: '100vw'
  = source_tag srcset: '/images/medium.jpg', media: '(min-width: 1000px)', sizes: '100vw'
  = source_tag srcset: '/images/medium_retina.jpg 2x', media: '(min-width: 1000px)', sizes: '100vw'
  = source_tag srcset: '/images/small.jpg', sizes: '100vw'
  = source_tag srcset: '/images/small_retina.jpg 2x', sizes: '100vw'

produces

<picture>
  <source srcset="/images/large.jpg" media="(min-width: 2000px)" sizes="100vw">
  <source srcset="/images/large_retina.jpg 2x" media="(min-width: 2000px)" sizes="100vw">
  <source srcset="/images/medium.jpg" media="(min-width: 1000px)" sizes="100vw" >
  <source srcset="/images/medium_retina.jpg 2x" media="(min-width: 1000px)" sizes="100vw" >
  <source srcset="/images/small.jpg" sizes="100vw">
  <source srcset="/images/small_retina.jpg 2x" sizes="100vw">
  <img alt="Your smart alt attribute" srcset="/images/fallback.jpg">
</picture>

Note that the mandatory img tag is automatically generated based on the arguments passed to the picture_tag.

• Picturefill, the neat polyfill used by this gem
• Specification provided by Responsive Images Community Group

1. Fork it ( https://github.com/tomasc/picture_tag/fork )
2. Create your feature branch (git checkout -b my-new-feature)
3. Commit your changes (git commit -am 'Add some feature')
4. Push to the branch (git push origin my-new-feature)
5. Create a new Pull Request