https://github.com/yakovlevga/letterpic
LetterPic is a small jQuery plugin that converts user's name to userpic, using it's initials.
https://github.com/yakovlevga/letterpic
avatar avatar-generator jquery-plugin ui-components userpic
Last synced: 10 months ago
JSON representation
LetterPic is a small jQuery plugin that converts user's name to userpic, using it's initials.
- Host: GitHub
- URL: https://github.com/yakovlevga/letterpic
- Owner: yakovlevga
- License: mit
- Created: 2017-03-15T14:35:04.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2021-01-19T23:30:38.000Z (over 5 years ago)
- Last Synced: 2025-01-22T19:47:13.052Z (over 1 year ago)
- Topics: avatar, avatar-generator, jquery-plugin, ui-components, userpic
- Language: HTML
- Size: 544 KB
- Stars: 34
- Watchers: 5
- Forks: 9
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jQuery LetterPic plugin
> LetterPic is a small jQuery plugin that converts user's name to userpic, using it's initials.
You can replace any html element with initials based userpic (e.g. George Yakovlev -> GA picture).
Another way of using, is to replace broken images by letter userpic.
## Example
## Demo
https://yakovlevga.github.io/letterpic/
## Basic Usage
### HTML
```html
```
### JavaScript (jQuery)
```js
$(".letterpic").letterpic();
```
## Configuration
By default user's color is cached by users name.
If you afraid of situations when two different users can have same name,
you should add *data-userid=YourInternalUserId* attribute to canvas.
In this way user's colors will be cached by this id, not by name.
```html
```
LetterPic offers few appearance configuration options.
You can change *fill* property to change background fill style, possible values: *color*, *gradient* ot *image*.
Also you can change *color scheme*, *font family*, *font color* and *relative font size*.
For details and more options: https://yakovlevga.github.io/letterpic/.
```js
$(".userpic-letter-custom").letterpic({
colors: ["#000", "#111", "#222", "#333" ],
font: "Tahoma",
fontColor: "#94090D",
fontSize: 0.3
});
```