Laravel 11 - How To Generate Avatar

Quick Overview

Step # 1 : Create a Fresh Laravel Project with Breeze Authentication.

laravel new avatar

composer create-project laravel/laravel --prefer-dist avatar

• Starter Kit: Select Breeze for lightweight authentication.
• Stack: Choose Blade for the frontend.
• Dark Mode Support: Select No.
• Testing Framework: Choose PHPUnit.
• Initialize Git Repository: Select No.
• Database: Choose MySQL as your preferred driver.
• Run Migrations: Select No, since we’ll add an additional field to store the avatar later.
  
  

Step # 2 : Access the project.

cd c:xampp/htdocs/avatar

Step # 3 : Add Avatar Column and Run Migrations.

<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
    /**
     * Run the migrations.
     */
    public function up(): void
    {
        Schema::create('users', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->text('avatar'); // Add avatar column for user avatar
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password');
            $table->rememberToken();
            $table->timestamps();
        });
        Schema::create('password_reset_tokens', function (Blueprint $table) {
            $table->string('email')->primary();
            $table->string('token');
            $table->timestamp('created_at')->nullable();
        });
        Schema::create('sessions', function (Blueprint $table) {
            $table->string('id')->primary();
            $table->foreignId('user_id')->nullable()->index();
            $table->string('ip_address', 45)->nullable();
            $table->text('user_agent')->nullable();
            $table->longText('payload');
            $table->integer('last_activity')->index();
        });
    }
    /**
     * Reverse the migrations.
     */
    public function down(): void
    {
        Schema::dropIfExists('users');
        Schema::dropIfExists('password_reset_tokens');
        Schema::dropIfExists('sessions');
    }
};

php artisan migrate

Warn : The database 'avatar' does not exist on the 'mysql' connection.
Would you like to create it? (yes/no) [yes]

Step # 4 : Update the User Model to Include Avatar.

    protected $fillable = [
        'name',
        'email',
        'password',
        'avatar',
    ];

Step # 5 : Install the Laravolt Avatar Package.

composer require laravolt/avatar

Step # 6 : Publish the configuration.

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

Step # 7 : Create a storage link.

php artisan storage:link

Step # 8 : Create avatar.

<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Auth\Events\Registered;
use Illuminate\Http\RedirectResponse;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Illuminate\Validation\Rules;
use Illuminate\View\View;
// Include the Avatar facade
use Laravolt\Avatar\Facade as Avatar;
class RegisteredUserController extends Controller
{
    /**
     * Display the registration view.
     */
    public function create(): View
    {
        return view('auth.register');
    }
    /**
     * Handle an incoming registration request.
     *
     * @throws \Illuminate\Validation\ValidationException
     */
    public function store(Request $request): RedirectResponse
    {
        $request->validate([
            'name' => ['required', 'string', 'max:255'],
            'email' => ['required', 'string', 'lowercase', 'email', 'max:255', 'unique:'.User::class],
            'password' => ['required', 'confirmed', Rules\Password::defaults()],
        ]);
        // Create avatar for the user based on their name
        // Unique path for the avatar
        $avatarPath = 'storage/avatar_' . time() . '.png';
        Avatar::create($request->name)
            ->setDimension(300, 300) // Set width and height
            ->setFontSize(150) // Set font size for the text
            ->save(storage_path('app/public/' . $avatarPath));
        // Create the user with the avatar path
            $user = User::create([
                'name' => $request->name,
                'email' => $request->email,
                'password' => Hash::make($request->password),
                'avatar' => $avatarPath, // Store the path to the avatar
        ]);
            event(new Registered($user));
            Auth::login($user);
            return redirect(route('dashboard', absolute: false));
        }
    }

Step # 9 : Display Avatar.

<img src="{{ asset('storage/' . Auth::user()->avatar) }}" width="30" style="margin-right: 0.25rem">

Step # 10 : It's time to test.

php artisan serve

Conclusion