Skip to content

Latest commit

 

History

History
62 lines (37 loc) · 2.08 KB

README.md

File metadata and controls

62 lines (37 loc) · 2.08 KB
Raw

RetinaTag

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.

Installation

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.

Usage

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
logo@2x.png

Be sure to also specify the base dimensions in your image_tag calls:

<%=image_tag('logo.png',:height=>50)%>

Awesome right?

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.

Contributing

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Added some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

##License This project is licensed under the MIT License.