Colorful Avatar - Initials Placeholder Profile Image

All, wanted to share this simple way to bring an immersive experience to your app users without placing too many expectations of them. I have pre-defined 16 theme colors in an ENUM table, and when a person is added to the app they have a fixed column with an initial value set to RANDBETWEEN(1,16).

7 Likes
IF(
ISNOTBLANK([people_avatar]),
[people_avatar],
CONCATENATE(
	"https://ui-avatars.com/api/?rounded=false&color=ffffff&uppercase=true&length=3&font-size=.4&size=256&background=",
	SELECT(ENUM[enum_text],
  	AND(
    	[enum_REF_enum]=ANY(COMPANY_ROOT[company_theme]),
      [enum_order]=[_THISROW].[people_theme_num]
    )
  ),
	"&name=",
	LEFT(UPPER(INITIALS([people_fullname])),3)
)
)
3 Likes

2 Likes

This is awesome!

I am currently using the “No Image Available” approach. But this fits todays standard and is SOOOO much nicer.

Thanks for sharing!

2 Likes

I might as well go the rest of the way and include my color themes…
I got these from the paint section at Lowes…

COLORTHEME ENUMLIST
GLOBALSPICE HEXCOLOR 1 CBA97E
GLOBALSPICE HEXCOLOR 2 D59858
GLOBALSPICE HEXCOLOR 3 AC6B53
GLOBALSPICE HEXCOLOR 4 B1A584
GLOBALSPICE HEXCOLOR 5 9C7A56
GLOBALSPICE HEXCOLOR 6 907D66
GLOBALSPICE HEXCOLOR 7 676064
GLOBALSPICE HEXCOLOR 8 7C3655
GLOBALSPICE HEXCOLOR 9 B85444
GLOBALSPICE HEXCOLOR 10 5F4B3F
GLOBALSPICE HEXCOLOR 11 5C9598
GLOBALSPICE HEXCOLOR 12 4E4247
GLOBALSPICE HEXCOLOR 13 6D7645
GLOBALSPICE HEXCOLOR 14 A6613C
GLOBALSPICE HEXCOLOR 15 48423C
GLOBALSPICE HEXCOLOR 16 017680
COLORTHEME ENUMLIST
JH5THEME COLOR 1 4F4842
JH5THEME COLOR 2 B4B05A
JH5THEME COLOR 3 ABA39A
JH5THEME COLOR 4 598C74
JH5THEME COLOR 5 83AFBC
JH5THEME COLOR 6 FBCB78
JH5THEME COLOR 7 8BA7BB
JH5THEME COLOR 8 D9766C
JH5THEME COLOR 9 D67C56
JH5THEME COLOR 10 7BB1B2
JH5THEME COLOR 11 498555
JH5THEME COLOR 12 98B092
JH5THEME COLOR 13 506B84
JH5THEME COLOR 14 E6955F
JH5THEME COLOR 15 C0B2A2
JH5THEME COLOR 16 A42E37
COLORTHEME ENUMLIST
FORWARDAPPEAL COLOR 1 2F3D4C
FORWARDAPPEAL COLOR 2 7FAC6E
FORWARDAPPEAL COLOR 3 015D87
FORWARDAPPEAL COLOR 4 C4633E
FORWARDAPPEAL COLOR 5 C1E6DF
FORWARDAPPEAL COLOR 6 01A0B8
FORWARDAPPEAL COLOR 7 90979B
FORWARDAPPEAL COLOR 8 F1D3DA
FORWARDAPPEAL COLOR 9 353337
FORWARDAPPEAL COLOR 10 ED939D
FORWARDAPPEAL COLOR 11 624977
FORWARDAPPEAL COLOR 12 BFC9D0
FORWARDAPPEAL COLOR 13 C0AFD0
FORWARDAPPEAL COLOR 14 99324E
FORWARDAPPEAL COLOR 15 22657F
FORWARDAPPEAL COLOR 16 CE6C91
COLORTHEME ENUMLIST
COASTALCOOL COLOR 1 BDC0A0
COASTALCOOL COLOR 2 91AF9D
COASTALCOOL COLOR 3 7DC1CB
COASTALCOOL COLOR 4 B4CCC9
COASTALCOOL COLOR 5 A7A094
COASTALCOOL COLOR 6 CFC291
COASTALCOOL COLOR 7 75B9AE
COASTALCOOL COLOR 8 A6D0D6
COASTALCOOL COLOR 9 BEC3BB
COASTALCOOL COLOR 10 CBB584
COASTALCOOL COLOR 11 98B092
COASTALCOOL COLOR 12 988977
COASTALCOOL COLOR 13 C8BD98
COASTALCOOL COLOR 14 9FA694
COASTALCOOL COLOR 15 6B8CA9
COASTALCOOL COLOR 16 B2C8D8
4 Likes

This gives me a similar idea, but to skip the EnumList and directly randomize the hex value…

If you are including Text as Grant did, you have to be careful which colors are used so they don’t obscure the displayed text value

1 Like

Of course… And for good material design you want a complimentary palette…

Oh,I have … different … ideas for it.

2 Likes

Bahahaaa, well hook it up, i like ideas

If I get it working, I’ll let you know.

1 Like

Thank you very much @Grant_Stead this is very cool.
And I would like to come to Stead’s Pizza House :rofl:

The Tip reminded me of @tsuji_koichi’s Tip:

@Bahbus For Random HEX i was using this expression
"https://ui-avatars.com/api/?background=" & RANDBETWEEN(000000,999999) & "&name=" & ENCODEURL([UserName])

1 Like

I’ve tried it all. Default standard placeholder images, bots, cats, manipulate your own bots, etc, etc. This seems like the best fool proof and socially acceptable version that still gives us that little bit of texture we need as developers. I initially did the colors randomized. In the end following a color palette is what really sold the whole endeavor and added the final polish.

1 Like

I also use this approach. This tip is nice but I would still use the old approach.

1 Like

What’s the “old approach?”

“No image available” like what JB commented, I’am using a static hosted image. I personally try to keep minimum expression processing.

Thanks for sharing this useful tip.

Oh, yeah…
Done that before as well. There is for sure a line between processing weight and UX. I totally respect keeping the processing down! (Always a good decision)

2 Likes

Some users in this area have limited internet speed. So, less cosmetic is sadly required.

1 Like