Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

RetinaTag

The Grails Retina Tag plugin adds retina tag image support to the asset pipeline <asset:image/> taglib. RetinaTag resolves this by extending <asset:image/> to create a hidpi_src attribute with the retina image path if it exists.

Installation

Add retina tag to your build config

plugins {
	compile ':retina-tag:1.1.0'
}

Grals 3

dependencies {
	compile 'com.bertramlabs.plugins:retina-tag:3.0.0'
}

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:

<asset:image src='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 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.

	<asset:image src="${user.photo.url('medium')}" data-hidpi-src="${user.photo.url('medium_2x')" height="75%" width="75"/>

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 APACHE License.

About

Grails Retina Image Tag Support for Asset-Pipeline

Resources

Packages

No packages published