Centering Avatars

14 Sep 2015

On my profile, my avatar is in the square perfectly. But when it is reduced on a friends list or on a following list, it is off center. Is there a way to center one's avatar or does it need to be a certain size to always appear centered?

15 Sep 2015

Quote by wonderway
On my profile, my avatar is in the square perfectly. But when it is reduced on a friends list or on a following list, it is off center. Is there a way to center one's avatar or does it need to be a certain size to always appear centered?

The problem is avatars come in all shapes and sizes. In order that the friends list looks semi reasonable, we create a 100px x 100px box around each avatar and crop (from top left). For some like your own it will remove some of the detail from the original image.

If anyone has a FB account and would like to tell me how they do it, I would love to know smile

15 Sep 2015

Quote by gav

The problem is avatars come in all shapes and sizes. In order that the friends list looks semi reasonable, we create a 100px x 100px box around each avatar and crop (from top left). For some like your own it will remove some of the detail from the original image.

If anyone has a FB account and would like to tell me how they do it, I would love to know

Thank you for your response. Would it appear better if I resized it to 100x100? And, on FB you can drag the square over the area you would like to appear in it. :)

15 Sep 2015

Quote by wonderway

Thank you for your response. Would it appear better if I resized it to 100x100? And, on FB you can drag the square over the area you would like to appear in it.

So here's what I can do from a css perspective. I can stretch all avatars to fill a 100px square as below (note writergirl and snowangle'a avatars)

Or I can keep the aspect ratio but fill up the horizontal space

Its a shame that avatars aren't always the same nice shape sad

15 Sep 2015

Quote by gav
So here's what I can do from a css perspective. I can stretch all avatars to fill a 100px square as below (note writergirl and snowangle'a avatars)

I personally like this one better.

15 Sep 2015

I'd fill up the 100 x 100 space entirely. Then it's up to the member to change it if it looks odd.

The reason being, it should look uniform. This doesn't look good at all:

15 Sep 2015

Quote by nicola
I'd fill up the 100 x 100 space entirely. Then it's up to the member to change it if it looks odd.

The reason being, it should look uniform. This doesn't look good at all:

I agree ... they should all take up the same amount of space to look uniform

15 Sep 2015

I like the 100 px idea as well.

░P░U░S░S░Y░ ░I░N░ ░B░I░O░

15 Sep 2015

I like how it looked before... I think the stretched out look and the look with the gaps both look worse. Stretched out/warped pics are bad design.

15 Sep 2015

Every site you go to like FB, Goodreads etc, fill up all the white space, and make the avatars of a uniform size. It's common sense to not want portrait and landscape avatars throwing the site design out all over the place.

It doesn't matter to you, you're a cartoon, and can be made into any shape!

15 Sep 2015

Quote by nicola
I'd fill up the 100 x 100 space entirely. Then it's up to the member to change it if it looks odd.

The reason being, it should look uniform. This doesn't look good at all:

I'm with Poppet and Nic here. It should be 100x100. It should look neat, not thrown together.

†Jinxy Approved†

15 Sep 2015

Quote by Magical_felix
I like how it looked before... I think the stretched out look and the look with the gaps both look worse. Stretched out/warped pics are bad design.

I actually agree with Magical_felix: I much preferred the way it looked before. Out of the 15 friends shown on my profile, 9 of them now have distorted avatars; it especially looks weird when you look at them as a bunch and the great majority of them are warped with bizarre proportions. It almost makes me feel sick actually, and I'm very serious here.

My personal order of preference is: 1) the way it was before, 2) keep aspect ratio and fill horizontal space, 3) stretch to fill the entire space

15 Sep 2015

Quote by nicola
Every site you go to like FB, Goodreads etc, fill up all the white space, and make the avatars of a uniform size. It's common sense to not want portrait and landscape avatars throwing the site design out all over the place.

It doesn't matter to you, you're a cartoon, and can be made into any shape!

Looks like too many burritos for felix the cat there.

I just liked how it would crop odd sized avatars before. You could hardly tell they were cropped unless it was your own or one you see all the time.

Like SereneProdigy says... More than half the avatars look stretched out.

Making felix the cat look fat is fine but I do object to making the girl avatars look fat... If I wanted to look at fat chicks I'd go to walmart.

15 Sep 2015

Quote by gav

So here's what I can do from a css perspective. I can stretch all avatars to fill a 100px square as below (note writergirl and snowangle'a avatars)

Or I can keep the aspect ratio but fill up the horizontal space

Its a shame that avatars aren't always the same nice shape

I do think the entire fill of the area is the best way to go. Thank you for giving me the options, though. I had not realized it was so involved. smile

16 Sep 2015

It now looks a lot better on the bottom of the front page.

With what MF and SP have mentioned, instead of distorting the image, perhaps the best option, instead of lots of complicated coding, is either:

a) Members have to upload a square image as their avatar.

b) Members can upload any shaped image they like for their avatar, but a square selection tool is superimposed on it, so they can choose which square area of the image to use as their avatar. That should be able to be resized to any size square.

Anything else would be too complicated to code I think.

16 Sep 2015

Quote by nicola
b) Members can upload any shaped image they like for their avatar, but a square selection tool is superimposed on it, so they can choose which square area of the image to use as their avatar. That should be able to be resized to any size square.

That would be the better option, in my opinion.

Concerning option a), the main issue with it would be that members who don't know how to crop images would be extremely limited in their choice of avatars; they'd obligatory have to search for square images, which can be quite a major nuisance. The great majority of pictures have a rectangular shape (either portrait/landscape) when you search for them over the web.

Say a member would love to use this image as his avatar:

That'd be quite a letdown to learn that he can't use it and must use a completely different image, just because he doesn't have access to the proper software to crop it. Option b) would somehow provide an 'internal cropping tool', which would be a lot more fair and convenient.

And members would also be allowed to frame their avatars exactly how they want to, without an automated code doing it for them with weird proportions/positions. I actually wouldn't be surprised at all to learn that members who currently use rectangular avatars only do so because they don't know how to crop images. Option b) could also provide an easy solution to that, which I'm sure would be appreciated by many.

16 Sep 2015

Quote by nicola
b) Members can upload any shaped image they like for their avatar, but a square selection tool is superimposed on it, so they can choose which square area of the image to use as their avatar. That should be able to be resized to any size square.

This option gets my vote.

16 Sep 2015

I, too, like the (b) option.

17 Sep 2015

Quote by wonderway
I, too, like the (b) option.

Me too. It's so dirty.

18 Sep 2015

Quote by nicola
It now looks a lot better on the bottom of the front page.

With what MF and SP have mentioned, instead of distorting the image, perhaps the best option, instead of lots of complicated coding, is either:

a) Members have to upload a square image as their avatar.

b) Members can upload any shaped image they like for their avatar, but a square selection tool is superimposed on it, so they can choose which square area of the image to use as their avatar. That should be able to be resized to any size square.

Anything else would be too complicated to code I think.

Option B is what Facebook, Twitter, and other such sites do to allow the user to set their image or avatar to the way they want. Gav does so much for us, let's not over tax him.

Option B all the way!!!

20 Sep 2015

Thank you, Gav. And, thanks to all for the replies.

24 Sep 2015

wonderful information by all .. sure do appreciate it ..and ww thank you for posing the question here

9 Oct 2015

I think the distortion that is occurring now with some of the avatars on the Friends and Followers lists is just awful, especially when it involves someone’s personal photo.

I’ve read all the technical explanations in this thread – but the problem only started a few weeks ago. Before that, no photos were distorted and yet most of the avatars were able to appear in uniform squares. (It didn't look like either of the two options shown above.) Some photos were slightly cropped, but at least they looked correct and normal. In fact, avatars are still displayed in the old, undistorted way in the squares of the “online now” pages. Why do many of them have to be stretched out or squashed now on the Friends and Followers lists?

It's creepy looking.

10 Oct 2015

Quote by Lunafalls
I think the distortion that is occurring now with some of the avatars on the Friends and Followers lists is just awful, especially when it involves someone’s personal photo.

I’ve read all the technical explanations in this thread – but the problem only started a few weeks ago. Before that, no photos were distorted and yet most of the avatars were able to appear in uniform squares. (It didn't look like either of the two options shown above.) Some photos were slightly cropped, but at least they looked correct and normal. In fact, avatars are still displayed in the old, undistorted way in the squares of the “online now” pages. Why do many of them have to be stretched out or squashed now on the Friends and Followers lists?

It's creepy looking.

Really, the best way to fit within the current display is to take whatever image you want to use and crop it to 100x100, or whatever size square you have to in order to show the image you want. That way, stretching won't be necessary. It's a simple and successful solution.

14 Oct 2015

The stretching doesn't look very good but then neither does the stacking of irregular shapes.

Cropping and centring the image might be better - there are plenty of jquery plugins that can do this for you. Another alternative might be to use empty 100v100 div tags with the image as a tiled background rather than using an img tag.

Warning: The opinions above are those of an anonymous individual on the internet. They are opinions, unless they're facts. They may be ill-informed, out of touch with reality or just plain stupid. They may contain traces of irony. If reading these opinions causes you to be become outraged or you start displaying the symptoms of outrage, stop reading them immediately. If symptoms persist, consult a psychiatrist.

Why not read some stories instead

NEW! Want a quick read for your coffee break? Why not try this... Flash Erotica: Scrubber