SOLVED

How to make profile pictures visible in a list (people picker field)?

%3CLINGO-SUB%20id%3D%22lingo-sub-1166892%22%20slang%3D%22en-US%22%3EHow%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1166892%22%20slang%3D%22en-US%22%3E%3CP%3EI%20noticed%20in%20SharePoint's%20December%20pitstop%20article%20that%20one%20of%20their%20lists%20displays%20the%20profile%20pictures%20of%20various%20users%2C%20under%20the%20owner%20column.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22December%20Pitstop.png%22%20style%3D%22width%3A%20831px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170376i69738A795EF748B4%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22December%20Pitstop.png%22%20alt%3D%22December%20Pitstop.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'd%20like%20to%20do%20the%20same%20for%20one%20of%20my%20lists%2C%20but%20I%20can't%20find%20the%20option%20for%20it%3F%20Preferably%2C%20if%20possible%2C%20to%20display%20the%20user's%20name%20and%20their%20profile%20picture%20adjacent.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20possible%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1166892%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdmin%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESites%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1167396%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1167396%22%20slang%3D%22en-US%22%3E%3CP%3EHello%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F190211%22%20target%3D%22_blank%22%3E%40Toby%20McDaid%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUse%20the%20%22Display%20a%20person's%20profile%20picture%20in%20a%20circle%22%20column%20formatting%20sample.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fcolumn-samples%2Fperson-roundimage-format%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fcolumn-samples%2Fperson-roundimage-format%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Annotation%202020-02-11%20133150.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170494iA276E6EB73E1010F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Annotation%202020-02-11%20133150.png%22%20alt%3D%22Annotation%202020-02-11%20133150.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20helps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1485080%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1485080%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F111382%22%20target%3D%22_blank%22%3E%40Norman%20Young%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20wanted%20to%20ask%20if%20it%20is%20possible%20to%20have%20the%20Picture%20and%20Name%20in%20only%20one%20Column%20in%20a%20modern%20SPO%20List.%3C%2FP%3E%3CP%3EI%20know%20that%20in%20a%20Classic%20List%20it%20could%20be%20done%20by%20selecting%20%22Name%20(with%20picture%20and%20details)%22%2C%20as%20shown%20in%20the%20Screenshot%20below.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Vargas_Ruiz_0-1592972405891.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F200650i3F46B2D67525E903%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Vargas_Ruiz_0-1592972405891.png%22%20alt%3D%22Vargas_Ruiz_0-1592972405891.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESince%20this%20doesn't%20work%20in%20a%20modern%20List%20I'd%20like%20to%20know%20if%20there%20is%20any%20other%20way%20to%20achieve%20that%20or%20do%20we%20need%20to%20have%202%20Columns%20one%20for%20the%20Picture%20and%20the%20other%20for%20the%20Name%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1487165%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1487165%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F708483%22%20target%3D%22_blank%22%3E%40Vargas_Ruiz%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20add%20the%20%22span%22%20and%20%22txtContent%22%20elements%20to%20the%20existing%20JSON.%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorNorman%20Young_0%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

I noticed in SharePoint's December pitstop article that one of their lists displays the profile pictures of various users, under the owner column.

 

December Pitstop.png

 

I'd like to do the same for one of my lists, but I can't find the option for it? Preferably, if possible, to display the user's name and their profile picture adjacent.

 

Is this possible?

6 Replies
best response confirmed by Juan Carlos González Martín (MVP)
Solution

Hello @Toby McDaid,

 

Use the "Display a person's profile picture in a circle" column formatting sample.

 

https://github.com/SharePoint/sp-dev-list-formatting/tree/master/column-samples/person-roundimage-fo...

 

Annotation 2020-02-11 133150.png

I hope this helps.

 

Norm

Hello @Norman Young 

 

I wanted to ask if it is possible to have the Picture and Name in only one Column in a modern SPO List.

I know that in a Classic List it could be done by selecting "Name (with picture and details)", as shown in the Screenshot below.

 

Vargas_Ruiz_0-1592972405891.png

 

Since this doesn't work in a modern List I'd like to know if there is any other way to achieve that or do we need to have 2 Columns one for the Picture and the other for the Name?

 

Hi @Vargas_Ruiz,

 

You can add the "span" and "txtContent" elements to the existing JSON.

 

 

@Toby McDaid 

For anyone insterested, here's the json for a 32px profile pic which shows the profile card on hover:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-direction": "column",
    "align-items": "flex-start",
    "margin-top": "6px",
    "padding-right": "8px",
    "width": "100%",
    "overflow": "hidden"
  },
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
      },
      "style": {
        "display": "inline-flex",
        "align-items": "center",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "12px",
        "margin": "2px"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "width": "32px",
            "height": "32px",
            "display": "block",
            "border-radius": "50%"
          }
        }
      ],
      "defaultHoverField": "[$personIterator]"
    }
  ]
}
@mccoyd

I like to use the JSON to display but it not showing.. is there anyth I need to edit?

@bbsin   In case you still need it, you need to add 

=@currentWeb + before the photo image path, so:

"src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",