Project

retina_tag

0.05
No commit activity in last 3 years
No release in over 3 years
This gem overrides image_tag to support retina resolution images using asset pipeline
2005
2006
2007
2008
2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
 Dependencies

Development

Runtime

>= 3.1
 Project Readme

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.