Google Style Default Profile Picture in Laravel 8

Learn how to add a default profile picture in your Laravel 8 application and make it like Google profile picture style.

2 years ago

•

10 mins read

•

2481 views

• Laravel Tutorial

In this post, you'll learn how to add a Google-style default profile picture to your Laravel 8 application. We'll be using Laravolt/avatar package to generate it so let's get started.
The scenario is that you need to add this default profile picture to the user if they have no profile image. This profile image is usually generated after successfully registered to your application or after removing a new picture that the user has uploaded.

Step 1: Create Model and Migration

Let's start by creating a new model and migration called profile. The relationship for this would be "one user has one profile".

php artisan make:model Profile -m

For the migration add a new column definition called "profile_picture_url" like below.

# database/migrations/CreateProfilesTable.php

Schema::create('profiles', function (Blueprint $table) {
    $table->id();
    $table->string('profile_picture_url')->nullable();
    $table->timestamps();
});

Do also make sure to add this column in the fillable property of the profile model to make it mass assignable.

# app/Models/Profile.php

**
 * The attributes that are mass assignable.
 *
 * @var array
 */
protected $fillable = [
    'profile_picture_url',
];

Lastly, from the user modal add the reference to the profile model and vice versa.

# app/Models/User.php

public function profile()
{
    return $this->hasOne(Profile::class);
}

For the profile modal, define it like below.

# app/Models/Profile.php

public function user()
{
    return $this->belongsTo(User::class);
}

Step 2: Publish Package Configuration

To publish the configuration file run the code below. This file contains all the settings necessary for the package to generate the picture.

php artisan vendor:publish --provider="Laravolt\Avatar\ServiceProvider"

I recommend updating the value for the settings below to make the default image a little bit bolder.

// Image shape: circle or square
'shape' => 'square',

// Image width, in pixel
'width' => 180,

// Image height, in pixel
'height' => 180,

'fonts' => [__DIR__ . '/../fonts/Roboto.ttf'],

Step 3: Generate the Profile Picture

To generate the profile picture you have to call the create method from the Avatar facade. Inside the create method you can specify the name of the user you want to place in and then chain it with the method to generate the image "toSvg", "toGravatar" and "toBase64".

Step 4: Generate SVG

To generate the SVG image, call the "toSvg" method and return it to the view as follows.

Route::get('/profile-picture', function () {
    $johnFullName = User::where('username', 'johndoe')->first()->full_name;

    return view('profile-picture', [
        'image' => \Avatar::create($johnFullName)->toSvg()
    ]);
});

To render the SVG on the "front-end", make use of unescaped blade syntax.

{!! $image !!}

Step 5: Generate Gravatar

If you want to generate Gravatar then you can pass it in the user email.

Route::get('/profile-picture', function () {
    $johnDoeEmail = User::where('username', 'johndoe')->first()->email;

    return view('profile-picture', [
        'image' => \Avatar::create($johnDoeEmail)->toGravatar()
    ]);
});

Output the image as follows.

<img src="{{ $image }}" />

Step 5.5: Generate base64

Finally, to generate base64 format call the "toBase64" and like usual return it to the blade view.

Route::get('/profile-picture', function () {
    $johnFullName = User::where('username', 'johndoe')->first()->full_name;

    return view('profile-picture', [
        'image' => \Avatar::create($johnFullName)->toBase64();
    ]);
});

To render it, call the variable directly on the blade file.

<img src="{{ $image }}" />

Assuming that the name is "John Doe" then the picture that will be generate will look like below "JD" which is the first initial of the first name and last name.

Step 6: Generate PNG and Save Locally

if you want to get the image in png or another image format, you can specify the command below. In this case, it's important to note that the image created will be saved on the specified path and will have the specified quality.

$johnDoe = User::where('username', 'johndoe')->first();

\Avatar::create($johnDoe->full_name)
    ->save($path = $johnDoe . '-profile-picture.png', $quality = 100);

The code above saves the image in the public directory and also sets the quality to 100%. To save it in the user profile model, you have to call the relationship like below.

$johnDoe->profile()->updateOrCreate(['profile_picture_url' => $path]);

Now "John Doe" profile picture will be saved locally and the name of the generated image will be saved to the database.

Intervention image object

Avatar::create('John Doe')->getImageObject();

If you want to get the intervention image instance, do call the "getImageObject" method like above and now you will be able to manipulate the image.
If you find this tutorial helpful do share it with your friends and happy coding 🍻 cheers!