In computing, an avatar (also known as a profile picture or userpic) is a graphical representation of a user or the user’s character or persona. It may take either a two-dimensional form as an icon in Internet forums and other online communities or a three-dimensional form, as in games or virtual worlds.
Most of the websites with user profile allows user to upload their own profile picture or user avatar. But in this article, we are going to lean to create a default avatar when user hasn’t uploaded his picture yet similar to what Gmail does.
Complete Source Code :
<style>
.profile-pic{
background: darkseagreen;
color: #eeeeee;
border-radius: 50%;
height: 60px;
width: 60px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.1rem;
-webkit-box-shadow: 0 3px 5px rgb(54 60 241);
box-shadow: 0 3px 5px rgb(54 60 241);
}
</style>
<?php
function getProfilePicture($name){
$name_slice = explode(' ',$name);
$name_slice = array_filter($name_slice);
$initials = '';
$initials .= (isset($name_slice[0][0]))?strtoupper($name_slice[0][0]):'';
$initials .= (isset($name_slice[count($name_slice)-1][0]))?strtoupper($name_slice[count($name_slice)-1][0]):'';
return '<div class="profile-pic">'.$initials.'</div>';
}
?>
<?php echo getProfilePicture('Sachin Ramesh Tendulkar');?>
<br>
<?php echo getProfilePicture('Christiano Ronaldo');?>
<br>
<?php echo getProfilePicture('Donald Trump');?>
Follow this video for complete guidance :
