Skip to content

Makes your life easier optimizing for retina displays

License

Notifications You must be signed in to change notification settings

Janther/retina_rails

 
 

Repository files navigation

Retina Rails

Gem Version Build Status Coverage Status Code Climate Dependency Status

Makes your life easier optimizing an application for retina displays.

How it works

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.

Installation

  1. Add gem 'retina_rails' to your Gemfile.
  2. Run bundle install.
  3. Add //= require retina to your Javascript manifest file (usually found at app/assets/javascripts/application.js).

CarrierWave

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.

Custom processors

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.

Paperclip

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.

For retina images use

image_tag('image.png', :retina => true)

Voila! Now you're using Retina Rails.

Credits

Retina Rails uses retinajs (https://github.com/imulus/retinajs)

Note on Patches/Pull Requests

  • 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

Copyright (c) 2012 Johan van Zonneveld. See LICENSE for details.

About

Makes your life easier optimizing for retina displays

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • Ruby 100.0%