Current status of the Ning Platform is always available on the Ning Status Blog.

FORUM

Jacob asked how to do this and I had some code from a while back so here is the code to share.

What this does is remove the crop from the main avatar in the members profile page so you can set your own size for it. I have adjusted mine to 180px and you can see the difference by visiting my profile page here:

http://bizzssite.ning.com/members/JOHNBIZLEY

We need to add two bits of code.

Before we go any further I would like to mention the code to remove the crop was some code Sweet Potato had used in a previous tip which I edited for the profile page tip here. Thanks SP for the original code posted some time back.

The first code goes in your site and pages custom code end of page box.

<script>
//Remove Crop Of Profile Avatar
x$(document).ready(function() {
x$('.profileCoverArea-avatar img').each(function() {
    var profileImageSize = x$(this).attr('src');
    x$(this).attr('src', profileImageSize.replace(/\?width=\d+\&height=\d+\&crop=\d+\%\d+\A\d+/, ''));
});
});
</script>

And this next bit of code goes in your design studio custom css.

You adjust the width:180px to the size you want.

/* Profile Page User Avatar Size Adjustment */
.profileCoverArea .media-frame > .media-img{ max-width:100%!important }
/* This sets the size of the image */
.profileCoverArea-avatar .avatar-90{ width:180px }

That's it all done.

John :-)

You need to be a member of Ning Creators Social Network to add comments!

Join Ning Creators Social Network

Email me when people reply –

Replies

  • Nice Job!  i Like the idea and it looks  Great from mobile devices. i wonder if this can be possible  with the avatars that appears on the members inbox panel( the avatars look  very small)

  •  When I attempted this, my image came out in the shape of an oval. Did  I enter the code wrong?

    I put the one in Custom code page, end box and the one on the global CSS page.

    Is there another way to keep the circle shape but just increase the size?

    Thanks, Hannah.

    • Hi there!

      Since the way the images are displayed has been changed a bit the code should be adjusted a little.

      Instead of the .profileCoverArea-avatar .avatar-90{ width:180px }

      The following line should be used .profileCoverArea-avatar .avatar-90 { width:180px; height:180px!important; }

      Also I have to mention that we are working on the back end and teh avatars would be uploaded in other way really soon, so the script should be adjusted in the future as well.

      Best regards,

      Ning Team.

This reply was deleted.
 

Some interesting articles related to community management, digital marketing etc. could be found in our digest. Don't hesitate to leave a feedback so we would know that we should continue :-)

Latest Activity

Matthew Aukai Wright replied to Fabricio Giugni's discussion
Chat help
"I would love to be able to have the chat ping even when it is closed along with push notifications. "
10 hours ago
Kos replied to ⚡JFarrow⌁'s discussion
Tip N2 or N3: Customizable Multi-panel Hero Template For Driving Engagement
"How cool is that.  Thanks for sharing JF!"
10 hours ago
Matthew Aukai Wright replied to Bizz ( John )'s discussion
How To Make Your Feature, Add, Edit Buttons At The Top Of Pages Stand Out Better (Updated 08/01/17)
"Hey there. How can I add a rainbow background picture to the buttons? "
15 hours ago
Suzie Nielsen replied to Rowald's discussion
Ning not GDPR compliant
"new Question same Topic... what if I remove google analytics altogether... that's all I use... coul…"
22 hours ago
⚡JFarrow⌁ commented on Rosas † Negras's blog post Bar Skysa into 3.0
"Yes, skysa works.... you'll want to put it inside the Custom Code Footer box in 3.0... hope this he…"
yesterday
Fabricio Giugni replied to Fabricio Giugni's discussion
Chat help
"Hi,
   The only problem is that I can not make it work even if there is lot's of people. No one get…"
yesterday
Thisisbully replied to Fabricio Giugni's discussion
Chat help
"on mobile the chat notifications do not show "
yesterday
Gavin Brown replied to Kyryl_Ning_Support's discussion
Changes on facebook, and new instructions how the app should be set up
"Thanks for replying Anastasia!"
yesterday
Anastasia_Ning_Support replied to Cindy Dean Mccoy's discussion
Trouble tickets just sitting there
"Hi there!
It is true, that in terms of updates and new features, we are focusing on 3.0 platform, b…"
yesterday
Anastasia_Ning_Support replied to Fabricio Giugni's discussion
Chat help
"Hi there!
Thank you for checking once again and clarifying. It was made intentionally to leave memb…"
yesterday
Matthew Aukai Wright replied to Fire-Tech's discussion
3.0 Tip: Leave Network Button
"how can I make the button rainbow? "
yesterday
Anastasia_Ning_Support replied to Fabricio Giugni's discussion
Add Photos location problem.
"Hi there!
No, unfortunately, it is not possible to do so. As an example, we have added such button…"
yesterday
More…

Meanwhile, you can check our social media channels