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

[Toby McDaid]

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

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?

[#2 · Accepted 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...

I hope this helps.

Norm

[#3]

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.

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?

[#4]

Hi @Vargas_Ruiz,

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

[#5]

@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]"
    }
  ]
}

[#6]

@mccoyd

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

[#7]

@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]",

[#8]

Thanks 🙂

[#9]

@bbsin The People Column now has the function itself of displaying Pictures in the same Column that can be toggled on / off

[#10]

@mccoyd 

My 2 cents;

1. Remove lines # 5 and 6 to align multi-user icons inline (otherwise, each icon will be displayed in a new line)
2. Change line # 25 to "margin-right": "-10px" for icon overlap look.

[#11]

@Toby McDaid @bbsin No need to use JSON to show profile photos of users in person or group columns. You can now enable "Show profile photos" from column settings:

Check this blog by @ChandaniPrajapati: How to show profile picture in Person column in SharePoint list/library? 

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

[#12]

@mccoyd 
I modified this to allow the people detail window to open and have the "Name (with Picture)" functionality. I'm not good with JSON formatting or anything, but your post set me on the right path towards this. Thanks

{
  "$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%",
            "margin": "15px"
          }
        },
        {
          "elmType": "div",
          "txtContent": "[$personIterator.title]",
          "style": {
            "font-weight": "bold",
            "font-size": "12px",
            "margin": "15px"
          }
        }
      ],
      "defaultHoverField": "[$personIterator]"
    }
  ]
}

[#13]

Thank you beachhead75 ! Looks beautiful!

[#14]

@beachhead75 

I've modified this so that the image is left justified and smaller to better align with the out-of-the-box option.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "inlineEditField": "@currentField",
  "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": "25px",
        "overflow": "hidden",
        "border-radius": "50px",
        "margin": "2px"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "='/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "width": "25px",
            "height": "25px",
            "display": "block",
            "border-radius": "50%",
            "margin": "0px"
          }
        },
        {
          "elmType": "div",
          "txtContent": "[$personIterator.title]",
          "style": {
            "font-weight": "normal",
            "font-size": "12px",
            "margin": "0px 10px 0px 5px"
          }
        }
      ],
      "defaultHoverField": "[$personIterator]"
    }
  ]
}

[#15]

Much improved! Thank you!