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