Exelord
Ember Initials is a package for generating simple avatars using users initials, images, gravatars or adorables. It definitely supports Ember 3.16 (or higher). Thanks to highly customizable interface you can define defaults and even set fallbacks.
Demo App with code generators
Demo app with interactive examples you can find at http://exelord.github.io/ember-initials
Compatibility
- Ember.js v3.16 or above
- Ember CLI v2.13 or above
- Node.js v10 or above
This addon has been tested on:
- IE 10 and UP including EDGE
- Firefox 44 and UP
- Chrome 48 and UP
- Opera 35 and UP
Install
ember install ember-initials
Quick start
Ember Initials gives you a built-in components which you can use in yours templates:
Initials avatars:
<EmberInitials @name="John Doe" />or
<EmberInitials::Initials @name="John Doe" />Image avatars:
<EmberInitials::Image @image="/url/to/avatar.png" />Gravatar avatars:
<EmberInitials::Gravatar @email="gravatar@email.com" />Adorables avatars:
<EmberInitials::Adorable @email="email.to@generate.com" />Examples, configuration and code generator are available on Project Site.
API Documentation
EmberInitials
<EmberInitials
@image="images/user.jpg"
@name="Ember Initials"
@defaultName="?"
@seedText="Ember Initials"
@textColor="white"
@fontSize=55
@fontWeight=100
@fontFamily="Helvetica Neue Light, Arial, sans-serif"
@size=200
/>image- image url | if image will be not found the initials avatars will be usedname- name of user to generate initialsdefaultName- ifnamewill be not passed this name will be usedseedText- uniq string which will be used to generate background color, eg. user's emailtextColor- color of the text (initials) | hash or namefontSize- font size inpxfontWeight- font weight inpxfontFamily- names of fonts with fallbacks | at this time only system fonts can be usedsize- size of the avatar in pixels (setnullif you do not want to use elements attributes likewidthandheight)
EmberInitials::Image
<EmberInitials::Image
@image="images/user.jpg"
@size=200
@defaultImage="images/default.jpg"
/>image- image url | if image will be not found thedefaultImagewill be useddefaultImage- default image urlsize- size of the avatar in pixels (setnullif you do not want to use elements attributes likewidthandheight)
EmberInitials::Gravatar
<EmberInitials::Gravatar
@image="images/user.jpg"
@email="example@example.com"
@defaultImage="images/default.jpg"
@relativeUrl="true"
@size=200
/>image- image url | if image will be not passed the avatar will be generated form email thanks to gravataremail- Email which will be used to fetching the gravatardefaultImage- image src (relative or absolute URL depends onrelativeUrloption) | if gravatar will not be found this image will be usedrelativeUrl-trueorfalse| decide whichdefaultImageurl do you want to use - relative or absolutesize- size of the avatar in pixels (setnullif you do not want to use elements attributes likewidthandheight)
EmberInitials::Adorable
<EmberInitials::Adorable
@image="images/user.jpg"
@email="email@user.com"
@size=50
/>image- image url | if image will be not found the avatar will be generated form email thanks to adorableemail- Email which will be used to generating unique adorable avatarsize- size of the avatar in pixels (setnullif you do not want to use elements attributes likewidthandheight)