0

I have a SharePoint list with a column populated with pictures, however I would like to round the edges of said pictures.

I tried the solution I found in this blog post, but it's not working for me.

Here's the JSON:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
    "elmType": "div",
    "children": [
        {
            "elmType": "img",
            "attributes": {
                "src": "@currentField"
            },
            "style": {
                "width": "100px",
                "border-radius": "25px !important"
            }
        }
    ]
}

This does absolutely nothing to change the image CSS. If I could access the field to begin with that would be a start but I can't seem to find the correct JSON formatting to do so.

I have also tried without the !important and changing px to %, etc. Nothing so far.

1

As you are using Image column you have to change the JSON like below:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "attributes": {
        "src": "@currentField.serverRelativeUrl"
      },
      "style": {
        "width": "100px",
        "border-radius": "50%"
      }
    }
  ]
}

You will get image URL using @currentField.serverRelativeUrl.

Output:

enter image description here


Update from Comments:

You are applying formatting at wrong place.

  1. On format panel, select Format columns
  2. Choose your image column ("Photo" in your case) in Choose Column dropdown
  3. Paste the JSON below & Save.

enter image description here

7
  • Hello Ganesh. Thank you for your answer, however the issue remains. I don't know if this will help but here's the json from the Gallery version of the list: "src": "[$Photo.serverRelativeUrl]" I have tried @currentField.[$Photo.serverRelativeUrl] but also nothing
    – Ress
    Apr 9 at 11:59
  • If you are formatting the "Photo" column, then you don't need to mention the column name in JSON. You can directly access the column using @currentField. So, @currentField.serverRelativeUrl should work for you. Apr 9 at 12:14
  • And if you want to refer column by it's name. Make sure you are using correct internal name of your column in JSON. Apr 9 at 12:15
  • 1
    Check updated answer. It should work for you. Apr 9 at 13:20
  • 1
    Yep worked perfectly! Thank you!!
    – Ress
    Apr 9 at 14:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.