Displaying a user’s picture in the data view web part

After seeing my post on displaying recent blog posts from around a SharePoint site a pal (@andrewjolly) got in touch and asked me if it would be possible to display a user’s photo via XSL. After digging around I found that there are a few different scenarios where this could be used with different approaches for each:

  • A data view web part (DVWP)
  • A content query web part (CQWP)
  • Or in customised search results

This post details one possible way of doing this in the data view web part (thanks to Ben for the advice).

In SharePoint Designer (SPD) if you add in a data source to a page and point it at a regular SharePoint list or library you will see the options to insert the data and the available fields like so:

DVWP Data Source Details

You’ll notice here that there is no field returned with the user’s profile photo value in it. However, it is possible to get it there! Remember that the presentation of a user column can be modified through the browser, and some of these presentation styles include the user’s photo. To do this, navigate to the list or library in question, edit the settings for the list and then go on to edit the settings for the specific column. You’ll see an option to change the presentation of the column like so:

DVWP User Column Display Options

If you change this from the default value of Name (with presence) to an option with an image, say Name (with picture) and then go back into SPD and refresh your data source you’ll now see that the picture value is available in a field (in this case the field Author.picture):

DVWP Data Source Details With Picture

This field can then be accessed in the XSL and it’s a fairly straight forward job to use this data as required, i.e. set an image tag to use it as its source or just output the path.

DVWP Output Picture XSL

DVWP Show User Image Path Screenshot

It’s interesting to note that the ‘availability’ of this field doesn’t appear to be an SPD rendering thing – which was my first suspicion (I spent a while reading through the ‘code’ to try and find the expandfields flag – or whatever – with no success). But actually it seems that the datasource is reading directly from the columns in the list and it is these columns are determining the data that can be displayed. Which I suppose is obvious when you think about it.

So as a warning, if the settings on the column in your list are changed to not include the picture then your data view web part will no longer return this as a value.

I also spent some time trying to get this working for a Content Query Web Part, and in the end had to settle for using some javascript and the client object model as explained in a different post.

share and enjoy
  • Print
  • Twitter
  • Digg
  • del.icio.us
  • StumbleUpon
  • Yahoo! Buzz
  • Google Bookmarks
  • Facebook

6 comments to Displaying a user’s picture in the data view web part

  • may

    Hi,
    what version of sharepoint are you using?
    I follow the steps you said above, but i cannot find the Author.picture field when Show data of a datasource.

    Thanks.

  • Hi May,

    This approach is for SharePoint 2010 unfortunately. I’ve just taken a look quickly at a 2007 site, with SharePoint Designer 2007, and you’re right the Author.picture field doesn’t appear when you change the view of a person column. The approach I used in another article uses the client object model and so I don’t think this will help you either.

    Hmmm. Off the top of my head I can only think of a couple of possible solutions for you:
    1) if your photos are stored in a centralised/ managed location and are in the format glyn.clough.jpg (for example) then you could hard-code your XSL to output strings in that format.
    2) you could investigate using webservices to pull the data back from the user information list (similar to the client object model approach in 2010). That’s only a guess however as I’ve never tried anything similar.

    Sorry I couldn’t be more help.

  • Jess

    Excellent – thank you!

  • Bruno

    Hi,

    I’m using Soap Services to display a list from a subsite at the root in Sharepoint 2010 Foundation.
    It’s returning the field ows_Author, apparently as a String (title only) and not as an Object.

    Do you know if there is a way to get the author’s picture as well?

    thx,

    Bruno

  • jagadeesh

    My question is how to display list attachment image in data view web part?

    it returns 1/0.

Leave a Reply

  

  

  

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>