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.
Go ahead and upload a photo, ideally of a headshot.
Step 2: Crop the Image
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.
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.
Step 4: Set the Border Radius to 100%
Find the "Padding, Margin, and Border" options in the block sidebar options.
Open up the panel and find Border Radius.
Type in 100%.
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.
We'll be setting a width and height of 250px and a "cover" for object-fit.
Conclusion
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%.
Last updated
