In this step-by-step tutorial, you'll discover how to turn a photo into the shape of a circle by using an HTML code. 


round-image.png


In order to achieve this look, it takes a two-step process:

  1. Upload and crop your photo to square
  2. Adding the HTML code to your text tab in a content editor


STEP 1. Upload & Crop 


add-crop-image.gif


Upload the image to your media file.

Even if the photo already exists in your media, upload a new copy because you're going to crop this image. If you cropped the original image you could the way this image looks on other pages that are also using the original image. Click Edit Image. 


To crop the photo...

Place your cursor over the image and select a spot to start cropping. Simply drag and drop the cursor in the shape of a square.

Next, go to Selection and enter the ratio 1200 x 1200, for example, to make it a perfect square. Depending on your image pixels, you may have to play around with it to get it right.


Select the crop icon in the left-hand corner. Click save. 


Leave the media file open in a separate tab or copy the image URL, because we will need the image URL for the next step. 

 


STEP 2. Copy & Insert HTML Code


HTML-Code-Round.gif


Copy the following HTML code (starting from < and ending with >) and paste it into the Text tab of your content section.


IMPORTANT: Do not edit any section of this code other than the section in red. It will break!


---------


<img class="wp-image-3117 aligncenter" style="margin-top: 0px; border-radius: 50%;" src="https://ampdemo.attractionmarketingproject.com/wp-content/uploads/sites/141/2018/02/image-e1518231520695-2.jpg" alt="FullSizeRender" width="280" height="280" />


---------


To replace the image with your cropped photo...

Return to your media file and copy the URL link to the image file. Replace your URL link in the code with the section highlighted in red with your new media URL link. 


Return to the Visual tab to verify that it worked. 


Update the page and view it to see the design in published or draft mode. 


Troubleshooting

If you do not crop the photo to a square, your image will turn out oval.