judesfernando / initial.js

Simple jQuery plugin to make Gmail like text avatars for profile pictures

initial.js

Simple jQuery plugin to make Gmail like text avatars for profile pictures.

---

Demo

Browser compatibility

• Chrome
• Firefox
• Opera 9+
• Safari 3.2+
• iOS Safari 3.2+
• Android Browser 3+

Usage

Markup

<img data-name="Steve" data-color="#85e0ce" class="profile"/>

jQuery code

$('.profile').initial();

Options

Below options can be overridden with data-attributes inside the image element. Refer to the "data-attribute" column for related data-attribute for each option

Option	data-attribute	Description	Default
name	data-name	Name of the user which the profile picture should be generated	Name
height	data-height	Height of the picture	100
width	data-width	Width of the picture	100
charCount	data-char-count	Number of characherts to be shown in the picture.	1
textColor	data-text-color	Color of the text	#ffffff
fontSize	data-font-size	Font size of the character(s)	60
fontWeight	data-font-weight	Font weight of the character(s)	400
radius	data-radius	Rounded corners	0
seed	data-seed	Number to randomize the background color	0
color	data-color	Background color of the profile picture that should be generated	null

initial.js's Issues

no background color for numbers

if the name is a number, it does work but doesn't add background color

Option for uploaded profile photo to override initials

Would be nice to have initial.js be fallback for users who have not uploaded profile pic.

Feature Request: Dynamic background color

Is there a way to override the background color using a data attribute?

When data-name is a number the unicode_slice function returns empty string

If the element contains the attribute data-name with only numbers the result of unicode_slice is an empty string on v0.2.0, the v0.1.0 throws the error on substring function and stops the iteration.
Based on some tests on casting strings (http://jsben.ch/#/ghQYR) problably the best way to resolve this is casting with '' for better performance.

Line 63:

var c = unicode_slice('' + settings.name, 0, settings.charCount).toUpperCase();

Demo is DOWN

http://judelicio.us/ seems discontinued.

Updating Text, does not re-redraw the image

When updating data-name from one value to another, the Avatar does not refresh to reflect the new value.

Microsoft Edge resize image issue

Hi there,

It seems if I try to add a class to the image and set the css to width:25px the image resizes but the text is not centered

I believe it could be an issue with Edge text-anchor="middle"

Internet Explorer support ( Not working)

Hello, thank you for that nice feature :)
I tried it but image still not working in internet explorer ( all versions) i dont know why.

is there other settings to add to get it supported by IE please?

thank you so much

this is my code :

  <script type="text/javascript">
  $(document).ready(function(){
    $('.profile-pic').initial({width:46,height:46,fontSize:20,fontWeight:400});
    $('.initial-logo').initial({width:80,height:80});
  })
  </script>

<img class="profile-pic media-object pull-left img-circle" data-name="Joe">

i get ( X ) in the place of image when its IE

Thank you

Tag latest version

Could you please do:

$ git tag v0.1.0
$ git push -t

On this repo so things like bower and rails-assets can pick the version number?

Thanks!

Adding custom font

First of all thankyou so much for the great plugin.

I tried to add custom downloaded font from google font ( Hind Silguri ) and its not updating.

How to implement custom font in the js? I tried to modify the js itself but its not working.

can you please help?

Radius option not working

CSS border-radius property cannot be applied to svg images. So the radius option is ignored and the output is always a rectangle.

Not working on IE

Tested it with IE9 and IE10 on Windows 8.1, unfortunately it's not working.

Unicode strings throw an error

Right now initial.js uses string.substr, which is non-unicode aware.

This means that unicode names (for example, "😸👍💃🏻") throw an exception. (the result of string.substr is "")

There is unicode-substring for making substrings. Maybe it could be used to calculate the substrings correctly.

At the very least, unicode should not throw an error.

PS: In case it is useful, I also found this polyfill which implements String.prototype.at which is an ECS6 unicode-aware version of charAt

Please publish on NPM

Rails wrapper released

Hey @judesfernando,

Thanks for a great and nifty plugin. I just released a Rails gem to wrap it up and use it with the Assets Pipeline. I just wanted to let you know.

https://github.com/dgilperez/initialjs-rails

Cheers!

Wordpress Plugin

Hi, just an fyi for anyone looking to use this on their wordpress site.

https://wordpress.org/plugins/echo1-consulting-inital-js-avatar/

Same letter different colors

Hi,
it seems to me the plugin is designed to give same letter the same color, although it is a different username. I think it's better to make the color dependent on something else than the first letter - same color of two different initials can cause no confusion, but what can cause confusing the users is the same color of the same letter.
I propose (made this for myself as a workaround) changing around line 76
this:

var colorIndex = Math.floor((c.charCodeAt(0) + settings.seed) % colors.length);
to something like this:
var colorIndex = Math.floor((settings.name.charCodeAt(1) + settings.name.charCodeAt(3) + settings.seed) % colors.length);

Validation errors

When validates a page using initial js with W3C Validator, appears one error validation in each image:

• Element img is missing required attribute src: in the generated html appears src="data:image/svg+xml;base6..." but it's seem it's not valid.

😊 Thank you!