Display a picture column as a circle
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
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.
- This format can be applied to a Picture column
|1.0||March 21, 2018||Initial release|
|1.1||August 20, 2018||Updated schema|
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.
This template is included in the Column Formatter webpart.