Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Sign in to follow this  
Guest

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

Question

14 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0

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


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 0

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)

Share this post


Link to post
  • 0

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


border-radius: 50%;


Please hit LIKE to share your appreciation of posts that are helpful or useful. 

The like button is somewhere over thereover-there.jpg

Of course, Likes don't pay the bills.. If you're looking for a Squarespace Developer you can hire me here

Share this post


Link to post
  • 1

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

Edited by tariksfendla

Share this post


Link to post
  • 3

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.

Share this post


Link to post
  • 1

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Edited by Gimpan

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0
Guest

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Sign in to follow this  

×
×
  • Create New...