Retina displays are coming! Be sure to make your Rails app ready today.
How? Well, there are a lot of different approaches:
- http://css-tricks.com/which-responsive-images-solution-should-you-use/
- http://www.alistapart.com/articles/responsive-images-how-they-almost-worked-and-what-we-need/
The one I like the most is HiSRC. However I don't like stuffing JavaScript files into my vendor/assets folder, so I created this gem with following benefits:
- It adds HiSRC to the Rails assets pipeline – no more messing around with javascript files (and a clean
vendor/assetsfolder). - It provides a little helper method to include retina ready images in your Rails views.
In your Gemfile:
gem 'hisrc-rails'In your application.js:
//= require hisrc
$(function() {
$('img').hisrc();
});For detailed information about available configuration options be sure to checkout the HiSRC readme.
This gem provides a nice little helper method to optimize your views for retina screens: responsive_image_tag
responsive_image_tag accepts the same options as image_tag, and two additional options as well:
:'1x'- If no 1x option is provided, thesrcis used.:'2x'- If no 2x options is provided, "@2x" is added to thesrc. So "rails.png" becomes "[email protected]".
responsive_image_tag("rails.png")
# => <img src="/assets/rails.png" data-1x="/assets/rails.png" data-2x="/assets/[email protected]" />
responsive_image_tag("http://placehold.it/100x100", :'1x' => "http://placehold.it/200x200", :'2x' => "http://placehold.it/400x400")
# => <img src="http://placehold.it/100x100" data-1x="http://placehold.it/200x200" data-2x="http://placehold.it/200x200" />Many thanks to 1Mark for his first version of HiSRC, and to teleject for maintaining the current version of this really great jQuery plugin. :)
- Fork it
- Create your feature branch (
git checkout -b my-new-feature) - Commit your changes (
git commit -am 'Added some feature') - Push to the branch (
git push origin my-new-feature) - Create new Pull Request
(The MIT license)
Copyright (c) 2012 - 2013 Mario Uher
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.