Forum Discussion
Help with manipulating JSON code to show image instead of text
Beth_Culpepper I've adjusted the JSON to sreplace the description with an image and you can copy it from the spoiler below. The image column in the list is a picture type column (so it saves the image as an attachment to the item) and you'll need to change the highlighted part of the url to point to your list.
Spoiler{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "style": { "display": "block", "width": "80%", "padding": "50px 0", "position": "relative", "overflow": "hidden" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-neutralQuaternary" }, "style": { "position": "absolute", "top": "0", "left": "50%", "margin-left": "-1px", "width": "2px", "height": "100%", "z-index": "1" } }, { "elmType": "div", "style": { "display": "flex", "width": "50%", "justify-content": "space-between", "float": "=if(@rowIndex % 2 == 0, 'left', 'right')", "flex-direction": "=if(@rowIndex % 2 == 0, 'row-reverse', 'row')", "margin": "=if(@rowIndex % 2 == 0, '0 0 0 8px', '0 8px 0 0')" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-themePrimary ms-borderColor-themeLighterAlt" }, "style": { "box-sizing": "border-box", "width": "16px", "height": "16px", "border-radius": "50%", "border-width": "2px", "border-style": "solid", "margin-top": "10px", "z-index": "9999" } }, { "elmType": "div", "style": { "box-sizing": "border-box", "width": "95%", "padding": "0 15px" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-fontSize-20 ms-fontColor-neutralPrimary" }, "style": { "margin": "5px 0", "font-weight": "500", "text-align": "=if(@rowIndex % 2 == 0, 'right', 'left')" }, "txtContent": "[$Title]" }, { "elmType": "div", "style": { "text-align": "=if(@rowIndex % 2 == 0, 'right', 'left')" }, "attributes": { "class": "ms-fontSize-16 ms-fontColor-neutralTertiary" }, "txtContent": "[$SubTitle]" }, { "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "=if([$Picture.serverRelativeUrl],[$Picture.serverRelativeUrl],@currentWeb+'/Lists/ChronologicalOrder/Attachments/'+[$ID]+'/'+[$Picture.fileName])" }, "style": { "width": "80%", "height": "80%" } } ] } ] } ] } ] } }Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)
Beth_Culpepper I've adjusted the JSON to sreplace the description with an image and you can copy it from the spoiler below. The image column in the list is a picture type column (so it saves the image as an attachment to the item) and you'll need to change the highlighted part of the url to point to your list.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "block",
"width": "80%",
"padding": "50px 0",
"position": "relative",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralQuaternary"
},
"style": {
"position": "absolute",
"top": "0",
"left": "50%",
"margin-left": "-1px",
"width": "2px",
"height": "100%",
"z-index": "1"
}
},
{
"elmType": "div",
"style": {
"display": "flex",
"width": "50%",
"justify-content": "space-between",
"float": "=if(@rowIndex % 2 == 0, 'left', 'right')",
"flex-direction": "=if(@rowIndex % 2 == 0, 'row-reverse', 'row')",
"margin": "=if(@rowIndex % 2 == 0, '0 0 0 8px', '0 8px 0 0')"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-borderColor-themeLighterAlt"
},
"style": {
"box-sizing": "border-box",
"width": "16px",
"height": "16px",
"border-radius": "50%",
"border-width": "2px",
"border-style": "solid",
"margin-top": "10px",
"z-index": "9999"
}
},
{
"elmType": "div",
"style": {
"box-sizing": "border-box",
"width": "95%",
"padding": "0 15px"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-fontSize-20 ms-fontColor-neutralPrimary"
},
"style": {
"margin": "5px 0",
"font-weight": "500",
"text-align": "=if(@rowIndex % 2 == 0, 'right', 'left')"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"text-align": "=if(@rowIndex % 2 == 0, 'right', 'left')"
},
"attributes": {
"class": "ms-fontSize-16 ms-fontColor-neutralTertiary"
},
"txtContent": "[$SubTitle]"
},
{
"elmType": "div",
"children": [
{
"elmType": "img",
"attributes": {
"src": "=if([$Picture.serverRelativeUrl],[$Picture.serverRelativeUrl],@currentWeb+'/Lists/ChronologicalOrder/Attachments/'+[$ID]+'/'+[$Picture.fileName])"
},
"style": {
"width": "80%",
"height": "80%"
}
}
]
}
]
}
]
}
]
}
}
Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)
Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)- Thank you SO much for your help. That worked perfectly after I adjusted the column type and also changed the name of my list to something shorter. 🙂 Thank you, Rob!!!!
Here is some information about SharePoint image columns (mentioned by Rob_Elliott) which might help you:
- SharePoint Online: All you need to know about New Image column type
- Download Image from SharePoint Image column using JSON formatting
Please consider giving a Like if my post helped you in any way.
