{"id":202,"date":"2017-09-18T16:55:00","date_gmt":"2017-09-18T16:55:00","guid":{"rendered":"http:\/\/www.infotheme.in\/blog\/?p=152"},"modified":"2022-08-10T11:44:29","modified_gmt":"2022-08-10T11:44:29","slug":"php-make-avatars-images-with-name-initials-like-google","status":"publish","type":"post","link":"https:\/\/infotheme.net\/blog\/php-make-avatars-images-with-name-initials-like-google\/","title":{"rendered":"PHP &#8211; Make Avatar, Profile Picture and Images with Name Initials (First Letter) Like Google"},"content":{"rendered":"<p><strong>Create Custom Avatar, Profile Pictures, Images by&nbsp;First Letter of Name in Php:&nbsp;<\/strong>Here today I&#8217;m going to share a new web trick with you. As we know&nbsp;Google is one of the best&nbsp;search engine of world and launched a new feature for it&#8217;s users. The feature is about Google Account&#8217;s Profile Picture. If you will check new google account&#8217;s profile picture or avatar of google account, it&#8217;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&nbsp;will let you know &nbsp;&#8220;<strong>How to&nbsp;make Google Style Profile Picture or Avatar with First letter of Name using php<\/strong>&#8220;. &nbsp;Well!&nbsp;first here i will show you a picture of this new feature, just check below picture.<\/p>\n<p><img loading=\"lazy\" class=\"aligncenter size-full wp-image-256\" src=\"http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/09\/Avatar-Name-Initials-php.jpg\" alt=\"ake Google Style Name Initials Avatar, Profile Picture Using PHP\" width=\"600\" height=\"450\"><\/p>\n<p>[BUTTON url=&#8221;http:\/\/www.infotheme.in\/blog\/demo\/php\/name-initials-avatar-profile-picture-using-php\/&#8221;]See Live Demo[\/BUTTON]<\/p>\n<p>[BUTTON url=&#8221;http:\/\/www.infotheme.in\/blog\/wp-content\/uploads\/2016\/10\/name-initials-avatar.zip&#8221;]Download Code[\/BUTTON]<\/p>\n<p>So Here was a demo of &#8220;<strong><a href=\"https:\/\/www.googl.ecom\" target=\"_blank\" rel=\"nofollow noopener\">Google<\/a> Style Custom Profile Picture With Name Initial<\/strong>&#8220;. 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.<\/p>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#What_Is_Avatar_and_Profile_Picture\"><span class=\"toc_number toc_depth_1\">1<\/span> What Is Avatar and Profile Picture ?<\/a><ul><li><a href=\"#How_Name_Based_Profile_Picture_and_Avatar_Helpful\"><span class=\"toc_number toc_depth_2\">1.1<\/span> How Name Based Profile Picture and Avatar Helpful ?<\/a><\/li><\/ul><\/li><li><a href=\"#How_to_CreatenbspAvatar_Profile_Picture_and_Images_With_Name_Initials_or_First_Letter_of_Name_with_PHP_and_CSS\"><span class=\"toc_number toc_depth_1\">2<\/span> How to Create&nbsp;Avatar, Profile Picture and Images With Name Initials or First Letter of Name with PHP and CSS<\/a><ul><li><a href=\"#Step_1_Directory_Structure\"><span class=\"toc_number toc_depth_2\">2.1<\/span> Step 1 : Directory Structure<\/a><\/li><li><a href=\"#Step_2_Create_File_With_Names_NameInitialsphp\"><span class=\"toc_number toc_depth_2\">2.2<\/span> Step 2 : Create File With Names NameInitials.php<\/a><\/li><li><a href=\"#Step_3_Create_A_Project_File_Name_with_CustomAvatarphp_which_will_be_goes_under_Main_Project_directory\"><span class=\"toc_number toc_depth_2\">2.3<\/span> Step 3: Create A Project File Name with CustomAvatar.php , which will be goes under Main Project directory.<\/a><\/li><li><a href=\"#Step_4_Create_A_CSS_File_and_Download_Zip_File_of_Name_Initials_Images_here_and_Extract_them_to_Assets_gt_Images_directory\"><span class=\"toc_number toc_depth_2\">2.4<\/span> Step 4: Create A CSS File and Download Zip File of Name Initials Images here and Extract them to Assets &gt; Images directory.<\/a><\/li><li><a href=\"#Step_5_Implement_It_to_Your_Project\"><span class=\"toc_number toc_depth_2\">2.5<\/span> Step 5: Implement It to Your Project<\/a><\/li><\/ul><\/li><li><a href=\"#How_to_Create_Name_Initials_and_Custom_Profile_Pictures_withoutnbspName_Initial_Images\"><span class=\"toc_number toc_depth_1\">3<\/span> How to Create Name Initials and Custom Profile Pictures without&nbsp;Name Initial Images<\/a><\/li><\/ul><\/div>\n<h2><span id=\"What_Is_Avatar_and_Profile_Picture\">What Is Avatar and Profile Picture ?<\/span><\/h2>\n<p>So do you know what is avatar, It&#8217;s a movie which was launched in 2009, it was really a super movie ever. Hmm! Oho i am just joking \ud83d\ude42 with you. Avatars and Profile Pictures are the pictures and photos which show user&#8217;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&#8217;s about a company and brand so they will use their personal photo which called LOGO.<\/p>\n<h3><span id=\"How_Name_Based_Profile_Picture_and_Avatar_Helpful\">How Name Based Profile Picture and Avatar Helpful ?<\/span><\/h3>\n<p>As we saw&nbsp;every day web is changing and&nbsp;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&#8217;s another step to improve it and make it much friendly from earlier time.<\/p>\n<h2><span id=\"How_to_CreatenbspAvatar_Profile_Picture_and_Images_With_Name_Initials_or_First_Letter_of_Name_with_PHP_and_CSS\">How to Create&nbsp;Avatar, Profile Picture and Images With Name Initials or First Letter of Name with PHP and CSS<\/span><\/h2>\n<p>So here I have create a&nbsp;code to create avatars and images with name initials. You have to follow below given steps to make this thing possible.<\/p>\n<h3><span id=\"Step_1_Directory_Structure\">Step 1 : Directory Structure<\/span><\/h3>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n\nMAIN DIR |-&amp;gt;\n\n|        |-&amp;gt;Assets\n\n|        |        |-&amp;gt;Images\n\n|        |        |-&amp;gt;CSS\n\n|        |-&amp;gt;NameInitials.php\n|        |-&amp;gt;CustomAvatars.php\n<\/pre>\n<h3><span id=\"Step_2_Create_File_With_Names_NameInitialsphp\">Step 2 : Create File With Names NameInitials.php<\/span><\/h3>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;?php\n\ndefine('AVATAR_SET','default'); \/\/ directory where avatars are stored\ndefine('LETTER_INDEX', 0); \/\/ 0: first letter; 1: second letter; -1: last letter, etc.\ndefine('IMAGES_FORMAT','png'); \/\/ file format of the avatars\ndefine('IMAGE_UNKNOWN','unknown');\ndefine('IMAGES_PATH','assets\/avatars');\ndefine('PROJECT_URL',&quot;Your Project URL&quot;);\n\nfunction generate_first_letter_avtar_url($name, $size=90){\n\/\/ get picture filename (and lowercase it) from commenter name:\nif (empty($name)){ \/\/ if, for some reason, the name is empty, set file_name to default unknown image\n\n$file_name = IMAGE_UNKNOWN;\n\n} else { \/\/ name is not empty, so we can proceed\n\n$file_name = substr($name, LETTER_INDEX, 1); \/\/ get one letter counting from letter_index\n$file_name = strtolower($file_name); \/\/ lowercase it...\n\nif (extension_loaded('mbstring')){ \/\/ check if mbstring is loaded to allow multibyte string operations\n$file_name_mb = mb_substr($name, LETTER_INDEX, 1); \/\/ repeat, this time with multibyte functions\n$file_name_mb = mb_strtolower($file_name_mb); \/\/ and again...\n} else { \/\/ mbstring is not loaded - we're not going to worry about it, just use the original string\n$file_name_mb = $file_name;\n}\n\n\/\/ couple of exceptions:\nif ($file_name_mb == '\u0105'){\n$file_name = 'a';\n$file_name_mb = 'a';\n} else if ($file_name_mb == '\u0107'){\n$file_name = 'c';\n$file_name_mb = 'c';\n} else if ($file_name_mb == '\u0119'){\n$file_name = 'e';\n$file_name_mb = 'e';\n} else if ($file_name_mb == '\u0144'){\n$file_name = 'n';\n$file_name_mb = 'n';\n} else if ($file_name_mb == '\u00f3'){\n$file_name = 'o';\n$file_name_mb = 'o';\n} else if ($file_name_mb == '\u015b'){\n$file_name = 's';\n$file_name_mb = 's';\n} else if ($file_name_mb == '\u017c' || $file_name_mb == '\u017a'){\n$file_name = 'z';\n$file_name_mb = 'z';\n}\n\n\/\/ create arrays with allowed character ranges:\n$allowed_numbers = range(0, 9);\nforeach ($allowed_numbers as $number){ \/\/ cast each item to string (strict param of in_array requires same type)\n$allowed_numbers[$number] = (string)$number;\n}\n$allowed_letters_latin = range('a', 'z');\n$allowed_letters_cyrillic = range('\u0430', '\u0451');\n$allowed_letters_arabic = range('\u0622', '\u06cc');\n\/\/ check if the file name meets the requirement; if it doesn't - set it to unknown\n$charset_flag = ''; \/\/ this will be used to determine whether we are using latin chars, cyrillic chars, arabic chars or numbers\n\/\/ check whther we are using latin\/cyrillic\/numbers and set the flag, so we can later act appropriately:\nif (in_array($file_name, $allowed_numbers, true)){\n$charset_flag = 'number';\n} else if (in_array($file_name, $allowed_letters_latin, true)){\n$charset_flag = 'latin';\n} else if (in_array($file_name, $allowed_letters_cyrillic, true)){\n$charset_flag = 'cyrillic';\n} else if (in_array($file_name, $allowed_letters_arabic, true)){\n$charset_flag = 'arabic';\n} else { \/\/ for some reason none of the charsets is appropriate\n$file_name = IMAGE_UNKNOWN; \/\/ set it to uknknown\n}\n\nif (!empty($charset_flag)){ \/\/ if charset_flag is not empty, i.e. flag has been set to latin, number or cyrillic...\nswitch ($charset_flag){ \/\/ run through various options to determine the actual filename for the letter avatar\ncase 'number':\n$file_name = 'number_' . $file_name;\nbreak;\ncase 'latin':\n$file_name = 'latin_' . $file_name;\nbreak;\ncase 'cyrillic':\n$temp_array = unpack('V', iconv('UTF-8', 'UCS-4LE', $file_name_mb));\n$unicode_code_point = $temp_array[1];\n$file_name = 'cyrillic_' . $unicode_code_point;\nbreak;\ncase 'arabic':\n$temp_array = unpack('V', iconv('UTF-8', 'UCS-4LE', $file_name_mb));\n$unicode_code_point = $temp_array[1];\n$file_name = 'arabic_' . $unicode_code_point;\nbreak;\ndefault:\n$file_name = IMAGE_UNKNOWN; \/\/ set it to uknknown\nbreak;\n}\n}\n\n}\n\n\/\/ detect most appropriate size based on avatar size:\nif ($size &amp;lt;= 48) $custom_avatar_size = '48'; else if ($size &amp;gt; 48 &amp;amp;&amp;amp; $size &amp;lt;= 96) $custom_avatar_size = '96'; else if ($size &amp;gt; 96 &amp;amp;&amp;amp; $size &amp;lt;= 128) $custom_avatar_size = '128'; else if ($size &amp;gt; 128 &amp;amp;&amp;amp; $size &amp;lt;= 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; } ?&amp;gt;\n<\/pre>\n<h3><span id=\"Step_3_Create_A_Project_File_Name_with_CustomAvatarphp_which_will_be_goes_under_Main_Project_directory\">Step 3: Create A Project File Name with CustomAvatar.php , which will be goes under Main Project directory.<\/span><\/h3>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\n&amp;lt;?php include_once('NameInitials.php'); $name = &quot;Rahul Negi&quot;; $avatar_url = generate_first_letter_avtar_url($name); ?&amp;gt;\n\n&amp;lt;div class=&quot;menu-avatar-action-inner avatar_wrap_main&quot;&amp;gt;\n\n&amp;lt;div class=&quot;profile_img avatar_wrap_main_img&quot;&amp;gt;\n&amp;lt;img src=&quot;&amp;lt;?php echo $avatar_url;?&amp;gt;&quot;&amp;gt;\n&amp;lt;\/div&amp;gt;\n\n&amp;lt;div class=&quot;profile_details avatar_wrap_main_details&quot;&amp;gt;\n&amp;lt;b&amp;gt;&amp;lt;?php echo $name;?&amp;gt;&amp;lt;\/b&amp;gt;\n&amp;lt;\/div&amp;gt;\n\n&amp;lt;div class=&quot;clear&quot;&amp;gt;&amp;lt;\/div&amp;gt;\n\n&amp;lt;\/div&amp;gt;\n\n<\/pre>\n<h3><span id=\"Step_4_Create_A_CSS_File_and_Download_Zip_File_of_Name_Initials_Images_here_and_Extract_them_to_Assets_gt_Images_directory\">Step 4: Create A CSS File and Download Zip File of Name Initials Images here and Extract them to Assets &gt; Images directory.<\/span><\/h3>\n<pre class=\"brush: css; title: ; notranslate\" title=\"\">\n\/*File: NameInitials.css*\/\n.avatar_wrap_main\n{\nmax-width:280px;\ntext-align: center;\nbackground: #fafafa;\npadding: 10px;\nborder: 1px solid #ddd;\nmargin: 0 auto;\n}\n.avatar_wrap_main_img\n{\ndisplay: inline-block;\n}\n\n.avatar_wrap_main_details\n{\ndisplay: block;\nmargin: 0;\nposition: relative;\ntop: auto;\nmargin-top: 10px;\n}\n<\/pre>\n<h3><span id=\"Step_5_Implement_It_to_Your_Project\">Step 5: Implement It to Your Project<\/span><\/h3>\n<p>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.<\/p>\n<h2><span id=\"How_to_Create_Name_Initials_and_Custom_Profile_Pictures_withoutnbspName_Initial_Images\">How to Create Name Initials and Custom Profile Pictures without&nbsp;Name Initial Images<\/span><\/h2>\n<p>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 <strong>how to create images for name initials.&nbsp;<\/strong> 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 <a href=\"http:\/\/php.net\/manual\/en\/ref.image.php\" rel=\"nofollow noopener\" target=\"_blank\"><strong>GD &amp; Images Functions in PHP<\/strong><\/a> 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 <strong>name initials images<\/strong>. Thanks to read this post, if you really like this share and comment.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Create Custom Avatar, Profile Pictures, Images by&nbsp;First Letter of Name in Php:&nbsp;Here today I&#8217;m going to share a new web trick with you. As we [&hellip;] <span class=\"read-more-link\"><a class=\"read-more\" href=\"https:\/\/infotheme.net\/blog\/php-make-avatars-images-with-name-initials-like-google\/\">Read More<\/a><\/span><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[135,138],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/202"}],"collection":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/comments?post=202"}],"version-history":[{"count":4,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions"}],"predecessor-version":[{"id":1480,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/posts\/202\/revisions\/1480"}],"wp:attachment":[{"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/media?parent=202"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/categories?post=202"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/infotheme.net\/blog\/wp-json\/wp\/v2\/tags?post=202"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}