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
attribute with the retina image path if it exists.
Add this line to your application's Gemfile:
And then execute:
Or install it yourself as:
$ gem install retina_tag
NOTE: Jquery is required to be in the runtime.
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
Be sure to also specify the base dimensions in your
Forcing Refresh after loading dynamic content
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.
Override Hidpi src data attribute
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%>
Lazy Loading Images
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.