default avatar mod

Started by waplist, June 27, 2015, 10:50:55 PM

Previous topic - Next topic

waplist

Hello,
Look at http://demo.flarum.org ,there when you register you get a default based on your initial name which is created by only css.is there any mod that can do this.if not please any dev create it.thanks


waplist


Gluz

I don't think that is done by css.

For what you want you need a special mod based on one of the default avatar mods, but instead of specify the image the mod will use one default based on the first letter of the username and all other characters that are not a-z use another one.

It's an interesting idea, I will check if requires template edits or not to do it as I think, because if do need them, will not work with some themes.

Gluz

I've been working on something for this,  just submitted to the MOD site for approval.

waplist


Steve

Mods can take awhile to be approved sometimes so be patient. :)
DO NOT pm me for support!

dougiefresh

Not complaining, but I've been waiting for a month for 3 of my mods to get approved, and today, I submitted another  :P  Of course, it doesn't help that the Customization Team found issues with those 3 mods, but that's not their fault.   O:)  I've also had fast approvals, so it just depends....

waplist


Steve

Read the first line of Dougie's post. As you can see, it can take weeks.
DO NOT pm me for support!

waplist

Congrats! Mod approved but i was asking for avatar by css not by image.



function hsvToRgb(h, s, v) {
  var r, g, b, i, f, p, q, t;
  if (h && s === undefined && v === undefined) {
    s = h.s; v = h.v; h = h.h;
  }
  i = Math.floor(h * 6);
  f = h * 6 - i;
  p = v * (1 - s);
  q = v * (1 - f * s);
  t = v * (1 - (1 - f) * s);
  switch (i % 6) {
    case 0: r = v; g = t; b = p; break;
    case 1: r = q; g = v; b = p; break;
    case 2: r = p; g = v; b = t; break;
    case 3: r = p; g = q; b = v; break;
    case 4: r = t; g = p; b = v; break;
    case 5: r = v; g = p; b = q; break;
  }
  return {
    r: Math.floor(r * 255),
    g: Math.floor(g * 255),
    b: Math.floor(b * 255)
  };
}

export default function stringToColor(string) {
  var num = 0;
  for (var i = 0; i < string.length; i++) {
    num += string.charCodeAt(i);
  }
  var hue = num % 360;
  var rgb = hsvToRgb(hue / 360, 0.3, 0.9);
  return ''+rgb.r.toString(16)+rgb.g.toString(16)+rgb.b.toString(16);
};

This is the js file that they used to get the background color for avatar circle.
Can please do it?




Gluz

Yeah, I just read the PM's of the MOD site.

That is not CSS, that is JavaScript and that is not really my best area, I just know the basics and not much more, as JavaScript executes after the page loads and change the things and that is not what I do.

Besides that, in most SMF themes, if no avatar is defined, the space where the avatar goes is not reserved, is just omitted in the template, there are just a few themes that reserve the space and uses a default avatar(like Reseller or Redsy), but again, it's a single image.


Making some inspects on that site you show, I just see that the CSS is not changing at all for images or for the default avatar so the CSS is not a problem, then seeing the way it is displayed I think the check for avatar is done in PHP and if the user have no avatar it puts that span with the first letter of the Username and that is what is displayed instead of an image, and only the background color is selected by that JavaScript file.

The SMF Customization Team tell me that some Theme authors do not use the complete image code, some just use the URL of the image, and that will make the MOD unusable in that themes because is simple text formated and not an image as the theme expects, so if I do not fill the URL because there is not URL it will not show anything, and if I put something in the URL it will not show anything because the theme expect an image, so for themes that use the URL instead of the image it will fail.

Anyway, I'm going to ask some things to the SMF Customization Team about this, because I think I have it working just as you want but I think it not comply with the SMF standards and is not going to be approved because that.


waplist

I know a little php. I think we only need that javascript function in php and if no avatar selected put that usernames letter and background color? Is that right?@Gluz

Gluz

Actually I use some functions of PHP and no need to use JavaScript at all, the background color is based on the MD5 hash of the username, so every user will have their own color.

But the thing is that the Avatar info is filled in an Array, and most of the themes use the key "image" that is the complete html img tag, but as the SMF Customization Team says, some Theme authors use the key URL or HREF instead of the "image", and for that i can't do anything but leave it empty, and then nothing will show in those themes.

Gluz

I just updated the MOD.

http://www.simplemachines.org/community/index.php?topic=538033.msg3824786#msg3824786

The Version 1.1.0 does what you want, but I keep the old one too, I think is useful for many other people out there to be able to change the images at will.

waplist

Thank you very much.installed and working fine

dieselv2

Is it just me or does this not recognise capital letters in usernames?

ie. user1 is will u.jpg while User1 is looking for U.jpg

waplist

I think only lowercase is used.

dieselv2

I just copied images and gave filenames capital letters and works ok :)

Gluz

Oh, I just realized that... maybe I'll update the images version soon.

Advertisement: