Forum Discussion

Toby McDaid's avatar
Toby McDaid
Iron Contributor
Feb 11, 2020

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

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 l...
admin
developer
Lists
SharePoint Online
Sites
mccoyd's avatar
mccoyd
Copper Contributor

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]"
    }
  ]
}
RafiAhmed's avatar
RafiAhmed
Copper Contributor
Dec 11, 2021

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.

Resources