[RC] Round Avatars

A place for Extension Authors to post and receive feedback on Extensions still in development. No Extensions within this forum should be used within a live environment!
Scam Warning
Forum rules
READ: phpBB.com Board-Wide Rules and Regulations

IMPORTANT: Extensions Development rules

IMPORTANT FOR NEEDED EVENTS!!!
If you need an event for your extension please read this for the steps to follow to request the event(s)
User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

[RC] Round Avatars

Post by spaceace » Mon Jun 10, 2019 11:05 pm

Extension Name: Round Avatars
Author: spaceace

Extension Description: will make avatars appear to be round
Extension Version: 0.0.1-dev

Screenshots: Image

Demo URL: http://www.round-avatars.livemembersonl ... hp?f=2&t=1

Extension Download: roundavatars.zip
Last edited by spaceace on Sat Jul 06, 2019 7:56 pm, edited 5 times in total.

igorbond
Registered User
Posts: 104
Joined: Sun Mar 24, 2013 5:54 pm

Re: [DEV] Round Avatars

Post by igorbond » Tue Jun 11, 2019 9:20 pm

:!:
Image

User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Sat Jun 15, 2019 1:08 pm

just a note for anyone interested... this extension will be using the css property clip-path. i'm currently working on an issue with gravatar images not being rounded due to the .avatar class being removed by the core but all others work fine including animated avatars. also don't matter if the image is square, rectangle, portrait, landscape, etc. this also might not work with all browsers. so if it don't work on your browser and you want this, please update to a modern browser that supports it ;)

fagbutlil
I've Been Banned!
Posts: 77
Joined: Wed Mar 07, 2018 10:56 pm

Re: [DEV] Round Avatars

Post by fagbutlil » Sat Jun 15, 2019 9:46 pm

Why not just use this border-radius: 100%; ?

Image

User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Sun Jun 16, 2019 1:09 am

fagbutlil wrote:
Sat Jun 15, 2019 9:46 pm
Why not just use this border-radius: 100%; ?
because that doesn't work unless the image is square ;)

first post updated with a download link.

this works on all images i could find...

square
rectangle
round
animated
uploaded
remote
gravatar
gallery

fagbutlil
I've Been Banned!
Posts: 77
Joined: Wed Mar 07, 2018 10:56 pm

Re: [DEV] Round Avatars

Post by fagbutlil » Sun Jun 16, 2019 1:38 am


User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Sun Jun 16, 2019 3:31 pm

fagbutlil wrote:
Sun Jun 16, 2019 1:38 am
;) https://css-tricks.com/the-shapes-of-css/ for next release.
this is going to stay simply round avatars. if people want different shaped avatars then that will require a different extension which would not be very hard to make as css has so many options now

Holger
Registered User
Posts: 1739
Joined: Tue Mar 12, 2002 3:54 pm
Location: Hannover

Re: [DEV] Round Avatars

Post by Holger » Tue Jun 18, 2019 6:11 am

So, the avatar is forced a round shape even if the avatar I upload "requires" a sqare shape by design? :D

User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Tue Jun 18, 2019 10:41 am

Holger wrote:
Tue Jun 18, 2019 6:11 am
So, the avatar is forced a round shape even if the avatar I upload "requires" a sqare shape by design? :D
yes. this makes all avatars round with just css regardless of the actual shape of the image. it does not alter the actual image in any way

User avatar
jackennils
Registered User
Posts: 201
Joined: Mon Jun 01, 2009 7:48 pm

Re: [DEV] Round Avatars

Post by jackennils » Thu Jun 20, 2019 9:36 am

spaceace wrote:
Sun Jun 16, 2019 1:09 am
fagbutlil wrote:
Sat Jun 15, 2019 9:46 pm
Why not just use this border-radius: 100%; ?
because that doesn't work unless the image is square ;)
Why not just use:

Code: Select all

    border-radius: 50%;
    object-fit: cover;
    object-position: center center;

User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Thu Jun 20, 2019 11:15 am

jackennils wrote:
Thu Jun 20, 2019 9:36 am
Why not just use:

Code: Select all

    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
that will work only if the image is square like i said in what you quoted

not every user or forum will have a square image for their avatar. the css i use in this will work with any shape for the image and center it overall and show a circle

if it were as simple as just using border-radius, i would have ;)

User avatar
Luixx
Registered User
Posts: 6
Joined: Sun Jul 02, 2017 3:55 am

Re: [DEV] Round Avatars

Post by Luixx » Fri Jun 21, 2019 6:11 am

spaceace its extension is simple but with a cool result!

I found it very helpful ;)

Thanks for sharing

User avatar
jackennils
Registered User
Posts: 201
Joined: Mon Jun 01, 2009 7:48 pm

Re: [DEV] Round Avatars

Post by jackennils » Fri Jun 21, 2019 3:31 pm

spaceace wrote:
Thu Jun 20, 2019 11:15 am
jackennils wrote:
Thu Jun 20, 2019 9:36 am
Why not just use:

Code: Select all

    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
that will work only if the image is square like i said in what you quoted
No, it is also working when it's not a square.
You can stretch the actual image and put another container around it which then sets the border radius.

User avatar
spaceace
Registered User
Posts: 1857
Joined: Wed Jan 30, 2008 8:50 pm
Contact:

Re: [DEV] Round Avatars

Post by spaceace » Fri Jun 21, 2019 10:40 pm

jackennils wrote:
Fri Jun 21, 2019 3:31 pm
spaceace wrote:
Thu Jun 20, 2019 11:15 am
jackennils wrote:
Thu Jun 20, 2019 9:36 am
Why not just use:

Code: Select all

    border-radius: 50%;
    object-fit: cover;
    object-position: center center;
that will work only if the image is square like i said in what you quoted
No, it is also working when it's not a square.
You can stretch the actual image and put another container around it which then sets the border radius.
ok, here's the reason i went the way i did...

this is all that i use to modify the images with css in my extension

Code: Select all

img.avatar {
	clip-path: circle();
}

img[src*="gravatar"] {
	clip-path: circle();
}
super simple and works on every avatar image without having to stretch anything or having to wrap it in another <div> to make it work. no html added to anything thus making it so it should work with any style that ever gets made as long as it uses the .avatar class. for gravatar images i use img[src*="gravatar"] so it will apply to any url that has "gravatar" in it. i'm not saying that i'm a css master but i do know what i'm doing so hopefully this post will provide the answer for anyone else that has a suggestion for me to do it a different way ;)

fagbutlil
I've Been Banned!
Posts: 77
Joined: Wed Mar 07, 2018 10:56 pm

Re: [DEV] Round Avatars

Post by fagbutlil » Sat Jun 22, 2019 8:49 am

Circles seems a bit boring to me you could always play around with it some what.

Code: Select all

img.avatar {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

img[src*="gravatar"] {
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
maybe

Code: Select all

img.avatar {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

img[src*="gravatar"] {
	clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Post Reply

Return to “Extensions in Development”