0

How can I only show the profile picture of a user (and not his name) in a SharePoint column?

I have set the column Person to only picture. but still get the name with it.

I have found a JSON code which displays the picture but it is with the name also:

{
 "$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": "28px",
            "overflow": "hidden",
   "border-radius": "12px",
   "padding-right": "8px",
   "margin": "2px"
  },
  "children": [
            {
    "elmType": "img",
    "attributes": {
     "src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
     "title": "[$personIterator.title]"
    },
    "style": {
     "width": "28px",
     "height": "28px",
     "display": "block",
     "border-radius": "50%"
    }
   },
   {
                "elmType": "div",
                "txtContent": "[$personIterator.title]",
                "attributes": {
                    "title": "[$personIterator.title]",
                    "class": "nameplate-title"
                },
                "style": {
                    "padding-left": "5px",
                    "white-space": "nowrap",
                    "font-size": "12px"
                }
            }
  ],
  "defaultHoverField": "[$personIterator]"
 }]
}

How can I only display the picture?

2
  • Is this a single selection person column or multiple selection person column? Commented Oct 10, 2023 at 11:37
  • Multiple selection Commented Oct 10, 2023 at 11:38

1 Answer 1

1

Try using this JSON for your person column:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "forEach": "personIterator in @currentField",
      "elmType": "div",
      "attributes": {
        "class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
      },
      "style": {
        "height": "28px",
        "overflow": "hidden",
        "border-radius": "12px",
        "margin-right": "10px"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
            "title": "[$personIterator.title]"
          },
          "style": {
            "width": "28px",
            "height": "28px",
            "border-radius": "50%"
          }
        }
      ],
      "defaultHoverField": "[$personIterator]"
    }
  ]
}

Output:

enter image description here

You can also use the internal name of your person column in place of @currentField like [$InternalNameOfColumn]. You can get the internal name of your SharePoint list columns by following this article: How to find the Internal name of columns in SharePoint Online?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.