Generate User Initial Avatar with PHP & MySQL

Initial avatar or letter avatar is a feature to create user’s custom avatar from initials if user not uploaded any avatar. It’s a very spacial feature to attract users and make them happy as it makes user profile attractive and also increase users experience. If you’re a PHP developer and thinking about displaying user’s initial avatar instead of default no avatar image, then you can easily implement this in your project by going through this tutorial.

In this tutorial you will learn how to generate user initial avatar or letter avatar with PHP. We will cover this tutorial in easy steps with live demo.

Also, read:

• Upload Multiple Images using jQuery, PHP & MySQL
• Reduce or Compress Image Size While Uploading in PHP
• Image Upload without Page Refresh with PHP and jQuery
• Amazon S3 File Upload using PHP
• Angular Multiple File Upload with PHP and MySQL
• Create Thumbnails While Uploading Images with PHP & jQuery
• Amazon S3 File Upload using JavaScript

As we will cover this tutorial with live example to generate user initial or letter avatar with PHP and MySQL, so the major files for this example is following.

• index.php
• style.css
• script.js

Step1: Create Database Tables
First we will create MySQL database table members to store members details to display.

CREATE TABLE `members` (
  `id` int(11) NOT NULL,
  `first_name` varchar(255) DEFAULT NULL,
  `last_name` varchar(100) DEFAULT NULL,
  `avatar` varchar(255) DEFAULT NULL,
  `designation` varchar(200) DEFAULT NULL,
  `address` varchar(200) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

We will also insert few records to create example.

INSERT INTO `members` (`id`, `first_name`, `last_name`, `avatar`, `designation`, `address`) VALUES
(1, 'Laeeq', 'Khan', NULL, 'Web Developer', 'New Delhi, India'),
(2, 'George', 'Smith', NULL, 'Java Programmer', 'New York, USA'),
(3, 'Damian', 'Martin', NULL, 'PHP Programmer', 'London, UK');

Step2: Include Letter Avatar Library
As we will use LetterAvatar library to create letter avatar, so first we will include library files in index.php file to create letter avatar.

<?php
require_once 'vendor/autoload.php';
use YoHang88\LetterAvatar\LetterAvatar;	
?>

We will call LetterAvatar() to create letter avatar for passed user name according to passed options.

<?php
$avatarImage = new LetterAvatar($memberName, 'circle', 64);
?>

Step3: Create Letter Avatar for Users
Now we will connect to MySQL database and get users details from table members. Then we will loop through users and check if user avatar not exist then call function LetterAvatar() to create letter avatar for each member.

<?php
$membersQuery = "SELECT id, first_name, last_name, avatar, designation, address FROM members";
$membersResult = mysqli_query($conn, $membersQuery);	
while($member = mysqli_fetch_assoc($membersResult)){
	$avatarImage = '';
	if($member['avatar']) {
		$avatarImage = $member['avatar'];
	} else {
		$memberName = $member['first_name']." ".$member['last_name'];
		$avatarImage = new LetterAvatar($memberName, 'circle', 64);
	}
	?>		
	<div class="col-sm-3">
		<div class="card">
			<canvas class="header-bg" width="250" height="70" id="header-blur"></canvas>
			<div class="avatar">
				<img class="profile-image" src="<?php echo $avatarImage; ?>">
			</div>
			<div class="content">
				<p><span 
style="font-weight:bold;font-size:22px;color:
white;"><?
php echo $memberName; ?></span></p>
				<p><?
php echo $member['designation']; ?></p>
				<p><span 
style="font-weight:bold;font-size:14px;"><?
php echo $member['address']; ?></span></p>
				</p>						
			</div>
		</div>
	</div>			
<?php } ?>	

You may also like:

• Build Live Chat System with Ajax, PHP & MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Invoice System with PHP & MySQL
• Push Notification System with PHP & MySQL
• Create Bootstrap Cards with PHP and MySQL
• Build Content Management System with PHP & MySQL
• Convert Unix Timestamp To Readable Date Time in PHP
• Ajax Drop Down Selection Data Load with PHP & MySQL
• Inventory Management System with Ajax, PHP & MySQL
• Drag and Drop File Upload using jQuery and PHP
• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL

You can view the live demo from the Demo link and can download the full script from the Download link below.
Demo Download