Letter pic based on first initial?

[dotnetshadow]

Hi there,

Great library, I was wondering is there any way to have all names with the first letter the same color?

Example
Andrew - Green
Adam - Green
Harry - Red
Tom - Blue
Tim - Blue

The issue I face currently is that if I have an avatar on a layout page at the top, (similar to how githbu shows your avatar on the top of the page) then the avatar is always displayed as the first colour in the array. So if I login as Andrew it will be red, if I login as Harry it will be red.

But if I have a page that shows a list of people, then my avatar colour at the top of the page and my avatar colour in the list could be different

[yakovlevga]

Hi!
Sorry for delay and thanks for posting this issue.
It helps me to find some problems and make refactoring.

I made some updates and this sample special for you.

1. Now you can pass predefined colors to each letter. This needed if you want to preserve colors by users through different pages.
   Just pass initial property on setup:

`$(".letterpic").letterpic({ 
  fill: 'color',
  initial: {
    color: {
      "A" : "red",
      "B" : "blue",
      ...
}}});`

2. I fix the bug, when same users have different colors.
3. No you can pass maxInitialsLength on init, default is 2. If you want only first letter, pass 1.
   In this case Andrew Garfield and Adam Sandler will have the same color and letter (A) in avatar.
4. If you want different initials (Andrew Garfield => AG, Adam Sandler => AS), but same color, you need to add attribute data-letterpic-key="A" to letterpic html element, like this:

<div class="letterpic" title="Andrew Garfield" data-letterpic-key="A"></div>
<div class="letterpic" title="Adam Sandler" data-letterpic-key="A"></div>

Hope, it will resolve your problem!

[dotnetshadow]

Thank you so much this would definitely solve my problem really appreciate it

[yakovlevga]

You are welcome, happy to help :)