Finally, it's time to take a break away from my normally boring blog post, in favor a quick and enjoyable way to spruce up your Office 365 Webparts! If you happened to see my previous blog post, you'd see that I have been doing a lot of development with the SharePoint Framework. One thing that has always bothered me was the default user photo in SharePoint when a user doesn't have a photo attached to their profile... just seems... boring.
To access a user's profile image you can use the following URL. /_layouts/15/userphoto.aspx?size=S&accountname={AccountName}. If you were type this into your browser or use it as a src attribute on an <img> tag, SharePoint would either return the photo attached to the profile or a generic user photo image. When I was developing my latest inline-search webpart, there were a handful of user's who didn't have a photo attached and to demonstate this, I have removed photos from the user accounts in our environment. See below.
Notice how Josh and Dave do not have any user photo attached to their profile. So, I thought, how could I have some fun within our SharePoint environment... and this is when I found Adorable Avatars. This might be the coolest little API on github. Kudos to the creator and all those who have contributed! What this API does, is take a user's AccountName, and return an associate avatar image! You can find the source & documentation on the github under the MIT license, but to provide an example... the syntax would be as follows...
<img src="http://api.adorable.io/avatar/bcameron@aerieconsulting.com" />
So I did exactly this, I updated my SharePoint Inline-Search Webpart on my DocumentCard like so:
The end result is absolutely magical! Notice how the avatar is consistent for Josh. This means, no matter where you use this API on your site, as long as the AccountName is consistent, you'll have the same avatar! Sweet!
Hope you found this post to be a nice little break from my normal posts! Let me know what you think!
Credit:Adorable Avatars
Share
