Generate User Avatar using PHP Tutorial

Submitted by oretnom23 on Saturday, December 10, 2022 - 10:20.

In this tutorial, you will learn how to Generate User Avatars using their name's initials in PHP. The application aims to provide IT/CS Students and new programmer with a reference that help them to enhance their programming capabilities. Here, are simple snippets that generate user avatars. A sample source code zip file is also provided and is free to download.

How to Generate User Avatar using PHP?

To Generate User Avatars using the initials of their names, we can simply use the PHP substr() method which allows us to get the first character or letter of the user's first and last name. After getting the user initials we can create an element on how we want to display the avatar.

Snippets of Generating User Avatar using PHP

The below snippets will result in a simple web application that allows the user to enter their first name and last name. The user avatar will be generated upon the user clicking the generate button or submitting the form.

Interface

The below snippet is a combined PHP and HTML script that contains the elements and code for displaying the form and the design of the page. Save the file as index.php.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UserAvatar Generator From Name - PHP</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE+4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/js/all.min.js" integrity="sha512-naukR7I+Nk6gp7p5TMA4ycgfxaZBJ7MO5iC3Fp6ySQyKFHOGfpkSZkYVWV5R7u7cfAicxanwYQ5D1e17EfJcMA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body style="background:#e1ecf7">
    <nav class="navbar navbar-expand-lg navbar-dark" style="background:#1597BB">
        <div class="container">
            <a class="navbar-brand" href="./">UserAvatar Generator From Name - PHP</a>
            <div>
                <a href="https://sourcecodester.com" class="text-light fw-bolder h6 text-decoration-none" target="_blank">SourceCodester</a>
            </div>
        </div>
    </nav>
    <div class="container-fluid px-5 my-3 pt-5">
        <div class="col-lg-6 col-md-8 col-sm-12 mx-auto">
            <h3 class="text-center">Generate User Avatar usign the Users' Name Initials</h3>
            <hr>
            <div class="card rounded-0">
                <div class="card-header rounded-0">
                    <div class="card-title">List of Files</div>
                </div>
                <div class="card-body rounded-0">
                    <div class="container-fluid">
                        <form action="" id="generate-form" method="POST">
                        <div class="mb-3">
                            <label for="firstName" class="form-label">Firtname</label>
                            <input type="text" name="firstName" id="firstName" value="<?= isset($_POST['firstName']) ? $_POST['firstName'] : "" ?>" class="form-control form-control-sm rounded-0" required>
                        </div>
                        <div class="mb-3">
                            <label for="lastName" class="form-label">Lastname</label>
                            <input type="text" name="lastName" id="lastName" value="<?= isset($_POST['lastName']) ? $_POST['lastName'] : "" ?>" class="form-control form-control-sm rounded-0" required>
                        </div>
                        <?php 
                            if($_SERVER['REQUEST_METHOD'] == 'POST'){
                            include_once("userAvatargenerator.php");
                        ?>
                            <div class="d-flex w-100 justify-content-center">
                                <div class="col-auto">
                                <?= generateAvatarFromName($_POST['firstName'], $_POST['lastName']) ?>
                                </div>
                            </div>
                            <div class="text-center"><?= ucwords($_POST['firstName'] . " " . $_POST['lastName']) ?></div>
                        <?php 
                            }
                        ?>
                        </form>
                    </div>
                </div>
                <div class="card-footer py-2 text-center">
                    <button class="btn btn-primary rounded-pill col-lg-4 col-md-6 col-sm-12 col-xs-12" form="generate-form">Generate Avatar</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

PHP Function

The below snippet is a PHP file containing the functions that are needed for generating the user avatar. Save the script as userAvatargenerator.php. The file will be included on the main page after the user submitted the form. It contains also the function of generating a random color for the avatar background.

<?php
/**
    * Avatar Background Colors
    */
 
$colors = ["#65647C", "#7F669D", "#FF8DC7", "#7895B2", "#898AA6", "#68A7AD", "#94B49F", "#8E806A"];
 
 
function getAvatarBG(){
    global $colors;
    $colorsCount = count($colors);
    $key = mt_rand(0,7);
    return $colors[$key];
}
 
function avatarStyles(){
    $styles = [
        "background: ".getAvatarBG(),
        "color: #fff",
        "height: 50px",
        "width: 50px",
        "border-radius: 100%",
        "display:flex",
        "justify-content: center",
        "align-items: center",
        "font-size: 15px",
    ];
    return implode(";", $styles);
}
 
function generateAvatarFromName($firstName="", $lastName=""){
    if(empty($firstName)){
        return "Can't Generate Avatar! Firstname must be provided.";
    }
    $nameInitial = (substr($firstName, 0,1));
    if(!empty($lastName))
    $nameInitial .= (substr($lastName, 0,1));
    return '<div class="generated-user-avatar" style="'.avatarStyles().'">'.$nameInitial.'</div>';
}

There you go! You can now try or test the source code on your end to see if it works and achieve the objectives of this tutorial. I provided also the source code zip file that I created for this tutorial and you can download it by clicking the download button located after this article.

Snapshot

That's it! I hope this Generate User Avatar in PHP Tutorial will help you with what you are looking for and that you'll find this useful for your current and future PHP Projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Add new comment

1193 views