BuddyPress.org

WordPress comes with jQuery rolled in so therefore does BuddyPress. You can see how to safely add scripts here: https://codex.wordpress.org/Function_Reference/wp_enqueue_script

If the avatar cropping isn’t working though the first step would be to check and see if there are any plugin conflicts. Deactivate all plugins then if that doesn’t work set the theme to default to test. A link maybe to your site if that is possible could help track down something should the above not work.

@nirok thanks for posting the solution for your installation. This issue has started cropping up lately with some installs with different soutions for some like reinstalling WP/BP.

You need to explain what page you are referring to, avatars are displayed across many pages and most can have their size passed through as args.

Asking people to login to your site isn’t really going to help.

You can define constants that BP will use as crop sizes but will also re-size existing avatars, results will vary though depending on original size.

In bp-custon.php (create file if not existing in ‘plugins’ folde) add:
`
define( ‘BP_AVATAR_THUMB_HEIGHT’, 150 );
define( ‘BP_AVATAR_THUMB_WIDTH’, 150 );
define( ‘BP_AVATAR_FULL_HEIGHT’, 250 );
define( ‘BP_AVATAR_FULL_WIDTH’, 260 );
`
depending on which type you want to resize.

If you want finer control then you need to id the page in question and someone can tell you how to modify.

I did cover the image header question in the other thread – no I didn’t copy the code in to the thread as – in all honesty – stating “copy this ‘named’ function” ought to be sufficient to get started with.

I’ll now copy the function I referenced originally – you need to copy this into your child theme functions file, this function will alert BP not to run it’s original version and allows you to manipulate the rulesets that are created for custom headers.

`
function bp_dtheme_header_style() {
global $post;

$header_image = ”;

if ( is_singular() && current_theme_supports( ‘post-thumbnails’ ) && has_post_thumbnail( $post->ID ) ) {
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), ‘post-thumbnail’ );

// $src, $width, $height
if ( !empty( $image ) && $image[1] >= HEADER_IMAGE_WIDTH )
$header_image = $image[0];

} else {
$header_image = get_header_image();
}
?>

#header { background-image: url(); }

#header h1, #header #desc { display: none; }

#header h1 a, #desc { color:#; }

<?php
}
`

Now in the other thread I explained how to adjust the image dimensions by setting the define(‘HEADER_IMAGE_WIDTH’, 400) that will be displayed on the dashboard settings page and that represent the sizes the image will size and crop to, so you should still have that aspect in place.

If you leave the BP default layout unchanged then the header element width is likely wider than your background image ( the header width is stated in the stylesheet, the background image is set from the embedded styles in the code above) and that background image will repeat – but we went over that on the other thread, with the code above you can now add the required properties to prevent that.

Now code does need to be copied carefully and any stray code that may be causing issues might still affect things. Headers already sent errors have a number of reasons and are not necessarily easy for us to diagnose, I explained one possible cause but only you can determine if that is a reason.

On this issue of instruction; as I have said and now mercime this is a volunteer support forum, we are not obliged to provide absolute instruction we attempt to help and guide, also when one is a web dev professional there will be a level of expertise expected in general terms regarding coding experience. You are attempting to customise buddypress past what it offers in the default so you must expect certain aspects of doing that to be less than utterly idiot proof and there are aspects of BP that many of us struggle with.

In effect, you changed the site url/moved WP, I hope you backed up DB and server files before moving
– https://codex.wordpress.org/Changing_The_Site_URL specifically https://codex.wordpress.org/Changing_The_Site_URL#Changing_the_URL_directly_in_the_database
– https://codex.wordpress.org/Moving_WordPress

In some cases, the issue would be resolved by adding this to your wp-config.php file
`define( ‘WP_HOME’,’http: //mysite.com’ );
define( ‘WP_SITEURL’,’http: //mysite.com’ );`
change http://mysite.com to your actual domain name

Congrats on fixing the issue – although what you did makes no sense to me.
It would seem that your users can now upload 25 MB avatars.

Post your bp-custom code re full-size and crop tool.

Did you ever try a png ?
That would let you know if it’s a compression issue or something else.

My complete guess is that the images are being downsized prior to cropping and then expanded to your dims which is causing pixelation.

Avatars are usually square.
The cropping tool only does squares – at least on all my installs.

Try defining a square size and check the quality.

Try a png to check quality.

If you want rectangular avatars, you’ll probably need to make changes to core files.

How about when you upload a large image to your post, do you get the large, medium and small images as choice?

Using Firebug can do it..
It is an addon for Firefox. (and Chrome too)

VeeBee

This fault can also be caused from plugins which have css code.
ie img{height: auto; max-width: 100%;}

This will cause issues to the cropping as well.

I have been tinkering with Responsive Templating, and that is a problem I battled for several hours with, until I found the reason causing the additional css, and then added my own css to my child template to solve the problem.
#avatar-upload-form img {max-width: none;}

VeeBee

Do you know how to check your web browser’s console for any javascript errors or warnings? This is usually some other’s plugin’s javascript loading at the wrong time, breaking BuddyPress.

I’ve seen this twice happen and once it was due to a scripting clash and the other time was due to using older versions of files than the BuddyPress being used.

Can I just get a clarification of what BuddyPress version you are using and if the theme you are using (even if custom) has been updated for that? Also, if possible as a ‘sanity check’ could you test using the default BuddyPress theme? Just so we have a baseline.

>members posting stuff too

It’s tricky on mobile devices, but doable.
You’ll want to use the BP mobile theme for those or build your own.

Apple Safari doesn’t allow uploading, so you have to use a workaround like Aurigma Up.
@modemlooper says he built an app that does the same thing and he’s considering releasing an unbrandable version with a site license – I for one sure hope he does.

Android allows uploads but things like the avatar crop tool won’t work, afaik.
We built a custom avatar upload page with auto-crop for Android as part of our custom mobile theme.

Hopefully you’re lucky enough to have a client that actually understands what is involved when they say they want a ‘facebook’.

We use Aurigma Up on a custom mobile page for iPhone/iPad. Works great. Uploads to your server.
Then use bp_activity_add() – you should be able to adapt this example.
http://bp-tricks.com/snippets/adding-a-new-activity-stream-entry-when-a-user-changes-his-avatar/

For Apple – you need to check orientation using exif_read_data

For Android – you don’t need it for uploads – but the Avatar crop tool doesn’t work, so we did a custom page for that which includes basic auto-crop.

For both Android and Apple, we use this lib for rotation, thumbnails, resizing and cropping.
https://github.com/masterexploder/PHPThumb/wiki/Basic-Usage
Why not use WP methods? This lib gives us more control and better results.

Note: we don’t use BP Mobile, so there is probably a better way if you do use it.