Rails helper for <picture> tag integrated with Picturefill.
Add this to your application's Gemfile:
gem 'picture_tag'And then execute:
$ bundleOr install it yourself as:
$ gem install picture_tagIn case you would like to add a picture polyfill:
source 'https://rails-assets.org' do
gem 'rails-assets-picturefill'
endAnd 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
- Fork it ( https://github.com/tomasc/picture_tag/fork )
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Add some feature') - Push to the branch (
git push origin my-new-feature) - Create a new Pull Request
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent