In this article, we are going to discuss about how to display user profile picture in the header section of home page in SharePoint 2013 site as well as how to get other user profile information such as name, designation, department etc from user profile service application using C# code.
We are going to display “No image found” image in case the user profile picture doesn’t present in the active directory, Also you could add the image which you want to display for no image found.
If the user profile picture present in the active directory, the image will be displayed as shown below in the header section of home page. You could modified style of the image by writing custom css file.
Follow the Below Couple of Steps to Achieve the design,
- Configure User Profile Service Application in Central Admin
- Create a Custom Web Part to Display User Profile Picture
Configure User Profile Service Application
This service application synchronize the user information from Active directory to SharePoint site. It will store user profile information in the user profile service application database. Many of them may know the steps to configure user profile service application. If you don’t know, please follow the below steps to configure the service application,
- Navigate to Central Admin->Application Management->Manage Service Application
- Click New->User Profile Service Application from ribbon menu
In the Create New User Profile Service Application page, Type name of service application and Select existing application pool to run this service application or create a new one. “The selected security account for this service application must have permission to access active directory service”.
Type profile data base server and data base name where you want to store the user information. In the database authentication section provide the user name and password who has access for existing database server. Similarly provide database details for synchronization database and social tagging database. Finally press “Create” button.
Once the Profile Service Application Is Created, Open the User Profile Service Application
Click Configure Synchronization Connection under Synchronization group to set up connection string for fetching data from active directory , LDAP Directory and business connectivity. If not created already.
Fill the configuration details,
Then click on populate container button and select the user check box
Finally Press “Ok”.
Manager user profile properties
In this page, we can map active directory properties to SharePoint properties,
Configure Synchronization Timer Job
In this section, we can configure synchronization time job schedule. Select the Configure Synchronization Timer Job
Provide Configuration details for the timer job
For first time, click Start Profile Synchronization to immediately run the timer job. Next time the job will be run based on the job scheduled interval.
Once the timer job is completed, see the profile count which was imported from active directory,
Create a User Control to display user profile picture
- Open Visual Studio and create a new Empty project, give proper name “User Profile Picture”
Deploy the solution as Farm solution as the code should be executed in server side to retrieve profile information from UPS application.
Once the project is created, add a new item and select “User control” then press “Ok” “Why we choose user control project is we may need this control for more project and it is going to present in the master page as a delegate control”
After created the control, the solution explore looks like below
Form Code - Usercontrol1.ascx
This section going to render in the master page
<asp:Literal ID="ltUserName" runat="server"></asp:Literal>
Code behind - Usercontrol1.ascx.cs
UserProfileManager class for getting user profile properties, we need to add the following assembly,
In the code behind, get the user profile picture url and render it as html
<div style="text-align: center">
<img style="border-radius: 50%; width: 50px;" src="http/server/my/User Photos/Profile Pictures/sgopal_MThumb.jpg"></div>
<div style="text-align: center">Senthil Gopal</div>
We need to display the user profile picture for all the user since the user doesn’t have permission for UPA application. So we used
RunWithElevatedPrivileges method to execute the code using administrative privilege to read the user profile properties.
private string getUserProfilePictureUrl(SPUser currentUser)
string pictureURL = string.Empty;
using (SPSite mySitesCollection = new SPSite(SPContext.Current.Site.Url))
using (SPWeb myweb = mySitesCollection.OpenWeb())
string currentUserlogin = currentUser.LoginName;
SPServiceContext context = SPServiceContext.GetContext(mySitesCollection);
UserProfileManager profileManager = new UserProfileManager(context);
UserProfile currentProfile = profileManager.GetUserProfile(currentUserlogin);
ProfileValueCollectionBase profileValueCollection = currentProfile.GetProfileValueCollection("PictureURL");
if ((profileValueCollection != null) && (profileValueCollection.Value != null))
pictureURL = profileValueCollection.Value.ToString();
pictureURL = "/Style library/AH/Images/user.png";
Also you could see the available properties name by debugging the code
Create deletegate control
By using this delegate control, we can call the usercontrol1.ascx page
- Add new item and select empty element, give propery name “UserProfilePic”
- Open Element.xml and paste below code
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="<a href="http:
<Control Id="UserProfilePic" Sequence="11" ControlSrc="~/_controltemplates/15/UserProfilePicture/UserControl1.ascx" xmlns="<a href="http:
</Elements><span style="display: none;"> </span><span style="display: none;"> </span>
3. Change the scope of element.xml feature as site level
By using the below tage we can place this control in the master page where we want to display the profile picture photo
<!--SPM:<SharePoint:DelegateControl runat="server" ControlId="UserProfilePic "/>-->
3rd Aug 2016 - initial version created.