Skip to content
LetterPic is a small jQuery plugin that converts user's name to userpic, using it's initials.
HTML JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
js
patterns
resources
LICENSE
README.md
debug.log
index.html
predefinedColors.html

README.md

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

    <div class="letterpic" title="Jon Snow"></div>
    <canvas class="letterpic" title="Jon Snow"></canvas>
    <img class="letterpic" title="Jon Snow" src="ErrorImagePath.jpg" />

JavaScript (jQuery)

    $(".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.

    <div class="letterpic" title="Alex" data-userid="123"></div>
    <div class="letterpic" title="Alex" data-userid="99999"></div>

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/.

    $(".userpic-letter-custom").letterpic({
        colors: ["#000", "#111", "#222", "#333" ],
        font: "Tahoma",
        fontColor: "#94090D",
        fontSize: 0.3
    });
You can’t perform that action at this time.