Forum Discussion
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...
Hello Toby McDaid,
Use the "Display a person's profile picture in a circle" column formatting sample.
I hope this helps.
Norm
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]"
}
]
}
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]"
}
]
}- Much improved! Thank you!
