Makes your life easier optimizing an application for retina displays.
Retina Rails automatically generates retina versions of your uploaded images (CarrierWave or Paperclip). It detects if a visitor has a retina display and if so it displays the @2x version.
Note: It also works for images that live in assets/images.
- Add
gem 'retina_rails'
to your Gemfile. - Run
bundle install
. - Add
//= require retina
to your Javascript manifest file (usually found atapp/assets/javascripts/application.js
).
Simply add retina!
to your uploader.
class ExampleUploader < CarrierWave::Uploader::Base
retina!
version :small do
process :resize_to_fill => [30, 30]
process :retina_quality => 25
end
version :large, :retina => false do
process :resize_to_fill => [1000, 1000]
end
end
By default it sets the retina image quality to 40 which can be overriden with process :retina_quality => 25
. To disable the creation of a retina version simply call version :small, :retina => false
.
You can also use your custom processors like so:
class ExampleUploader < CarrierWave::Uploader::Base
retina!
version :small, :retina => false do
process :resize_to_fill_with_gravity => [100, 100, 'North', :jpg, 75]
end
version :small_retina, :retina => false do
process :resize_to_fill_with_gravity => [200, 200, 'North', :jpg, 40]
end
end
This will generate small.jpg
and small@2x.jpg
.
Simply add retina!
to your model and set :retina
to true.
class ExampleUploader < ActiveRecord::Base
retina!
has_attached_file :image,
:styles => {
:original => ["800x800", :jpg],
:big => ["125x125#", :jpg]
},
:retina => true
# :retina => { :quality => 25 }
end
By default it sets the retina image quality to 40 which can be overriden by adding a quality
option.
image_tag('image.png', :retina => true)
Voila! Now you're using Retina Rails.
Retina Rails uses retinajs (https://github.com/imulus/retinajs)
- Fork the project.
- Make your feature addition or bug fix.
- Add tests for it. This is important so I don't break it in a future version unintentionally.
- Commit, do not mess with rakefile, version, or history. (if you want to have your own version, that is fine but bump version in a commit by itself I can ignore when I pull)
- Send me a pull request. Bonus points for topic branches.
Copyright (c) 2012 Johan van Zonneveld. See LICENSE for details.