Jump to content

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

Recommended Posts

  • 2 months later...
  • Replies 14
  • Views 32.3k
  • Created
  • Last Reply

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

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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


border-radius: 50%;

I'm Colin Irwin aka silvabokis.  I've been a Squarespace designer & developer since 2013. 
I remember when it was all wild prairies round these here parts. 🐃🤠
Advice I give on here is free, though I may sometimes post an affiliate link or promote something I've written.
That reminds me.. ..you might want to check out my
Squarespace template finder or have a look at my other Squarespace tips
Speaking of tips, 💲I've got a tip jar that you're welcome to throw a few quid into if you think I've helped you. 
If you're looking for a Squarespace developer 
Book a chat or Drop me a line - first meeting is always free  

 

Link to comment

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

Link to comment

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.

Link to comment
  • 5 months later...
  • 3 months later...

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

Link to comment
  • 1 year later...

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!

Link to comment
  • 8 months later...

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!

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.