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


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 can view the live demo from the Demo link and can download the full script from the Download link below.
Demo [sociallocker]Download[/sociallocker]