Introduction
Laravel Jetstream
Laravel Jetstream is a beautifully designed application starter kit for Laravel and provides the perfect starting point for your next Laravel application. Jetstream provides the implementation for your application’s login, registration, email verification, two-factor authentication, session management, API via Laravel Sanctum, and optional team management features.
Jetstream is designed using Tailwind CSS and offers your choice of Livewire or Inertia scaffolding.
Let’s Begin
Enable Profile Photos Feature
Jetstream is highly customizable, you can acitivate/deactivate any feature that you want. By default the profile photo management is disabled in Jetstream.
To Enable profile photo feature for Jetstream open config/jetstream.php config file and uncomment Features::profilePhotos() .
// config/jetstream.php
'features' => [
// Features::termsAndPrivacyPolicy(),
Features::profilePhotos(),
// Features::api(),
Features::teams(['invitations' => true]),
Features::accountDeletion(),
],
After enabling profile photo feature. In case the user hasn’t uploaded a custom profile photo we will get a ui-avatar with the user initials.
.png)
To change this lets see how Jetstream implements it.
How it works
go to User.php
use Laravel\Jetstream\HasProfilePhoto;
...
...
class User extends Authenticatable
{
...
...
use HasProfilePhoto;
...
...
}
Jetstream has a trait so lets take a look at it.
// vendor/laravel/jetstream/src/HasProfilePhoto.php
trait HasProfilePhoto
{
....
/**
* Get the URL to the user's profile photo.
*
* @return \Illuminate\Database\Eloquent\Casts\Attribute
*/
public function profilePhotoUrl(): Attribute
{
return Attribute::get(function () {
return $this->profile_photo_path
? Storage::disk($this->profilePhotoDisk())->url($this->profile_photo_path)
: $this->defaultProfilePhotoUrl();
});
}
/**
* Get the default profile photo URL if no profile photo has been uploaded.
*
* @return string
*/
protected function defaultProfilePhotoUrl()
{
$name = trim(collect(explode(' ', $this->name))->map(function ($segment) {
return mb_substr($segment, 0, 1);
})->join(' '));
return 'https://ui-avatars.com/api/?name='.urlencode($name).'&color=7F9CF5&background=EBF4FF';
}
}
Let’s focus on the above two methods.
profilePhotoUrl() is an accessor and it checks if the user has uploaded a profile photo . if not, it gets a default avatar url for it using the defaultProfilePhotoUrl() method.
Customize
That is exactly what we are looking for, so to override that method, copy it and paste it in your User.php model
// App/Models/User.php
// jetstream overwritten method
protected function defaultProfilePhotoUrl()
{
$name = trim(
collect(explode(' ', $this->name))
->map(function ($segment) {
return mb_substr($segment, 0, 1);
})
->join(' '),
);
return 'https://ui-avatars.com/api/?name='.urlencode($name).'&color=7F9CF5&background=EBF4FF';
}
The defaultProfilePhotoUrl() method returns the default avatar url using https://ui-avatars.com/ ****services.
but we will be swapping it with a new service called https://www.dicebear.com/
it has a variety of avatar collection you can choose from. I will be using the bottts but you can customize it as you like.
// App/Models/User.php
// jetstream overwritten method
protected function defaultProfilePhotoUrl()
{
$name = trim(
collect(explode(' ', $this->name))
->map(function ($segment) {
return mb_substr($segment, 0, 1);
})
->join(' '),
);
return 'https://avatars.dicebear.com/api/bottts/' .
urlencode($name) .
'.svg';
}
The result will look something like this
.png)
Conclusion
To customze any of jetstream functionalities you just have to create the same method in your User model and Jetstream will user your customized method in the future.