Hướng dẫn Avatar mặc định của User là tên Viết tắt trên dự án Laravel

Các các bạn khi sử dụng Android hoặc các ứng dụng danh bạ trên điện thoại đều thấy tên của người khác được viết tắt thành avatar của họ. Trông khá chuyên nghiệp và nhìn cũng hay hay.

Hôm nay mình sẽ hướng dẫn các bạn làm như vậy với dự án trên Laravel của mình. Bạn có thể xem thành quả mà mình đã làm trên dự án của mình

Ok, bây giờ bắt tay làm nhé. Ở đây mình sẽ sử dụng package laravolt/avatar. Link của package ở đây : https://github.com/laravolt/avatar

Để cài gói này vào dự án của bạn, chạy lện sau:

composer require laravolt/avatar

Để xem rõ cách cài đặt bạn có thể lên GitHub mà mình vừa đưa ở trên để xem, ở đây mình làm trên Laravel 5.6 nên các bạn xài bản laravel cũ hơn thì xem lại Doc nha.

Tiếp theo chạy lệnh sau:

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

Một file config sẽ được tạo tại:  config/laravolt/avatar.php

OK, bạn đã cài đặt thành công, bây giờ điều quan trọng là bạn phải tạo thêm 1 cột avatar trong bảng user của bạn đã. Cái này tự xử khỏi hướng dẫn. Bạn có thể để giá trị là null, mình vì dự án lúc trước không có dùng gói này nên để giá trị là avatar.png để lấy avatar mặc định.

Bây giờ bạn vào Model User để append một thuộc tính là avatar_link

protected $appends = [
    'avatar_path'
];

Tiếp theo mình dụng  Accessors để kiểm tra giá trị của avatar có rỗng hoặc là giá trị mặc định hay không ( ví dụ giá trị của mình là avatar.png). Code như sau. Nhớ là viết ở trong model User luôn nhé. Bạn để ý tên của function mình viết nhé, đừng sửa tên, nếu sửa thì sửa luôn cái append nhé.

public function getAvatarLinkAttribute()
{
    if ($this->attributes['avatar'] == 'avatar.png') {
        return Avatar::create($this->attributes['name'])->toBase64();
    } else {
        return 'upload/user/' . $this->attributes['user'] . '/avatar/' . $this->attributes['avatar'];
    }

    return $this->attributes['avatar'];
}

Đoạn có ở trên mình viết nếu giá trị mặc định của của cột avatar là avatar.png còn nếu giá trị của bạn là rổng thì nhớ ghi là null hoặc giá trị mặc định của bạn. Đoạn $link là để gán link avatar của user khi họ đổi avatar của họ.

Ok vậy là xong rồi, bây gán vào View thôi

Bạn sẽ gán như lày, giá trị sẽ nằm trong src

<img src="{{ Auth::user()->avatar_link }}" class="user-image" alt="User Image">

Ở gói này vào file config bạn có các tùy chỉnh ở trong đó, bạn có thể vọc chỉnh sửa thử ra sao. Và có thêm một số phương thức ở trong Doc bạn có thể đọc thêm.