Display User Profile Picture in O365 using a Content Search Web Part

by Drew Madelung

If you have ever tried to display a user’s profile picture that is stored in their SharePoint Online user profile you will have noticed an issue. When you configure everything just right and log onto the page for the first time you wont see their picture. All you see is the wonderful grey box with a question mark like this:

This issue occurs because the profile image is located on another site collection. You must authenticate with the site collection for the image to be displayed in the Content Search Web Part.

The workaround provided involves browsing to a MySite or OneDrive page within your tenant and then browse back to the page. Obviously this is not a great user experience. I was putting together an Employee Spotlight section on a client’s new portal’s landing page and this workaround was not acceptable. I did some digging through the internet and stumbled across some pieces to put together to solve this issue. The solution involved a new display template and update the pictureURL to point to a local source instead of the "My" site collection(s).

1. Make a copy of whatever display template you want to use and give it a new name. In this example I am using the Picture with 3 lines on the right. (Item_Picture3Lines.html)

2. Open the downloaded and renamed display template and update the Title.