angular-gravatar

angular-gravatar

Angular.JS directive for Gravatar.

Copyright (C) 2014, Sebastian Wallin [e-mail]

Requirements

• AngularJS (http://angularjs.org)

Install with Bower

bower install angular-gravatar

Install with NPM

npm install angular-gravatar

Usage

Include both md5.js and angular-gravatar.js in your application.

<script src="components/angular-gravatar/build/md5.js"></script>
<script src="components/angular-gravatar/build/angular-gravatar.js"></script>

Add the module ui.gravatar as a dependency to your app:

var app = angular.module('app', ['ui.gravatar']);

Then use the directive on an image tag and it will set the correct src attribute for you.

<img gravatar-src="'[e-mail]'" gravatar-size="100">

If the source is already an MD5 hash, it will be left untouched (thanks @thewarpaint)

Binding Once

If you know that the source is not going to change, you can use the gravatar-src-once instead:

<img gravatar-src-once="user.email">

Note: this directive will watch for a non falsy value and then stop watching.

Configuration

The options that are sent along to Gravatar can be set either directly in the directive as seen above with size or configured as default parameters via the gravatarServiceProvider:

angular.module('ui.gravatar').config([
  'gravatarServiceProvider', function(gravatarServiceProvider) {
    gravatarServiceProvider.defaults = {
      size     : 100,
      "default": 'mm'  // Mystery man as default for missing avatars
    };

    // Use https endpoint
    gravatarServiceProvider.secure = true;
  }
]);

All the available options can be seen over at the Gravatar docs for image requests

License

MIT

Contributors

• Alexander Makarenko (https://github.com/estliberitas)
• Eduardo Garcia (https://github.com/thewarpaint)