Library for Showing Gravatars or Generating User Avatars

Avatar is a JavaScript library for displaying Gravatars or creating user avatars that help you create a custom user avatar with Gravatar, Avatars.io, or custom patterns.

[Cartoon Avatars] A JavaScript Library For Creating Vector-Based Animated Faces

How to make use of it:

Install theĀ Avatar.js through NPM:

# NPM
$ npm install avatar-initials --save

Import theĀ Avatar.js.

import Avatar from 'avatar-initials';

Create an empty img tag to put the person’s avatar.

// Add image here

Generate an avatar type a Gravatar account.

var avatar = new Avatar(document.getElementById('example'), {

    // uses Gravatar
   'useGravatar': true,

    // path to fallback image
   'fallbackImage': '',

    // avatar size
   'size': 80,

    // precalculated MD5 string of an email address
   'hash': null,                   

   // email for the Gravatar
   'email': null, 

   // fallback type
   'fallback': 'mm',

   // rating
   'rating': 'x',

   // force defaults
   'forcedefault': false,

   // Use Gravatars fallback image
   'allowGravatarFallback': false
   
});

Generate an avatar from an Avatars.io account.

var avatar = new Avatar(document.getElementById('example'), {

    // uses Avatars.io
    use_avatars_io: true,

    // Avatars.io options
    avatars_io: {

      // user ID
      user_id: null,

      // avatar Identifier
      identifier: null, 

      // // Twitter ID or Username
      twitter: null,       

      // Facebook ID or Username
      facebook: null,      

      // Instagram ID or Username
      instagram: null,     

      // small, medium, large
      size: 'medium'
  },

});

Generate a customized avatar from the plain textual content.

var avatar = new Avatar(document.getElementById('example'), {

    // avatar text
    initials: '', 

    // text color
    initial_fg: '#888888',

    // bg color
    initial_bg: '#f4f6f7',

    // font size
    initial_size: null, 

    // font weight
    initial_weight: 100, 

    // font family
    initial_font_family: "'Lato', 'Lato-Regular', 'Helvetica Neue'"

});

Custom User Avatar Generator, Avatar Plugin/Github


See Demo And Download

Official Website(MatthewCallis): Click Here

This superior jQuery/javascript plugin is developed by MatthewCallis. For extra Advanced Usages, please go to the official website.

Related Posts

Vector-Graphs-smartGraph

Generating Beautiful Vector Graphs With jQuery | smartGraph

SmartGraph is a free and easy-to-use JavaScript library to create beautiful vector diagrams with many customizations. This plugin allows developers to create dynamic, responsive, draggable vector graphics…

vue-image-slider-transition

Image Slider With 20 Cool Transitions Component | vue-flux

Vue flux is an image slider developed with Vuejs 2 that comes with 20+ nice transitions out of the box. Included transitions 2D transitions Fade: Fades from…

simple-parallax-scrolling

Simple background Image Parallax Scroll Plugin In jQuery

Background parallax effect is a simple jQuery background image without any library. Uses jQuery’s scroll() function to track the scroll event and applies the exact parallax scroll…

bootstrap-color-picker-plugin

Modular Color Picker Plugin for Bootstrap | BS Colorpicker

Bootstrap Colorpicker is a standard color picker plugin for Bootstrap 4. Colorpicker Plugin for Bootstrap 5/4/3 frameworks that allow you to add a color picker to an…

gdpr-iframe-manager-js

GDPR Friendly iFrame Manager In Vanilla JS | iframemanager

IframeMananger is a lightweight JavaScript plug-in that helps you to comply with GDPR by completely removing iframes at first and setting a notice related to that service….

diagonal-slider-anime-js

Diagonal Thumbnails Carousel Slider | Anime.js

Diagonal Slider is a cool mini carousel made with Anime.js JavaScript library. It takes a bunch of pictures and turns them into a circular user interface where…