SharePoint List Formatting
Back to column formats
Column formattingSharePoint 2019SharePoint Online

Display a Picture Column in a Circle

This sample applies styles to a parent div element and a child img element to show a picture column in a circle.

Get this format View on GitHub

Shared by Chris Kent
Updated Aug 20, 2018

Display a Picture Column in a Circle formatting preview
Sample preview · View original image

Copy. Apply. Make it yours.

Get this format

1 definition

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

Column formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%"
      },
      "children": [
        {
          "elmType": "img",
          "attributes": {
            "src": "@currentField"
          },
          "style": {
            "position": "relative",
            "top": "50%",
            "left": "50%",
            "width": "100%",
            "height": "auto",
            "margin-left": "-50%",
            "margin-top": "-50%"
          }
        }
      ]
    }
  ]
}
View sourceLink to this definitionpicture-roundimage-format.json

From the contributor

How to use this sample

Summary

This sample applies styles to a parent div element and a child img element to show a picture column in a circle.

The size can be easily adjusted by changing the default value of 32px for both the width and height style attributes on the parent div.

You can also adjust the border-radius value of the parent div to change it from a full circle (50%) to a rounded rectangle (< 50%).

For best results, images should be square.

screenshot of the sample

View requirements

  • This format can be applied to a Picture column

Sample

Solution Author(s)
picture-roundimage-format.json Chris Kent

Version history

Version Date Comments
1.0 March 21, 2018 Initial release
1.1 August 20, 2018 Updated schema

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

This template is included in the Column Formatter webpart.