Help with manipulating JSON code to show image instead of text

[Beth_Culpepper]

I'm in need of a little help with updating the JSON code to allow an image to show instead of text.

I am using the raw JSON from github to create this: List-Formatting/view-samples/chronological-items at master · pnp/List-Formatting · GitHub

I want to use this to, instead of showing a Description(multi-lines of text), I would like to show an image.

I don't have the knowledge or skill to pick apart the JSON code to make it do what I want and I'm hoping that someone here can help?  This is the JSON code for the original post:

{
  "$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",
                "attributes": {
                  "class": "ms-fontSize-14 ms-fontColor-neutralSecondary"
                },
                "style": {
                  "line-height": "1.5em",
                  "word-spacing": "1px",
                  "font-weight": "600",
                  "text-align": "=if(@rowIndex % 2 == 0, 'right', 'left')"
                },
                "txtContent": "[$Description]"
              }
            ]
          }
        ]
      }
    ]
  }
}

In my list, I have removed the Description column and added a Hyperlink column with the URL formatted as Picture and it is called Screenshot.  I would like this image clickable as well. 

Can anyone help?  THANK YOU!!!!

[#2 · Accepted solution]

@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)

[#3]

@Rob_Elliott 

Thanks Rob!  Which column type am I using?  

[#4]

@Beth_Culpepper 

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Principal Consultant, SharePoint and Power Platform WSP Global (and classic 1967 Morris Traveller driver)

[#5]

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!!!!

[#6]

@Beth_Culpepper 

Here is some information about SharePoint image columns (mentioned by @Rob_Elliott) which might help you:

1. SharePoint Online: All you need to know about New Image column type 
2. Download Image from SharePoint Image column using JSON formatting 

---

Please consider giving a Like if my post helped you in any way.