Squarespace Tip: How To Create Circular Images

 

This is my very first 'Squarespace Tip' post. I'm hoping that this post will at least help one person who is trying to create circular images in Squarespace. There are two ways to go about creating circular images: 

1.  Edit the photo directly using Adobe Photoshop or Adobe Illustrator.  

2. Add custom CSS to edit the photo.  

In this tutorial, I will be demonstrating option #2, adding custom CSS. It's a good idea to use custom CSS when editing a photo if you want to make the same edit to multiple photos, or if you don't have photo editing software. Here is my step-by-step guide: 


How to Create Circular Images Using Custom CSS in Squarespace

1. Upload your photo to your website.

2. Click on the EDIT button below the photo. 

 
 

3. Choose the crop option.
 

 
 

4. Crop your photo into a square by using the preset square option. If your photo is not a perfect square, your 'circle' will end up being an oval.    

 
 

5. Save your edited image and go to your live or trial website using Google Chrome.  

6. Add the Squarespace Collection/Block Identifier extension to the browser. 

7. Once added, the extension icon looks like a B in a black box.  Click on the icon to display the collection and block IDs. 

 
 
 
 

8. Click on the Block ID associated with the image to automatically copy it to your clipboard.
Note: If you want all images on that page to be circular, use the Collection ID instead.

9. Go back to the admin side of your website and locate the Custom CSS editor (Design-->Custom CSS).

10. Paste the Block ID in the editor and add the following code: 

 
#block-id-goes-here img{
    border-radius:50%;
}
 
 

11. Press save! 

Let me know of any other Squarespace tips you'd like to see in the comments below. 

-Lauren