Make Gmail like text avatars for profile pictures if not exist

Published in

mddanishyusuf

3 min readFeb 12, 2018

Today I found an open source library on GitHub that is initial.js build by judesfernando. basically initial.js make an SVG image with first later of the name if user profile picture not setup as Gmail do. this is the really awesome contribution by judesfernando to the open source community. So, today I will show you how we can setup this library with basic Gmail clone example.

We will use a basic CSS framework to design Gmail clone app that is Material Design Lite and Angular for binding JSON data with ng-repeat.

make a project folder and create index.html

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Gmail Text Avatar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body></body>
</html>

Include Material Design Lite CSS, Icons files in <head> section.

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">

Include jquery, angular, initial and material JavaScript file to the bottom before closing body </body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="http://judelicio.us/initial.js/js/initial.min.js"></script>
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $('.profile').initial(); 
  }) 
</script>

make a file js/script.js

angular.module('gmailClone',[]).controller('mainController', ['$scope', function($scope){
	
	$scope.data = [
    {
      "first": "Bryan",
      "last": "Cranston",
      "profile_pic": "http://i.imgur.com/Qi5YNlx.png",
      "message": "Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle."
    },
    {
      "first": "Aaron",
      "last": "Paul",
      "profile_pic": null,
      "message": "Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the 'Need For Speed' Movie."
    },
    {
      "first": "Bob",
      "last": "Odenkirk",
      "profile_pic": null,
      "message": "Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle."
    },
    {
      "first": "Dominic",
      "last": "Purcell",
      "profile_pic": "http://i.imgur.com/pEkD9VK.png",
      "message": "Born in England but raised in Australia by his Norwegian father and Irish mother, Purcell was a bored landscaper who decided to attend a drama school."
    },
    {
      "first": "Wentworth",
      "last": "Miller",
      "profile_pic": null,
      "message": "Wentworth Miller is a compelling and critically acclaimed actor whose credits span both television and feature film."
    },
    {
      "first": "Sarah",
      "last": "Wayne",
      "profile_pic": null,
      "message": "Sarah Wayne Callies was born in La Grange, Illinois, and was raised in Honolulu, Hawaii, the daughter of Valerie Wayne."
    }
  ]}])

finally bind all the index.html code snippet here is completed index.html file.

<!DOCTYPE html>
<html>
<head>
	<title>Gmail Text Avatar</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
</head>
<body ng-app="gmailClone" ng-controller="mainController">
	<div class="mdl-grid">
		<div class="mdl-cell mdl-cell--4-col">
			<ul class="demo-list-three mdl-list">
				<li class="mdl-list__item mdl-list__item--three-line" ng-repeat="x in data">
					<span class="mdl-list__item-primary-content">
						<i class="material-icons mdl-list__item-icon" style="height: 60px">
							<img data-name="{{x.first}}"  ng-if="x.profile_pic == null" class="profile" style="width: 45px;border-radius: 50%" /> 
							<img src="{{x.profile_pic}}"  ng-if="x.profile_pic != null" style="width: 45px;border-radius: 50%" /> 
						</i>						<span>{{x.first}} {{x.last}}</span>
						<p class="mdl-list__item-text-body">
							{{x.message}}
						</p>
					</span>
					<span class="mdl-list__item-secondary-content">
						<a class="mdl-list__item-secondary-action" href="#"><i class="material-icons">star</i></a>
					</span>
				</li>
			</ul>
		</div>
	</div>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
	<script src="http://judelicio.us/initial.js/js/initial.min.js"></script>
	<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<script src="js/script.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
		  $('.profile').initial(); 
		}) 
	</script></body>
</html>

that’s all for now and if there is anything left to do or you want to contribute in this post so you can comment below. Thanks.

Make Gmail like text avatars for profile pictures if not exist

Written by Mohd Danish