How to Create a Circular Image
This how-to will show you how to create a circular image
Last updated
Was this helpful?
This how-to will show you how to create a circular image
Last updated
Was this helpful?
To create a circular image in photo block, it's recommended to upload the image, crop it, and then adjust the photo settings. Let's do just that to create a circular image.
First, insert the photo block.
Go ahead and upload a photo, ideally of a headshot.
Click on the "Crop" option in the block toolbar.
You'll be taken to the crop screen.
Click on the Aspect Ratios dropdown to select a Square aspect ratio.
Go ahead and resize the crop area and when finished, click on the "Apply Crop" button.
To bring out the full thumbnail, we must set the image size to full. You can adjust these in the sidebar options for the block.
Find the "Padding, Margin, and Border" options in the block sidebar options.
Open up the panel and find Border Radius.
Type in 100%.
To make the image smaller, let's give a width and height of 250px. You'll find the sizing under the "Container Sizing" panel in the block sidebar options.
We'll be setting a width and height of 250px and a "cover" for object-fit.
You're now able to preview the image on the frontend.
In this "How To" it was demonstrated how to create a circular image. It involves cropping the image, setting an explicit size, and setting the border radius to 100%.
