SOLVED

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

%3CLINGO-SUB%20id%3D%22lingo-sub-1166892%22%20slang%3D%22en-US%22%3EHow%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1166892%22%20slang%3D%22en-US%22%3E%3CP%3EI%20noticed%20in%20SharePoint's%20December%20pitstop%20article%20that%20one%20of%20their%20lists%20displays%20the%20profile%20pictures%20of%20various%20users%2C%20under%20the%20owner%20column.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22December%20Pitstop.png%22%20style%3D%22width%3A%20831px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170376i69738A795EF748B4%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22December%20Pitstop.png%22%20alt%3D%22December%20Pitstop.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'd%20like%20to%20do%20the%20same%20for%20one%20of%20my%20lists%2C%20but%20I%20can't%20find%20the%20option%20for%20it%3F%20Preferably%2C%20if%20possible%2C%20to%20display%20the%20user's%20name%20and%20their%20profile%20picture%20adjacent.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIs%20this%20possible%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1166892%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAdmin%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESites%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1167396%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1167396%22%20slang%3D%22en-US%22%3E%3CP%3EHello%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F190211%22%20target%3D%22_blank%22%3E%40Toby%20McDaid%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EUse%20the%20%22Display%20a%20person's%20profile%20picture%20in%20a%20circle%22%20column%20formatting%20sample.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fcolumn-samples%2Fperson-roundimage-format%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-list-formatting%2Ftree%2Fmaster%2Fcolumn-samples%2Fperson-roundimage-format%3C%2FA%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Annotation%202020-02-11%20133150.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F170494iA276E6EB73E1010F%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Annotation%202020-02-11%20133150.png%22%20alt%3D%22Annotation%202020-02-11%20133150.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EI%20hope%20this%20helps.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ENorm%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1485080%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1485080%22%20slang%3D%22en-US%22%3E%3CP%3EHello%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F111382%22%20target%3D%22_blank%22%3E%40Norman%20Young%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20wanted%20to%20ask%20if%20it%20is%20possible%20to%20have%20the%20Picture%20and%20Name%20in%20only%20one%20Column%20in%20a%20modern%20SPO%20List.%3C%2FP%3E%3CP%3EI%20know%20that%20in%20a%20Classic%20List%20it%20could%20be%20done%20by%20selecting%20%22Name%20(with%20picture%20and%20details)%22%2C%20as%20shown%20in%20the%20Screenshot%20below.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22Vargas_Ruiz_0-1592972405891.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F200650i3F46B2D67525E903%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22Vargas_Ruiz_0-1592972405891.png%22%20alt%3D%22Vargas_Ruiz_0-1592972405891.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESince%20this%20doesn't%20work%20in%20a%20modern%20List%20I'd%20like%20to%20know%20if%20there%20is%20any%20other%20way%20to%20achieve%20that%20or%20do%20we%20need%20to%20have%202%20Columns%20one%20for%20the%20Picture%20and%20the%20other%20for%20the%20Name%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1487165%22%20slang%3D%22en-US%22%3ERe%3A%20How%20to%20make%20profile%20pictures%20visible%20in%20a%20list%20(people%20picker%20field)%3F%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1487165%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F708483%22%20target%3D%22_blank%22%3E%40Vargas_Ruiz%3C%2FA%3E%2C%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou%20can%20add%20the%20%22span%22%20and%20%22txtContent%22%20elements%20to%20the%20existing%20JSON.%3C%2FP%3E%0A%3CDIV%20id%3D%22tinyMceEditorNorman%20Young_0%22%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Highlighted
Contributor

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

 

December Pitstop.png

 

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?

3 Replies
Highlighted
Best Response confirmed by Juan Carlos González Martín (MVP)
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...

 

Annotation 2020-02-11 133150.png

I hope this helps.

 

Norm

Highlighted

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.

 

Vargas_Ruiz_0-1592972405891.png

 

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?

 

Highlighted

Hi @Vargas_Ruiz,

 

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