Tạo avatar mặc định theo tên viết tắt như Google trong ứng dụng Laravel

    Chào mọi người, chắc các bạn đã quá quen thuộc với các avatar mặc định của Google. Bạn có thể nhận thấy, các ảnh avatar mặc định này khá là thú vị, nó được tạo theo tên viết tắt của mỗi tài khoản người dùng. Và hôm nay, trong bài viết này mình sẽ hướng dẫn các bạn tạo các ảnh avatar theo tên viết tắt như vậy trong ứng dụng Laravel bằng package laravolt/avatar.

    Chạy lệnh sau để cài đặt laravolt/avatar:

    Từ phiên bản Laravel 5.5 trở đi thì laravolt/avatar sẽ được tìm thấy tự động (auto-discovery). Ngược lại đối với các phiên bản Laravel < 5.5, bạn cần thêm providers và aliases cho laravolt/avatar trong file config/app.php:

    Bạn hãy chạy lệnh sau để tạo file cấu hình config/laravolt/avatar.php của laravolt/avatar:

    Mở file này lên, ta có thể thấy được tất các các tùy chọn cấu hình cơ bản. Một số tùy chọn quan trọng:

    Trong nhiều trường hợp, bạn muốn tạo ảnh với các giá trị thiết lập khác mặc định mà không muốn thay đổi file config/laravolt/avatar.php. Để giải quyết vấn đề đó laravolt/avatar còn cung cấp cho chúng ta một số phương thức:

    Bạn có thể thiết lập cùng lúc nhiều giá trị bằng cách nối các phương thức với nhau:

    Ngoài ra bạn còn có thể lấy một đối tượng Image với phương thức getImageObject(), phương thức này sẽ trả về một thể hiện của Intervention image để bạn có thể sử dụng cho các mục đích khác.

  1. Tạo migration:

    Ở đây mình sẽ tạo một bảng users đơn giản với các trường name, email, password và avatar:

    <?php
    
    use Illuminate\Support\Facades\Schema;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Database\Migrations\Migration;
    
    class CreateUsersTable extends Migration
    {
        /**
         * Run the migrations.
         *
         * @return void
         */
        public function up()
        {
            Schema::create('users', function (Blueprint $table) {
                $table->increments('id');
                $table->string('name');
                $table->string('email')->unique();
                $table->string('password');
                $table->string('avatar')->nullable();
                $table->timestamps();
            });
        }
    
        /**
         * Reverse the migrations.
         *
         * @return void
         */
        public function down()
        {
            Schema::dropIfExists('users');
        }
    }
    

    Bạn hãy chạy lệnh sau để tạo bảng nhé:

    php artisan migrate
    
  2. Tạo model:

    Tạo một model App\Models\User.php như sau:

    <?php
    
    namespace App\Models;
    
    use Illuminate\Notifications\Notifiable;
    use Illuminate\Foundation\Auth\User as Authenticatable;
    use Avatar;
    
    class User extends Authenticatable
    {
        use Notifiable;
    
        /**
         * The attributes that are mass assignable.
         *
         * @var array
         */
        protected $fillable = [
            'name', 
            'email', 
            'password',
            'avatar',
        ];
    
        /**
         * The attributes that should be hidden for arrays.
         *
         * @var array
         */
        protected $hidden = [
            'password',
        ];
    }
    
  3. Tạo ảnh avatar mặc định:

    Mình sẽ append thêm vào model thuộc tính avatar_path để chứa đường dẫn avatar của user. Đồng thời mình sẽ sử dụng Accessors để lấy giá trị của thuộc tính này. Accessors này có nhiệm vụ kiểm tra xem thuộc tính avatar của user có rỗng hay không, nếu rỗng thì sẽ tạo và trả về một avatar mặc định theo tên viết tắt của user, ngược lại sẽ trả về avatar hiện tại của user. Bạn hãy thêm đoạn code sau đây vào file App\Models\User.php:

    protected $appends = [
        'avatar_path'
    ];
    
    public function getAvatarPathAttribute()
    {
        if (empty($this->attributes['avatar'])) {
            return Avatar::create($this->attributes['name'])
                ->setDimension(30, 30)
                ->setFontSize(10)
                ->setShape('square')
                ->toBase64();
        }
    
        return $this->attributes['avatar']; 
    }
    
  4. Sử dụng:

    Bạn chỉ cần gọi $user->avatar_path ở thuộc tính src của thẻ img ở bất kì view nào mà bạn muốn hiển thị avatar của user:

    <img src="{{ $user->avatar_path }}" title="avatar">
    
  5. Kết quả demo: