Interested in making your web-sites retina compatible? Rails asset pipeline
makes this a pain with retina image_tags, especially when precompiling assets.
RetinaTag resolves this by extending image_tag to create a data-hidpi-src
attribute with the retina image path if it exists.
Add this line to your application's Gemfile:
gem 'retina_tag'
And then execute:
$ bundle
Or install it yourself as:
$ gem install retina_tag
NOTE: Jquery is required to be in the runtime.
Add retina_tag.js to your application.js file after including jQuery:
//= require retina_tag
Add double pixel resolution images in your assets directory with the @2x modifier
logo.png
[email protected]
Be sure to also specify the base dimensions in your image_tag calls:
<%=image_tag('logo.png',:height=>50)%>
Awesome right?
Retina tag listens to the global event on document called retina_tag:refresh. Firing this event will force retina_tag to rescan the dom for images and update their image src if necessary. Useful if loading content dynamically. Note: retina_tag automatically supports turbolinks.
In some cases it becomes necessary to override the data-hidpi-src attribute and skip asset pipeline. A good example of this might be to load a users profile picture which is stored elsewhere.
<%=image_tag(user.photo.url(:medium), "data-hidpi-src" => user.photo.url(:medium_2x), :height=>75, :width => 75%>
If you set :lazy => true on an image_tag, the src attribute is moved to a data-lodpi-src attribute. You will need to manually instruct the image to load. To do this use RetinaTag.refreshImage(img) where img is the image element.
- 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
##License This project is licensed under the MIT License.