How can I create a circular image format within an image block?

Hello,

My question is regarding the use of different image shapes within an image block. How can I create a circular image format?

If it helps, the url with which I am currently working is https://cauri-jaye-cwsu.squarespace.com/config#/pages|/our-story-1

Thank you,Ryan

Hi, did anyone resolve this one? I am using Charlotte template which includes nativelly circle image blocks, but as soon as I change the image I loose the circular shape to rectangular...Thanks in advance

Are the images not preprocessed to be circular on a transparent background in PNG format?

No I don't think so, the template images frame seem to be rectangular... Is there any code to include in CSS so that I can control the border of the images (like border radius)I would like to change more specificaly the summary images (a solution for a specific image would be appreciated though)

Yes, a 50% border radius will produce a circle on a square image, I think.

border-radius: 50%;

Thanks silvabokis for your reactivity!I have done a bit of research and so far I have the job half done : it shows oval images, therefore in order to have circles, the initial image must be square...Here is the code I ended up with :

.summary-thumbnail img{ 
position: absolute; 
top: 0 !important; 
left: 0 !important; 
width: 100% !important; 
height: 100% !important; 
border-radius: 100% !important
}

Does anyone know how to force even rectangular photos into perfect circular shapes (not turning oval when the resolution is changing)?Thanks in advance

If you want to apply the setting to all the summary blocks across your site, I believe this CSS will accomplish it. You will need to add it to your custom CSS section and then on each thumbnail block you will need to select "1:1 square" in the aspect ratio (click on "edit summary" and then go to "layout" tab):

.summary-thumbnail img{ 
position: absolute; 
top: 0 !important; 
left: 0 !important; 
width: 100% !important; 
height: 100% !important; 
border-radius: 100% !important
}

If you want to limit this code to a particular page, I suggest to add it to that particular page's Page Settings > Advanced > Page Header Code Injection, but you will have to add

<Style>
.summary-thumbnail img{ 
position: absolute; 
top: 0 !important; 
left: 0 !important; 
width: 100% !important; 
height: 100% !important; 
border-radius: 100% !important
}
</style>

If anyone thinks about an easyer way, you are very welcome.

has anyone been able to do this. I would also like to make some of my image blocks show a round image rather than square

has anyone been able to do this. I would also like to make some of my image blocks show a round image rather than square

I´ve tried this but I cant make it work. Anyone else who had better luck?I also know too little about css so in my ignorance I thought that maybe the radius should be set to 50%!? Like this:

<Style>
.summary-thumbnail img{ 
position: absolute; 
top: 0 !important; 
left: 0 !important; 
width: 100% !important; 
height: 100% !important; 
border-radius: 50% !important
}
</style>

Cause at 100% it does not change a thing.

Do you have to set the site in developer mode maybe?

//Nobeginnersluck

This worked for me - I'm using the summary block, set to carousel and the product thumbnail image is square with image ratio 1:1. If I use an image that isn't a perfect square, the picture distorts.

This worked for me - I'm using the summary block, set to carousel and the product thumbnail image is square with image ratio 1:1. If I use an image that isn't a perfect square, the picture distorts.

Thank you very much Roppo! That worked great : D

Hi there.

I tried inserting the code in the custom CSS section and it worked. But when I tried adding it to a particular page, nothing happened even if the image ratio is already 1:1.

Any other suggestions would be great. Thanks in advance!

I tried those codes, it does force the picture into a circle...but it seems like it squishes my thumnail pictures inward and makes it look distorted...as opposed to keeping the picture as is, and cropping a circle around the orignial picture? I wonder if anyone else experience this. Thank you!