cropping images to a circle
Square images cropped to a circle
Images must be cropped to a square for this to work.
Add the .circular class to the image element itself to crop it to a circle.
<img class="circular" src="/assets/images/examples/example-square.jpg" alt="Example image.">
Thumbnail images cropped to a circle
Thumbnail images from the People tool will not be square. To crop these to a circle, they must first be wrapped in a div that is equal to or less than the width of the image. Then you need to wrap the image in another div using the circular-thumbnail class.
<div class="span-2">
<div class="circular-thumbnail">
<img src="http://apps.cehd.umn.edu/people/Headshot/LochS-2007.jpg" alt="Example image.">
</div>
</div>
<div class="span-10">
<p>This class is designed to work with our thumbnail images from the people tool.</p>
</div>