Additional Backend Avatar Providers

[ericp-mrel]

I was wondering if you would be open to adding additional avatar providers other than gravatar to enable an avatar image with initials instead of just a mystery person.

Here's what I've prototyped by using the https://ui-avatars.com service.

Curious on everyone's thoughts and if there's anything else you'd like to see added or supported.

I can send a PR if this is something of interest.

Thanks

[arvislacis]

I personally (just my opinion) don't think this would be very practical and useful, at least for the core functionality of Winter CMS, as user avatars currently are only shown in few places. Maybe plugin approach would be a lot better - if you have plenty of system users/admins and want to give them unique avatars like this then you simply install plugin. I am not sure how easy or simple it would be implement plugin for this admin/avatar section...

I am also not sure if it's ok to use https://ui-avatars.com/ service for this because:

1. Relatively similar functionality (creating avatar images from initials; it can also be simple text with first letter of the first and last name and formatted with CSS) can also be achieved with your own PHP code, without using external service like this;
2. If using external service (https://ui-avatars.com/) then some privacy concerns arise, for example, user first and last names may be leaked and/or some organizations may also not like that data like this is just requested from outside. I mean - the gains from this is a lot lower than possible gains. Anyways, in the worst case it probably should be additional checkbox in the admin settings where you can turn this feature on if you really want to use https://ui-avatars.com

[ericp-mrel]

Here's my initial PoC of implementing such a feature and what I had in mind: ericp-mrel@3683e1f

In your mind, what do you think would be the best approach to achieving this via a plugin would be? As far as I'm aware, a behavior cannot override an already existing method defined on the base class.

1. While this would be very easy to implement with CSS, it wouldn't be as easy to make this interoperable with the current gravatar images since the getAvatarThumb simply returns an image URL, so a new method would need to be added and the backend theme would need to be added to conditionally switch between showing an image vs just some HTML/CSS depending on which avatar option is chosen and if they have an image uploaded in the backend.

2. It would only send the user's initials and not their full name. I was also thinking of adding a check so if they don't have a first/last name filled out, then it would fallback to gravatar. This would be controlled from the cms config file. The reason for wanting to add this is just providing additional options to other Winter CMS users if they'd like to show initials to make the default avatar image a little more personal to their clients and totally optional if they want to use it.

[arvislacis]

PoC overall looks good. I personally before didn't know that Winter CMS is already using Gravatar for showing avatar images so I guess that adding https://ui-avatars.com/ service will give users additional choice.

Anyways, maybe Winter CMS maintainers (@LukeTowers @bennothommo @mjauvin @jaxwilko) could comment more on this.

[bennothommo]

I like the idea of the feature, but definitely needs to be something driven by a plugin as opposed to core functionality.

However, I realise that with the current setup, it's likely not possible to do what you need to do through a plugin. Perhaps you could - instead of removing the getAvatarThumb method completely, introduce via a PR an extra condition within the getAvatarThumb method that could check for the existence of a model method like getCustomAvatar. If you do it like this, this will allow it to also check if any dynamic methods of that name have been inserted via a plugin:

if ($this->methodExists('getCustomAvatar')) {
   return $this->getCustomAvatar();
}

This way, a plugin can use Model::extend() and $model->addDynamicMethod('getCustomAvatar') to populate a custom avatar URL in any way they see fit.

[ericp-mrel]

@bennothommo

I didn't actually remove the original getAvatarThumb method, but rather moved it into a trait to try and organize the methods so they're all grouped together. But, it makes sense to add something like the code you suggested as I couldn't figure out a way to do it otherwise with the current setup.

I'll submit a PR for the custom method to allow plugin's to hook into the avatar image URL process.

[LukeTowers]

I think you can already do this technically by adding an accessor; something along the lines of:

\Backend\Models\User::extend(function ($model) {
    $model->addDynamicMethod('getAvatarAttribute', function () use ($model) {
        $key = 'avatar';

        // Attempt to load the relationship normally
        if ($model->relationLoaded($key)) {
            return $this->getRelation($key);
        }
        if ($model->hasRelation($key)) {
            $avatar = $this->getRelationshipFromMethod($key);
        }

        // Relationship not found, 
        if (!$avatar) {
            // return custom FileModel instance or class that implements the getThumb() method
        }
    });
});

[ericp-mrel]

This is basically what you'd have to do, which feels really hacky to me, because then you'd need to create another class which extends the File class and then overrides the getThumb method just so you can supply a URL to the new image you want to display.

Adding a check for whether a dynamic method has been added definitely feels a bit more elegant to me, as much as it can I guess.

User::extend(function (User $model) {
          $model->addDynamicMethod('getAvatarAttribute', function () use ($model) {
              $relationName = 'avatar';

              if ($model->relationLoaded($relationName)) {
                  return $model->getRelation($relationName);
              }

//                if ($model->hasRelation($relationName)) {
//                    return $model->getRelation($relationName); // Not sure what method to use here
//                }

              $file = new class extends File {
                  public string $initials = '';

                  public function getThumb($width, $height, $options = [])
                  {
                      $queryString = http_build_query([
                          'size' => $width ?: $height,
                          'name' => $this->initials,
                      ]);

                      return 'https://ui-avatars.com/api/?'.$queryString;
                  }
              };

              $file->initials = $model->full_name;

              return $file;
          });
});

[LukeTowers]

Your example could be simplified further, try:

\Backend\Models\User::extend(function ($model) {
    $model->addDynamicMethod('getAvatarAttribute', function () use ($model) {
        // Attempt to load the relationship normally
        $avatar = $model->getRelationValue('avatar');

        // Relationship not found, 
        if (!$avatar) {
            return new class {
                protected $name = '';
                
                public function __construct($name) {
                    $this->name = $name;
                }
                
                public function getThumb($width = 128, $height = 128, $options = []) {
                    return \Winter\Storm\Routing\UrlGenerator::buildUrl('https://ui-avatars.com/api/', ['query' => [
                        'size' => $width ?: $height,
                        'name' => $this->name,
                    ];
                }
            }($model->full_name);
        }
    });
});

[LukeTowers]

Alternatively you can create the class in an external file and just reference / instantiate it in your dynamic accessor.

[ericp-mrel]

Agree with making it an external class. I assume there isn't an interface for relation classes which could help make sure all of the necessary methods are implemented in order to avoid exceptions from being thrown due to missing methods?

Also where is the getRelationshipFromMethod method located? It didn't seem to work when I called it from the user model and couldn't figure out what method to actually call in order to get the original avatar relation to load if it exists.

I'll try and play around with this a little bit and see what improvements I can make.

[LukeTowers]

Checked and it's a protected method in HasAttributes, edited my example to use getRelationValue() instead which handles it all. As far as an interface goes for this case there isn't one, but it's a pretty basic & specific use case / override of the default core behaviour so I don't think it's worth adding one.