Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
picture-roundimage-format.json
screenshot.png

README.md

Display a picture column as a circle

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.