Request user picture in different size,

[alexab]

Hi everyone.

I am showing the users profile pictures in IE, with a width and height of 25 pixels. This does not look very good, the quality of the image gets “distorted”:

According to my research on SO, the solution is to request the image in the correct size from the beginning.

This works fine for users, with an actual image. Here I just search and replace the queryParam s with s=480 --> s=25.

But I can’t get that to work when users does not have an actual image, but only the initials. No matter what I configure the s=480 query param to, the image is returned in the same size (120x120).

An example is the following image:

Thanks for your help.

[mathiasconradt]

This seems to be more of a generic html/css/IE question, or gravatar question. I think chances are higher that you get a reply on StackOverflow faster, as it’s not Auth0 specific. But maybe you’re lucky and somebody in this forum has had the same issue.

The reason why it works for a user with a real image vs. one without is that because if the user has no image, gravatar falls back to the default image (the one passed as d parameter), see Image Requests – Gravatar Developer Resources > Default Image.

However, the sizing params only apply to the original image.

Example:

So for a URL like this: https://s.gravatar.com/avatar/16f389132262d1386a0086291095a70c?s=25&r=pg&d=https%3A%2F%2Fcdn.auth0.com%2Favatars%2Fcl.png

→ if the user 16f389132262d1386a0086291095a70c has on avatar, it will fallback to the default image https://cdn.auth0.com/avatars/cl.png, for which the s param does not apply.

That’s all I could find out so far, not sure if there is a way to request a sized default image. It depends on the Gravatar API really.

On https://www.drupal.org/project/gravatar/issues/906118 I found this:

Yes, it’s a known problem: the default image (parameter “d”) is not resized, even if the size is forced through the parameter “s”.

though that thread is already a few years old, but maybe hasn’t changed yet. So you might need to look into IE tweaks via css or use your own set of default images.

[alexab]

Hi @mathiasconradt

Thanks for your awesome help. I do agree, it’s more of a generic problem. But I guess it still have relevance for all Auth0 customers using the default picture, and needs to support IE (I don’t know how many that is, but it’s a very common requirement for enterprise applications).

I tried the IE tweaks via CSS, but could not get anything to work.

The pragmatic solution for me will then be to use another default image, hosted on Cloudinary where I can change the size without effort

Thanks again.

[mathiasconradt]

@alexab As I don’t have any Windows machine at hand right now: does it also happen in Edge, or only IE? (IE11 I assume).

The pragmatic solution for me will then be to use another default image

You could set a default avatar i.e. via Rule, in cases where a user picture doesn’t exist.

I found this: https://avatar-api.org/ maybe it’s a good option, as you can set the sizes there explicitly.

[alexab]

Setting the users image with a Rule was also my first idea, but the problem is that we also sync the user data to Algoia, to provide our users with fast search

So yesterday I implemented a solution with a default avatar in Cloudinary - but it was not good at all. I really miss the auto generated initials → so https://avatar-api.org/ is amazing. Thank you for finding it - I never even had the idea to look for such a thing I will try to implement a solution with their API and give the community an update.

If it works great, I think Auth0 should think about this offering as part of the Auth0 experience

[mathiasconradt]

Ok good luck with the API testing.

Didn’t fully get the problem with Rule & Algoia sync, why that wouldn’t work with the custom avatar provider / avatar set in Rule. It’s outgoing to Algoia only, nothing inbound towards Auth0. Don’t see an issue here.

Just to be clear : you would of course persist the set image within the Auth0 user profile / Auth0 userstore within the rule, not just volatile set in an ID token.

[alexab]

It would not work out of the box - because you can see other users in the app (fetched from Algolial). Then we need to migrate the data in Algolia (but that might be a better solution - combined with a rule).

[alexab]

Hi @mathiasconradt - I am trying to implement a rule to use the avatar-api.org:

function (user, context, callback) {
  if (user.picture.indexOf('cdn.auth0.com') > -1) {
    const url = require('url');
    const u = url.parse(user.picture, true);
    u.query.d = "https://avatar-api.org/avatar.svg?name=" + user.name + "&size=25";
    delete u.search;
    user.picture = url.format(u);
  }
  callback(null, user, context);
}

But the problem with this is that the avatar-api url is url encoded, so it only works if I url de-code in the client. Is this step something I can avoid?

[alexab]

Just wanted to provide an update - some good and bad news

Problems
Gravatar is not very easy to work with, when you specify a default image, the url can’t include query params. Params must be passed as sub-directories, something I learnt here.

I tried using https://ui-avatars.com, that kind of works with gravatar, but unfortunately, I have found these 2 big disadvantages:

1. The text is not centered in the generated image
2. I have to specify colors that make sense - making it very cumbersome to use.

Solution
My solution was to us Cloudinary, but I imagine that you could use any service where-you-provide-an-image-url, and they transform it. You can read about Cloudinary fetch service here, but essentially you provide cloudianry an url, and then you can also apply transformations like sizing - exactly what I was looking for to solve my original problem.

So the solution looks like this:

1. Get the original default gravatar url
2. Provide this url to Cloudinary fetch, and specify the size!

In code:

// to get the default users image, I just used split
const defaultUsersPicture = user.picture.split('d=')[1];
const urlToFetch = `https://res.cloudinary.com/<your-cloudinary-name>/image/fetch/w_25,h_25/${defaultUsersPicture}`

And tada you only download a image in the size your need, and it looks good in IE 11
And the download speed is

I hope this can help others

[konrad.sopala]

Glad you worked it out and thanks a lot for sharing it with the rest of community!