How to Create a Circular Image

This how-to will show you how to create a circular image

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.

Step 1: Upload the Photo

First, insert the photo block.

Photo Block Upload Interface

Adding the Photo Block

Go ahead and upload a photo, ideally of a headshot.

Upload a Headshot Image

Step 2: Crop the Image

Click on the "Crop" option in the block toolbar.

Crop Option in the Block Toolbar

Cropping a Photo

You'll be taken to the crop screen.

Crop Screen in Photo Block

Click on the Aspect Ratios dropdown to select a Square aspect ratio.

Choose the Sqaure Aspect Ratio

Go ahead and resize the crop area and when finished, click on the "Apply Crop" button.

Example of Cropping a Square Image

Step 3: Set the Image Size to Full

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.

Image Size Options for the Photo Block

Step 4: Set the Border Radius to 100%

Find the "Padding, Margin, and Border" options in the block sidebar options.

Padding, Margin, and Border Options

Open up the panel and find Border Radius.

Border Radius Options

Type in 100%.

Adding a 100% Border Radius

Step 5: Set an Explicit Width and Height, and Set the Image to Cover

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.

Container Sizing Options

We'll be setting a width and height of 250px and a "cover" for object-fit.

Setting Width/Height for the Image

Conclusion

You're now able to preview the image on the frontend.

Finished Cropped Circular Photo

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%.