Round avatars

For support and discussion related to templates, themes, and imagesets in phpBB 3.2.
User avatar
bennybernaer
Registered User
Posts: 109
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Round avatars

Post by bennybernaer » Wed Nov 28, 2018 9:25 pm

Website: https://www.zelfbeschadiging.be
phpBB: 3.2.4
Styl: Milk

How do I get round avatars on my forum?

User avatar
david63
Registered User
Posts: 16720
Joined: Thu Dec 19, 2002 8:08 am
Location: Lancashire, UK
Name: David Wood
Contact:

Re: Round avatars

Post by david63 » Wed Nov 28, 2018 9:42 pm

If I am not mistaken that is a "paid for" style therefore you would need to ask the style developer.
David
Remember: You only know what you know and - you don't know what you don't know!
My CDB Contributions | How to install an extension
I will not be accepting translations for any of my extensions in Github - please post any translations in the appropriate topic.
No support requests via PM or email as they will be ignored

User avatar
bennybernaer
Registered User
Posts: 109
Joined: Tue Mar 22, 2011 9:53 pm
Contact:

Re: Round avatars

Post by bennybernaer » Wed Nov 28, 2018 10:21 pm

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

User avatar
Lumpy Burgertushie
Registered User
Posts: 66862
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Round avatars

Post by Lumpy Burgertushie » Wed Nov 28, 2018 10:32 pm

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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 913
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Round avatars

Post by Hanakin » Fri Nov 30, 2018 3:05 am

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

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Round avatars

Post by Christian 2.0 » Fri Nov 30, 2018 3:01 pm

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

User avatar
Talk19Zehn
Registered User
Posts: 410
Joined: Tue Aug 09, 2011 1:10 pm
Contact:

Re: Round avatars

Post by Talk19Zehn » 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
World Meteorological Organization (WMO) Weather - Climate - Water
phpBB Advent calendar: sought and found ..
BTW: My own works - phpBB - read more: ongray-design-de or look here: phpBB VT Theme
Style: Star Trek - StarTrekExcerpts - Fan-Board

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 913
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Round avatars

Post by Hanakin » 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

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Round avatars

Post by Christian 2.0 » Sat Dec 08, 2018 12:11 am

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

User avatar
Christian 2.0
Former Team Member
Posts: 4507
Joined: Wed Nov 04, 2009 11:16 pm
Location: UK
Name: Christian
Contact:

Re: Round avatars

Post by Christian 2.0 » Sat Dec 08, 2018 12:13 am

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)

User avatar
Hanakin
Front-End Dev Team Lead
Front-End Dev Team Lead
Posts: 913
Joined: Wed Dec 30, 2009 8:14 am
Name: Michael Miday
Contact:

Re: Round avatars

Post by Hanakin » Thu Dec 13, 2018 1:37 pm

thats not actually a hack, its a new spec https://www.w3schools.com/css/css3_object-fit.asp

Kattnienika
Registered User
Posts: 10
Joined: Fri May 10, 2019 9:30 am
Location: Hostinné
Contact:

Re: Round avatars

Post by Kattnienika » Thu Jun 06, 2019 10:30 am

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. :-(

User avatar
Lumpy Burgertushie
Registered User
Posts: 66862
Joined: Mon May 02, 2005 3:11 am
Contact:

Re: Round avatars

Post by Lumpy Burgertushie » Thu Jun 06, 2019 4:35 pm

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
I'm baaaaaccckkkk. still doing work on donation basis. PM your needs.

Premium phpBB 3.2 Styles by PlanetStyles.net

If a tree falls in the forest and nobody is there, does it make a sound?

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

Re: Round avatars

Post by spaceace » Thu Jun 06, 2019 11:38 pm

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

Kattnienika
Registered User
Posts: 10
Joined: Fri May 10, 2019 9:30 am
Location: Hostinné
Contact:

Re: Round avatars

Post by Kattnienika » Fri Jun 07, 2019 5:59 am

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.

Post Reply

Return to “[3.2.x] Styles Support & Discussion”