PHP – Make Avatar, Profile Picture and Images with Name Initials (First Letter) Like Google

Create Custom Avatar, Profile Pictures, Images by First Letter of Name in Php: Here today I’m going to share a new web trick with you. As we know Google is one of the best search engine of world and launched a new feature for it’s users. The feature is about Google Account’s Profile Picture. If you will check new google account’s profile picture or avatar of google account, it’s showing Initials or First Letter of Name. So this is a best and creative thing to attract your website users. So now today here i will let you know  “How to make Google Style Profile Picture or Avatar with First letter of Name using php“.  Well! first here i will show you a picture of this new feature, just check below picture.

[BUTTON url=”http://www.infotheme.in/blog/demo/php/name-initials-avatar-profile-picture-using-php/”]See Live Demo[/BUTTON]

[BUTTON url=”http://www.infotheme.in/blog/wp-content/uploads/2016/10/name-initials-avatar.zip”]Download Code[/BUTTON]

So Here was a demo of “Google Style Custom Profile Picture With Name Initial“. Now we will learn to create this feature for our website. So first here you need to create directory structure to make it workable. But first i wanna share some information about profile picture and avatar.

What Is Avatar and Profile Picture ?

So do you know what is avatar, It’s a movie which was launched in 2009, it was really a super movie ever. Hmm! Oho i am just joking 🙂 with you. Avatars and Profile Pictures are the pictures and photos which show user’s identity. Such as i am user on website like google and facebook, so i will set my profile picture there, My Personal photo so people can know me personally by face. The profile picture and avatar is just same thing a personal photo which shows user identity. If it’s about a company and brand so they will use their personal photo which called LOGO.

How Name Based Profile Picture and Avatar Helpful ?

As we saw every day web is changing and really i was totally tired from seeing a default avatars from the last few years. So as you can see google just made accounts profile picture from name initials, that looks interactive and show an identity of user by just showing their name initials. As we know user interface should be user friendly and it’s another step to improve it and make it much friendly from earlier time.

How to Create Avatar, Profile Picture and Images With Name Initials or First Letter of Name with PHP and CSS

So here I have create a code to create avatars and images with name initials. You have to follow below given steps to make this thing possible.

Step 1 : Directory Structure

MAIN DIR |->

|        |->Assets

|        |        |->Images

|        |        |->CSS

|        |->NameInitials.php
|        |->CustomAvatars.php

Step 2 : Create File With Names NameInitials.php

<?php

define('AVATAR_SET','default'); // directory where avatars are stored
define('LETTER_INDEX', 0); // 0: first letter; 1: second letter; -1: last letter, etc.
define('IMAGES_FORMAT','png'); // file format of the avatars
define('IMAGE_UNKNOWN','unknown');
define('IMAGES_PATH','assets/avatars');
define('PROJECT_URL',"Your Project URL");

function generate_first_letter_avtar_url($name, $size=90){
// get picture filename (and lowercase it) from commenter name:
if (empty($name)){ // if, for some reason, the name is empty, set file_name to default unknown image

$file_name = IMAGE_UNKNOWN;

} else { // name is not empty, so we can proceed

$file_name = substr($name, LETTER_INDEX, 1); // get one letter counting from letter_index
$file_name = strtolower($file_name); // lowercase it...

if (extension_loaded('mbstring')){ // check if mbstring is loaded to allow multibyte string operations
$file_name_mb = mb_substr($name, LETTER_INDEX, 1); // repeat, this time with multibyte functions
$file_name_mb = mb_strtolower($file_name_mb); // and again...
} else { // mbstring is not loaded - we're not going to worry about it, just use the original string
$file_name_mb = $file_name;
}

// couple of exceptions:
if ($file_name_mb == 'ą'){
$file_name = 'a';
$file_name_mb = 'a';
} else if ($file_name_mb == 'ć'){
$file_name = 'c';
$file_name_mb = 'c';
} else if ($file_name_mb == 'ę'){
$file_name = 'e';
$file_name_mb = 'e';
} else if ($file_name_mb == 'ń'){
$file_name = 'n';
$file_name_mb = 'n';
} else if ($file_name_mb == 'ó'){
$file_name = 'o';
$file_name_mb = 'o';
} else if ($file_name_mb == 'ś'){
$file_name = 's';
$file_name_mb = 's';
} else if ($file_name_mb == 'ż' || $file_name_mb == 'ź'){
$file_name = 'z';
$file_name_mb = 'z';
}

// create arrays with allowed character ranges:
$allowed_numbers = range(0, 9);
foreach ($allowed_numbers as $number){ // cast each item to string (strict param of in_array requires same type)
$allowed_numbers[$number] = (string)$number;
}
$allowed_letters_latin = range('a', 'z');
$allowed_letters_cyrillic = range('а', 'ё');
$allowed_letters_arabic = range('آ', 'ی');
// check if the file name meets the requirement; if it doesn't - set it to unknown
$charset_flag = ''; // this will be used to determine whether we are using latin chars, cyrillic chars, arabic chars or numbers
// check whther we are using latin/cyrillic/numbers and set the flag, so we can later act appropriately:
if (in_array($file_name, $allowed_numbers, true)){
$charset_flag = 'number';
} else if (in_array($file_name, $allowed_letters_latin, true)){
$charset_flag = 'latin';
} else if (in_array($file_name, $allowed_letters_cyrillic, true)){
$charset_flag = 'cyrillic';
} else if (in_array($file_name, $allowed_letters_arabic, true)){
$charset_flag = 'arabic';
} else { // for some reason none of the charsets is appropriate
$file_name = IMAGE_UNKNOWN; // set it to uknknown
}

if (!empty($charset_flag)){ // if charset_flag is not empty, i.e. flag has been set to latin, number or cyrillic...
switch ($charset_flag){ // run through various options to determine the actual filename for the letter avatar
case 'number':
$file_name = 'number_' . $file_name;
break;
case 'latin':
$file_name = 'latin_' . $file_name;
break;
case 'cyrillic':
$temp_array = unpack('V', iconv('UTF-8', 'UCS-4LE', $file_name_mb));
$unicode_code_point = $temp_array[1];
$file_name = 'cyrillic_' . $unicode_code_point;
break;
case 'arabic':
$temp_array = unpack('V', iconv('UTF-8', 'UCS-4LE', $file_name_mb));
$unicode_code_point = $temp_array[1];
$file_name = 'arabic_' . $unicode_code_point;
break;
default:
$file_name = IMAGE_UNKNOWN; // set it to uknknown
break;
}
}

}

// detect most appropriate size based on avatar size:
if ($size <= 48) $custom_avatar_size = '48'; else if ($size > 48 && $size <= 96) $custom_avatar_size = '96'; else if ($size > 96 && $size <= 128) $custom_avatar_size = '128'; else if ($size > 128 && $size <= 256) $custom_avatar_size = '256'; else $custom_avatar_size = '512'; // create file path - $avatar_uri variable. $avatar_uri = PROJECT_URL.'/' . IMAGES_PATH . '/' . AVATAR_SET . '/' . $custom_avatar_size . '/' . $file_name . '.' . IMAGES_FORMAT; // return the final first letter image url: return $avatar_uri; } ?>

Step 3: Create A Project File Name with CustomAvatar.php , which will be goes under Main Project directory.

<?php include_once('NameInitials.php'); $name = "Rahul Negi"; $avatar_url = generate_first_letter_avtar_url($name); ?>

<div class="menu-avatar-action-inner avatar_wrap_main">

<div class="profile_img avatar_wrap_main_img">
<img src="<?php echo $avatar_url;?>">
</div>

<div class="profile_details avatar_wrap_main_details">
<b><?php echo $name;?></b>
</div>

<div class="clear"></div>

</div>

Step 4: Create A CSS File and Download Zip File of Name Initials Images here and Extract them to Assets > Images directory.

/*File: NameInitials.css*/
.avatar_wrap_main
{
max-width:280px;
text-align: center;
background: #fafafa;
padding: 10px;
border: 1px solid #ddd;
margin: 0 auto;
}
.avatar_wrap_main_img
{
display: inline-block;
}

.avatar_wrap_main_details
{
display: block;
margin: 0;
position: relative;
top: auto;
margin-top: 10px;
}

Step 5: Implement It to Your Project

Now you code is ready to use just configure it with your website or web application and use it as you want for user management or comment system in your website.

How to Create Name Initials and Custom Profile Pictures without Name Initial Images

So in above code we tried to make avatar and profile picture based on name initials where we used pre-created images for name, But the next task is how to create images for name initials.  So if you want to learn how you can create and image using php and images with name initials you have to read and learn about GD & Images Functions in PHP so you can easily create image with your own custom text or Initial letter of text. So in next part of this article we will surely write about name initials images. Thanks to read this post, if you really like this share and comment.