Images in modern SharePoint lists

%3CLINGO-SUB%20id%3D%22lingo-sub-661106%22%20slang%3D%22en-US%22%3EImages%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-661106%22%20slang%3D%22en-US%22%3E%3CP%3EI%20was%20wondering%20if%20you%20know%20how%20to%20implement%20putting%20an%20image%20in%20a%20column%20on%20a%20list%20in%20SharePoint%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%E2%80%99m%20developing%20a%20system%20where%20staff%20can%20send%20colleagues%20praise%2C%20essentially%20by%20creating%20a%20new%20item%20in%20a%20list.%20It%20looks%20something%20like%20this%3A%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%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F116735iE4C31B2FEF07BA75%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Praise.jpg%22%20title%3D%22Praise.jpg%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIt%E2%80%99s%20a%20bit%20messy%20but%20you%20get%20the%20point.%20I%20want%20to%20have%20a%20column%20where%20people%20can%20select%20a%20badge%20(e.g.%20teamwork%2C%20persistence%20etc)%20like%20these%20and%20would%20show%20in%20the%20list%3A%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%20style%3D%22width%3A%20460px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F116736i342C3A6135217026%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22badges.png%22%20title%3D%22badges.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAny%20idea%20how%20I%20could%20do%20this%3F%20Many%20thanks%20for%20any%20help!%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-661106%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3ELists%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESharePoint%20Online%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-661279%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-661279%22%20slang%3D%22en-US%22%3ETwo-three%20possibilities%20here%3A%3CBR%20%2F%3E(1)%20Simple%20one%3A%20add%20just%20a%20hyperlink%20column%20that%20points%20to%20the%20picture%20you%20want%20to%20add%20per%20SPO%20list%20item%3CBR%20%2F%3E(2)%20Use%20JSON%20formatting%20capability%20to%20automate%20when%20to%20put%20a%20badge%20depending%20on%20the%20column%20value%3CBR%20%2F%3E(3)%20Create%20a%20SPX%20extension%20to%20apply%20formatting%20to%20your%20list%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-662955%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-662955%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F60%22%20target%3D%22_blank%22%3E%40Juan%20Carlos%20Gonz%C3%A1lez%20Mart%C3%ADn%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%20Juan.%20I've%20put%20them%20badges%20in%20a%20document%20library%20so%20they'll%20have%20URLs%2C%20so%20how%20do%20I%20get%20those%20to%20be%20selectable%20using%20hyperlinks%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIdeally%20I%20just%20want%20people%20to%20choose%20a%20type%20of%20praise%2Fbadge%20from%20a%20list%20and%20have%20it%20show%20as%20an%20icon.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-663167%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-663167%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F86439%22%20target%3D%22_blank%22%3E%40Michael%20Butterfield%3C%2FA%3E%26nbsp%3B%20we%20use%20the%20Yammer%20Praise%20functionality%20for%20this%20sort%20of%20thing%20(as%20well%20as%20asking%20for%20help%2C%20commenting%20on%20stuff%20etc)%20across%20our%20company%20of%2065%2C000%20staff.%20You%20might%20want%20to%20investigate%3B%20it%20saves%20having%20to%20build%20something%20bespoke%20and%20is%20perhaps%20more%20collaborative.%20But%20I%20admit%20it%20doesn't%20have%20the%20badges%20you%20want.%3C%2FP%3E%3CP%3ERob%3CBR%20%2F%3ELos%20Gallardos%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-664477%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-664477%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F86439%22%20target%3D%22_blank%22%3E%40Michael%20Butterfield%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHave%20you%20checked%20the%20below%20posts%20for%20reference%26nbsp%3B%20%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fsocial.msdn.microsoft.com%2FForums%2Fsharepoint%2Fen-US%2F4bf2cc5a-b01b-4027-bfc9-b444c2825472%2Fhow-to-display-pictures-in-drop-down-menu%3Fforum%3Dsharepointcustomizationlegacy%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fsocial.msdn.microsoft.com%2FForums%2Fsharepoint%2Fen-US%2F4bf2cc5a-b01b-4027-bfc9-b444c2825472%2Fhow-to-display-pictures-in-drop-down-menu%3Fforum%3Dsharepointcustomizationlegacy%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-664945%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-664945%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F174092%22%20target%3D%22_blank%22%3E%40Rob%20Elliott%3C%2FA%3E%26nbsp%3B%26nbsp%3B%20We%20don't%20use%20Yammer%20at%20our%20organisation.%20There's%20also%20a%20similar%20thing%20in%20Teams%20but%20it's%20not%20something%20the%20everyone%20can%20access%20and%20view.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F38365%22%20target%3D%22_blank%22%3E%40Kevin%20Morgan%3C%2FA%3E%26nbsp%3B%26nbsp%3BA%20drop%20down%20menu%20showing%20all%20the%20images%20would%20be%20ideal%20but%20that%20post%20is%209%20years%20old%2C%20so%20not%20much%20help%20with%20modern%20lists.%3C%2FP%3E%3CP%3E%3CBR%20%2F%3EThere's%20a%20post%20here%20about%20employee%20badges%20but%20i'm%20sure%20he's%20missed%20out%20a%20couple%20of%20steps!%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fmikehatheway.com%2F2019%2F04%2F10%2Femployee-badges-in-sharepoint%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmikehatheway.com%2F2019%2F04%2F10%2Femployee-badges-in-sharepoint%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-680114%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-680114%22%20slang%3D%22en-US%22%3E%3CP%3EJust%20FYI%20-%20I%20figured%20out%20a%20way%20to%20populare%20the%20list%20with%20images%20nicely.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThey%20don't%20appear%20on%20the%20drop%20down%20list%20but%20it's%20still%20good.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-694937%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-694937%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F86439%22%20target%3D%22_blank%22%3E%40Michael%20Butterfield%3C%2FA%3E%26nbsp%3Bcan%20you%20share%3F%20I%20am%20looking%20for%20a%20very%20similar%20capability.%20Thank%20you.%26nbsp%3B%3C%2FP%3E%3CBLOCKQUOTE%3E%3CHR%20%2F%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F86439%22%20target%3D%22_blank%22%3E%40Michael%20Butterfield%3C%2FA%3E%26nbsp%3Bwrote%3A%3CBR%20%2F%3E%3CP%3EJust%20FYI%20-%20I%20figured%20out%20a%20way%20to%20populare%20the%20list%20with%20images%20nicely.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThey%20don't%20appear%20on%20the%20drop%20down%20list%20but%20it's%20still%20good.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3CHR%20%2F%3E%3C%2FBLOCKQUOTE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-744732%22%20slang%3D%22en-US%22%3ERe%3A%20Images%20in%20modern%20SharePoint%20lists%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-744732%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F4163%22%20target%3D%22_blank%22%3E%40Andrew%20Warland%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20basic%20principle%20is%20here%3A%20%3CA%20href%3D%22https%3A%2F%2Fmikehatheway.com%2F2019%2F04%2F10%2Femployee-badges-in-sharepoint%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fmikehatheway.com%2F2019%2F04%2F10%2Femployee-badges-in-sharepoint%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Contributor

I was wondering if you know how to implement putting an image in a column on a list in SharePoint?

 

I’m developing a system where staff can send colleagues praise, essentially by creating a new item in a list. It looks something like this:

 

Praise.jpg

 

It’s a bit messy but you get the point. I want to have a column where people can select a badge (e.g. teamwork, persistence etc) like these and would show in the list:

 

badges.png

 

Any idea how I could do this? Many thanks for any help!

 

8 Replies
Highlighted
Two-three possibilities here:
(1) Simple one: add just a hyperlink column that points to the picture you want to add per SPO list item
(2) Use JSON formatting capability to automate when to put a badge depending on the column value
(3) Create a SPX extension to apply formatting to your list
Highlighted

@Juan Carlos González Martín 

 

Thanks Juan. I've put them badges in a document library so they'll have URLs, so how do I get those to be selectable using hyperlinks?

 

Ideally I just want people to choose a type of praise/badge from a list and have it show as an icon.

Highlighted

@Michael Butterfield  we use the Yammer Praise functionality for this sort of thing (as well as asking for help, commenting on stuff etc) across our company of 65,000 staff. You might want to investigate; it saves having to build something bespoke and is perhaps more collaborative. But I admit it doesn't have the badges you want.

Rob
Los Gallardos

Highlighted
Highlighted

@Rob Elliott   We don't use Yammer at our organisation. There's also a similar thing in Teams but it's not something the everyone can access and view.


@Kevin Morgan  A drop down menu showing all the images would be ideal but that post is 9 years old, so not much help with modern lists.


There's a post here about employee badges but i'm sure he's missed out a couple of steps!

https://mikehatheway.com/2019/04/10/employee-badges-in-sharepoint

Highlighted

Just FYI - I figured out a way to populare the list with images nicely.

 

They don't appear on the drop down list but it's still good.

 

Thanks

Highlighted

@Michael Butterfield can you share? I am looking for a very similar capability. Thank you. 


@Michael Butterfield wrote:

Just FYI - I figured out a way to populare the list with images nicely.

 

They don't appear on the drop down list but it's still good.

 

Thanks


 

Highlighted