Universal avatar makes it possible to fetch/generate an avatar based on the information you have about that user. We use a fallback system that if for example an invalid Facebook ID is used it will try Google, and so on.
For the moment we support following types:
- Skype
- Gravatar
- Name initials
- Custom text
- Custom image
The fallbacks are in the same order as the list above were Facebook has the highest priority.
Install the component using Bower:
$ bower install u-avatar --saveOr download as ZIP.
-
Import Web Components' polyfill:
<script src="bower_components/platform/platform.js"></script>
-
Import Custom Element:
<link rel="import" href="bower_components/u-avatar/dist/u-avatar.html">
-
Start using it!
<u-avatar></u-avatar>
Some examples:
<u-avatar google-id="118096717852922241760" size="100" round="true"></u-avatar>
<u-avatar facebook-id="100008343750912" size="150"></u-avatar>
<u-avatar skype-id="sitebase" size="200"></u-avatar>
<u-avatar name="Wim Mostmans" size="150"></u-avatar>
<u-avatar value="86%" size="40"></u-avatar>
<u-avatar size="100" facebook-id="invalidfacebookusername" src="http://www.gravatar.com/avatar/a16a38cdfe8b2cbd38e8a56ab93238d3"></u-avatar>
| Attribute | Options | Default | Description |
|---|---|---|---|
email |
string | String of the email address of the user. You can also provide an MD5 hash. | |
facebook-id |
int OR string | ||
google-id |
int | ||
skype-id |
string | ||
name |
string | Will be used to generate avatar based on the initials of the person | |
value |
string | Show a value as avatar | |
color |
string | random | Used in combination with name and value |
size |
int | 50 | Size of the avatar |
round |
bool | false | Round the avatar corners |
src |
string | Fallback image to use |
In order to run it locally you'll need to fetch some dependencies and a basic server setup.
-
$ [sudo] npm install -g bower grunt-cli
-
Install local dependencies:
$ bower install && npm install -
To test your project, start the development server and open
http://localhost:8000.$ grunt server
-
To build the distribution files before releasing a new version.
$ grunt build
-
To provide a live demo, send everything to
gh-pagesbranch.$ grunt deploy
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature - Commit your changes:
git commit -m 'Add some feature' - Push to the branch:
git push origin my-new-feature - Submit a pull request :D
For detailed changelog, check Releases.
- Find solution for twitter. You first need to request user info to get the avatar url, but authentication is needed :(
- Github support: https://avatars2.githubusercontent.com/u/421104?v=3&s=100