BuddyPress Avatar Crop Problem

Going Nuts... lately i noticed that when people upload local avatars to BP site, the the thumbnail they crop is TINY, resulting in something like below image.... have replaced all css files of bpress, and any js files with originals.... where would this code below be "written" in Bpress or anybody know of similiar problems. I got the code below from the source of the page rendered...

<script type=&quot;text/javascript&quot;>
		jQuery(window).load( function(){
				onChange: showPreview,
				onSelect: showPreview,
				onSelect: updateCoords,
				aspectRatio: 1,
				setSelect: [ 50, 50, 231, 225 ]
			updateCoords({x: 50, y: 50, w: 231, h: 225});

		function updateCoords(c) {

		function showPreview(coords) {
			if ( parseInt(coords.w) > 0 ) {
				var rx = 120 / coords.w;
				var ry = 120 / coords.h;

									width: Math.round(rx * 462) + 'px',
					height: Math.round(ry * 450) + 'px',
									marginLeft: '-' + Math.round(rx * coords.x) + 'px',
					marginTop: '-' + Math.round(ry * coords.y) + 'px'

	<style type=&quot;text/css&quot;>
		.jcrop-holder { float: left; margin: 0 20px 20px 0; text-align: left; }
		.jcrop-vline, .jcrop-hline { font-size: 0; position: absolute; background: white top left repeat url( http://smeak.com/wp-content/plugins/buddypress//bp-core/images/Jcrop.gif ); }
		.jcrop-vline { height: 100%; width: 1px !important; }
		.jcrop-hline { width: 100%; height: 1px !important; }
		.jcrop-handle { font-size: 1px; width: 7px !important; height: 7px !important; border: 1px #eee solid; background-color: #333; *width: 9px; *height: 9px; }
		.jcrop-tracker { width: 100%; height: 100%; }
		.custom .jcrop-vline, .custom .jcrop-hline { background: yellow; }
		.custom .jcrop-handle { border-color: black; background-color: #C7BB00; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
		#avatar-crop-pane { width: 120px; height: 120px; overflow: hidden; }
		#avatar-crop-submit { margin: 20px 0; }
		#avatar-upload-form img, #create-group-form img, #group-settings-form img { border: none !important; }

  • greg_mcewan_marriott

    @aecnu - hi yep, i am also using the plugin User Avatar (http://wordpress.org/extend/plugins/user-avatar/) that allows the uploading of avatar from dashboard - this works fine, as in cropping etc.

    So what i did based on your comment, is disable that plugin... and nope it still does the same thing, (last night, I also re-installed WP, by copying via FTP and overwriting existing scripts).

    Could it have anything to do with Ultimate FB plugin, which pulls avatar from FB? I doubt it, because not all the users are using FB login on the site, and are experiencing the same problem, also when i try to change avatar of a group, the same problem.

  • greg_mcewan_marriott

    lol - ok disabled all plugins, i think has anything to do with imaging, no luck, problem remained.

    Then I switched to BP default theme, hoping that would fix it - no go, then thought maybe BP default theme is messed up, so switched to 3 other themes that do NOt rely on BP default theme and still no luck

    Other issue which I am sure is related is this (see pic) Avatars going all blocky

    Below my htaccess file just in case it sheds any light

    #Wordpress Multi site
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    # uploaded files
    RewriteRule ^files/(.+) wp-includes/ms-files.php?file=$1 [L]
    RewriteCond %{REQUEST_FILENAME} -f [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^ - [L]
    RewriteRule . index.php [L]
    #END WordPress Multi Site

  • aecnu

    Greetings Greg,

    Thank you for the additional input and details which are greatly appreciated.

    Your htaccess file looks absolutely pristine so the issue certainly isn't there.

    Your darn tootin correct that the graphic is being pix-elated.

    Below is a screen shot from my test production server and as you can see it is extremely clear.

    In addition, do you have the "upload image" button as shown in my screen shot below?

    Please advise.

    Cheers, Joe

  • greg_mcewan_marriott

    @aecnu tx for response mate.... yeppo button is present and accounted for.... am starting to think it is a permission error.... as i just tried to upload image via media drop and upload post normal WP way... and it sits on crunching forever, yet the image IS there when you cancel and go to media library...

    Could this be why the blocky images are showing? It cannot read the correct file, paths?.... (checked that - its correct) folder permissions?

  • greg_mcewan_marriott

    @aecnu ... yep folders are in wp-content/uploads/avatars and permissions are at 755 (recursive), Checked settings in BP Settings *see z01 pic below)

    One thing i forgot to mention is I am running Quick Cache - which probably could have an effect altho, i flush the cache (by hitting button on admin bar) and it is set to NOT cache dynamic pages for logged in users... but i see (see pic z02) this cache folder below each avatar/userid/ folder

    Why my "stock standard wp drag and drop uploader was working and crunching perfectly and suddenly not crunching anymore" boggles me... Could it be a jquery or java related maybe ajax problem?

    as for GD library on server, have no clue to be honest - how can i test that? But all i can say in defence it worked like a charm initially, unfortunately I am not sure as to when it stopped working,

  • aecnu

    Greetings Greg,

    Thank you for the additional input and the screen shots.

    I would suggest to deactivate the Quick Cache plugin and retest after clearing everything out.

    In your screen shot the tell tale cache folder is not at all present on any of my flawlessly working production sites, and I did check just to make sure I was not missing something.

    Please advise if this issue clears up after deactivating the caching plugin and clearing all cached content.

    Cheers, Joe

  • greg_mcewan_marriott

    @ aecnu - you are not going to believe this, despite reloading wordpess, and replacing all my buddypress files with originals, quickcache switched off, actually knocking off just about all plugins, removing my bp-custom.php file, taking th etheme back to native... it still is not working... I am totally baffled on this issue, almost surreal...

    I 777'd all folders in wp-content, redid htaccess a few times, still no go

    i checked server variables

    DocumentRoot /hsphere/local/home/****removed this
    ServerName   ******removed****
    RewriteEngine On
    RewriteCond %{QUERY_STRING} ^(%2d|-)[^=]+$ [NC]
    RewriteRule ^(.*) $1? [L]
    SetEnv TMPDIR /hsphere/local/home/***removed this****/tmp
    DirectoryIndex  index.php
    Use php_cgi_53
    OPTIONS  Indexes SymLinksIfOwnerMatch
    AllowOverride All

    Jcrop is causing an issue I am almost sure of it

  • aecnu

    Greetings Greg,

    Truly bizarre! The last things to check before I call in the big gun on this one will be if the GD library is installed and standard troubleshooting protocol.

    I have attached a file phpinfo in which you would want to download it, extract it, and then upload it to the root of your domain and then call it up in your browser using something like http://yourdomain.com/phpinfo.php

    And we want to see if GD exists - screen shot below.

    If not then we want to install it. If so last but not least, it is time to go into full blown trouble shooting mode because it appears there may be some conflict here and one way to find out conclusively.

    Standard plugin trouble shooting protocol - first to switch to the Twenty Eleven theme just long enough to check for the problem - if the problem still exists next involves deactivating all plugins except the plugin in question and then see if the issue still exists.

    If it does not, then you want to activate plugins one at a time testing in between to see if the issue returns. Even when you find one plugin, it may be in your interest to deactivate the problem plugin and continue testing the rest of the plugins to insure no others are also conflicting.

    You will know the conflict when the issue returns and which plugin(s) you activated that cause the issue.

    Please advise if there are any plugin conflicts and if so what the plugins are that are conflicting.

    Cheers, Joe

  • aecnu

    Greetings Greg,

    Thank you once again for the screen shots, the recognition of our efforts to resolve your issue, and though you have indeed pointed out that GD is installed, you had not mentioned the results of the standard troubleshooting protocol.

    I can assure you sir I would not be dragging us through all this if I were able to replicate this issue.

    In a complete review of this ticket as puzzling as it has been, something struck me to be extremely odd - your avatar cropping screen shot shown in your first post looks nothing like mine (screen shot below).

    As a matter of fact I do not know where the screen shot of yours is coming from and if indeed you are using our Avatar plugin in your BP install this is an absolute wrong answer since it is only to be used for MultiSites as indicated on its page and Buddy Press has its own Avatar manager in which my screen shots are using.

    Can you please reconcile the differences in our Avatar screen shots?

    We (you and I) with reflection and reconciliation may well be on the path to having this resolved :smiley:

    Please advise.

    Cheers, Joe

  • aecnu

    Greetings Greg,

    Thank you for the additional input and the screen shots are great telling the tale and the reason for your frustrations, something is wrong with this portion of the Bounce theme.

    I would certainly and happily take you up on your offer to check in to your site but this will take a theme coder to get in there and figure out what is wrong with this theme or at least the cropper portion. It may also be the plugin your using for this that is the real culprit. On my installation there is not any additional plugin.

    At this point we are now between a rock and a hard place. I am not a coder and because these are not WPMU Dev products, not the plugin or theme, I have no "free" coder to assign this to.

    Though I truly want to help but i am at the end of what I can possibly do.

    Therefore you need to get with either the theme developer, plugin developer, or perhaps alternatively you could see if there's a developer available at wpmu jobs who could get onto it right this minute

    Or you could always approach someone like Tweaky

    Cheers, Joe

  • greg_mcewan_marriott

    Hi Joe,,,, man thank you for the incredible patience you've shown .... i will, if u don't mind keep posting any discoveries relating to this issue here, in case in helps someone else with similar problem.

    As for the theme, not sure, as I have switched to quite a few diff themes, including the 2011 theme , and BP default, and the problem remains, actually based on the 2nd screenshot in my last post above, it looks worse, As for plugin yep, will do some further pulling the plugs.... I just had an idea, as i have the theme running on a diff domain with Bp as well, and will go check to see if it works there.... brb

  • greg_mcewan_marriott

    well well well, lo and behold did the following on the other site

    > upgraded plugins .... checked avatar upload - all worked ok
    > upgrade WP to 3.4.2. .... still uploading avatar fine
    > upgraded Bounce Theme from 1..3 to 1.4 >>> avatar works ok

    so the theme is NOT the issue after all... NOW I am thinking.

    > differences are the working site is at the same hosting company, but on a Windows Server environment
    > the server that does not work is running Apache
    > working server is NOT a multisite install, other one IS a multisite install

    the ONLY other difference is that if you look at the attached pic carefully and compare it to the Bounce Theme pic of before (the one that is NOT working) you will see that the BuddyPress menu styling is different, the reason being, is that the NOT working server is running the recommended BP Template Pack Plugin.

    WHICH.... I will disable now

  • aecnu

    Greetings Greg,

    I must admit the plot certainly thickens on this one and it is totally bizarre.

    I appreciate you keeping us updated as to your findings and suspect this will help others in the near future as well.

    The details of your troubleshooting and digging in are great and thank you for that.

    It appears you are getting closer to the culprit, hopefully you will let me knwo soon with the final answer what is causing this anomaly.

    Please keep us advised.

    Cheers, Joe

  • greg_mcewan_marriott

    it is done ....

    > rather than overwrite directories, totally deleted old bp theme and bounce directories and uploaded from originals,

    > totally uninstalled the BP Template Pack >>> Bounce is a buddypress theme and I think this was causing issues

    anyway, after doing so, things looked better, but still there remained a problem and then i noticed that the timestamp on my themes' style.css file was newer than the rest, and realised that I had done one single change to that file before uploading it via FTP

    so all along i was not uploading a mint style css, So i downloaded a fresh copy from ghostpool.com and wallah

    the culprit piece of code I attach... so to to WPMUDEV support a HUGE thank you and thumbs up for supporting me through this issue, with the site launching next week, I was getting a wee bit worried

    .avatar img,
    img.avatar {
    position: relative;
    padding: 0px;
    background: #fff;
    	float:left; margin: 5px 18px 10px 6px; width: 80px; height: 80px;
    	background: #ffffff; background-position: 0 0; background-repeat: no-repeat;
    	border-width: 1px;
    	-webkit-border-radius: 80px; -moz-border-radius: 80px; border-radius: 80px; /* border radius */
    	/* box shadow */
    	-webkit-box-shadow: 0 0 8px rgba(0,0,0,.6);
    	-moz-box-shadow: 0 0 8px rgba(0,0,0,.6);
    	box-shadow: 0 0 8px rgba(0,0,0,.6);
    	-webkit-background-clip: padding-box; 	/* smoother borders with webkit */ }
  • aecnu

    Greetings Greg,

    Wow that was a tough one and mind twisting since it was obviously messing with your head being the file was not being overwritten.

    Your final solution appears to have come from your paying attention to every detail and noticing the file date discrepancy.

    Thank you so much for posting the bad coding that was causing this "malfunction" all along, it is greatly appreciated and hopefully other WPMU members having the same issue will find this posting useful in their attempts to resolve it.

    Thank you Greg for your persistence and for your trouble shooting efforts to the end and final resolution.

    Cheers, Joe

  • Weird Mike

    Sorry to reopen this wound, but I'm having trouble with the Bounce theme as well and I just did an upgrade to the theme (which I forgot to note the custom changes I made prior to doing so) but since upgrading to BP 1.7 a couple days ago, I haven't been able to use the crop feature anymore and it's doing exactly the same thing that went on here. Now, I tried the snippet of code presented most recently but it doesn't change anything. Could I possibly get some professional aid on this or should I open a new topic?

  • aecnu

    Greetings SplendidAngst,

    Please be so kind as to open your own ticket regarding this issue and please feel free to copy and paste any relevant items from this ticket to the new ticket.

    This makes it more efficient for the support staff and the lead developer/coder to get heads wrapped around specifically what the possible issue(s) are with this particular installation.

    Thank you for understanding and for being a WPMU DEV Community Member!

    Cheers, Joe