Rails responsive images
A Rails image_tag() extension to generate HTML5
The following image_tag
= image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true
will generate this output:
<picture>
<source media="(max-width: 767px)" srcset="/assets/responsive_images_767/picture.jpg">
<source media="(max-width: 991px)" srcset="/assets/responsive_images_991/picture.jpg">
<source media="(max-width: 1999px)" srcset="/assets/responsive_images_1999/picture.jpg">
<img width="2568" height="878" alt="awesome" src="/assets/picture.jpg">
</picture>
Installation
Add this line to your application's Gemfile:
gem 'rails_responsive_images'
And then execute:
$ bundle
Or install it yourself as:
$ gem install rails_responsive_images
Usage
Configure the size steps you want to create:
RailsResponsiveImages.configure do |c|
c.image_sizes = [767, 991, 1999]
end
Require jquery-picture for cross browser support
//= require jquery-picture
= image_tag 'awesome/picture.jpeg', alt: 'awesome', responsive: true
TODO
- write tests
- write docs
- review & cleanup the code
Contributing
- Fork it ( https://github.com/chilian/rails_responsive_images/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
Copyright
Copyright © 2015 Christoph Chilian. See LICENSE.txt for further details.