Page 1 of 2

Round avatars

Posted: Wed Nov 28, 2018 9:25 pm
by bennybernaer
Website: https://www.zelfbeschadiging.be
phpBB: 3.2.4
Styl: Milk

How do I get round avatars on my forum?

Re: Round avatars

Posted: Wed Nov 28, 2018 9:42 pm
by david63
If I am not mistaken that is a "paid for" style therefore you would need to ask the style developer.

Re: Round avatars

Posted: Wed Nov 28, 2018 10:21 pm
by bennybernaer
I did, but they say quite often "it is not possible, but I have already found it myself, I think?

Code: Select all

.postprofile span .avatar {
	display: block;
	max-width: 100%;
	text-align: center; /* gravatar fix */
	margin: 0 auto;
	border-radius: 75px;
}

/* Profile used on view-profile */
.profile-avatar img {
	max-width: 100%;
	border-radius: 75px;
}

.mchat-avatar a, .mchat-avatar img {
	display: block;
    border-radius: 25px;
}
Image

Image

Image

Re: Round avatars

Posted: Wed Nov 28, 2018 10:32 pm
by Lumpy Burgertushie
looks good. I doubt that christian ( the author of the Milk style ) would have told you it is impossible.
but either way, you did a good job figuring it out.


robert

Re: Round avatars

Posted: Fri Nov 30, 2018 3:05 am
by Hanakin
you can easily round any image by applying a border-radius of 50% to it in css
see my avatar in the new style mockup https://codepen.io/hanakin/pen/gzqMwx?editors=1100

Re: Round avatars

Posted: Fri Nov 30, 2018 3:01 pm
by Christian 2.0
It's technically possible, but not recommended unless you force avatars to be square.

Rectangle avatars with a 50% border-radius will appear oval, eg:

https://gyazo.com/14c5bf924a8c228b564a200f263465ce
https://gyazo.com/94acd374937ee89e35f341af86ed6942

Your users won't appreciate being forced to use square avatars

Re: Round avatars

Posted: Sat Dec 01, 2018 10:35 pm
by Talk19Zehn
Helllo Christian 2.0, I see exactly that result. Accordingly, 4:3 (..) or consistently represent rectangles as square? So phpBB would have to improve in my opinion. An other way (one example) language -de-

Code: Select all

https://www.guru-20.info/quadratische-bilder-mit-css-erzeugen/
I'm wondering also which avatar is cropped at what point figuratively de facto (phpBB-3.2.4) Best regards

Re: Round avatars

Posted: Tue Dec 04, 2018 1:19 am
by Hanakin
and forcing square avatars is not a thing everywhere on the internet? They will have to get over it eventually

Re: Round avatars

Posted: Sat Dec 08, 2018 12:11 am
by Christian 2.0
Hanakin wrote:
Tue Dec 04, 2018 1:19 am
and forcing square avatars is not a thing everywhere on the internet? They will have to get over it eventually
The issue isn't whether user avatars appear as squares, circles or any other shape. Rather, how every day users source them. The only way to achieve rounded avatars consistently in phpBB at the moment, is to set the min/max size as the same value. Eg: 120 x 120px - then apply the 50% border radius.

It's not good usability (especially in a mobile-first generation) to ask every day end users to search google for images of specific dimensions, or ask them to create their own.

Elegent square avatars in phpBB is only feasible (without hackery) if UI scaling and cropping is built into the core, eg: https://gyazo.com/dfa64ad0ab7bb868f3a6e1f146769fc9

Re: Round avatars

Posted: Sat Dec 08, 2018 12:13 am
by Christian 2.0
Talk19Zehn wrote:
Sat Dec 01, 2018 10:35 pm
Helllo Christian 2.0, I see exactly that result. Accordingly, 4:3 (..) or consistently represent rectangles as square? So phpBB would have to improve in my opinion. An other way (one example) language -de-

Code: Select all

https://www.guru-20.info/quadratische-bilder-mit-css-erzeugen/
I'm wondering also which avatar is cropped at what point figuratively de facto (phpBB-3.2.4) Best regards
Interesting workaround. I'll explore this further, thanks for sharing :)

Ideally though CSS hacks shouldn't be used to remedy gaps in UX (above)

Re: Round avatars

Posted: Thu Dec 13, 2018 1:37 pm
by Hanakin
thats not actually a hack, its a new spec https://www.w3schools.com/css/css3_object-fit.asp

Re: Round avatars

Posted: Thu Jun 06, 2019 10:30 am
by Kattnienika
Hello,

I have a question. How I can do this in UCP -> Avatar setting? I look to css file, but for avatar is used only tag img. :-(

Re: Round avatars

Posted: Thu Jun 06, 2019 4:35 pm
by Lumpy Burgertushie
you can't do it in the control panel.
it has to be done in the css files as above.
what style are you using? what css file and exactly what css are you looking at in that file?


robert

Re: Round avatars

Posted: Thu Jun 06, 2019 11:38 pm
by spaceace
i don't think it would be very hard to make an extension for this as there are a few different ways to make them round. but keeping the aspect ratio looking right when having square and rectangle images will be the only thing that will take a little time

Re: Round avatars

Posted: Fri Jun 07, 2019 5:59 am
by Kattnienika
Hello,

I used style MyInvision. I can do round avatar in UCP when i change css file common.css:
Original

Code: Select all

img {
	border-width: 0;
}
Updated

Code: Select all

img {
	border-width: 0;
	border-radius: 75px;
}
But i donn´t know if img tag is used only for this avatar or if is used in another place.