Tuesday 11 June 2013

Display user profile picture next to welcome name

Here is a simple way to add in the logged in users profile picture right before or after the users name in the SharePoint 2010 ribbon.

1.) Add the following to the top of your custom master page right before the doctype: <%@ Register Tagprefix="SPSWC" Namespace="Microsoft.SharePoint.Portal.WebControls" Assembly="Microsoft.SharePoint.Portal, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
image

2.) Add in the following control right before the welcome text:
image

A nice feature that you can customize is if you don’t want to show a placeholder image if a users has not uploaded a custom picture you can simply change ShowPlaceholder="true" to “false”. and it will only show a picture if someone has specified a custom one in their profile.

Before:
image

After:
image

If you want to have the image on the right simply move the control after the welcome and muiselctor controls, also remove the float:left in the picture style:

<wssuc:Welcome id="IdWelcome" runat="server" EnableViewState="false"></wssuc:Welcome>

<wssuc:MUISelector ID="IdMuiSelector" runat="server"/>

<SPSWC:ProfilePropertyImage PropertyName="PictureUrl" style="height: 20px;" ShowPlaceholder="true" id="PictureUrlImage" runat="server"/>
The 20px height is that golden number because any larger and the image will get cropped off on the bottom in IE7 and in IE8 you will start to see some separation and cropping of the ribbon when viewing the other ribbon tabs.

30px height:
image

20px Height:
image

The inline CSS above on the control is just to keep this blog post simple, Its recommended to move that inline style into your custom CSS file.

No comments:

Post a Comment