croping function in buddypress not working WordPress
- SOLVED
I have a customized wordpress site with the latest version of buddypress 1.5.3.1.
My issue i sthat when users should crop their avatar they see two images but no function wordking.
My site (still under development) is [[LINK href="http://crosswide.asia"]]http://crosswide.asia[[/LINK]]
My GD library is installed
I have tried to disable all plugins without success
I have spent two days on this without success. I have limited knowledge so the fix should be easy to understand and a step by step process.
Thank you,
Olivier
Answers (6)
Pixel Coder answers:
Hi man,
In the file you run your jQuery functions add the code below.
Also, this has to come after jQuery and jCrop have been included on the page.
*edit - Ran into this issue also when building a new theme. The PSEUDO is...
@javier cool tricks with the png transparency. Does this still exist, i've yet to upload a png that is transparent.
Include jQuery
Include jCrop
Include jCrop CSS (or style yourself)
Call jCrop where needed (customise as you see fit)
Update hidden form field values
jQuery('#avatar-to-crop').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
setSelect: [ 0, 0, 150, 150 ],
aspectRatio: 1,
bgFade: true,
bgOpacity: .3,
minSize: [150, 150]
},function(){
// Use the API to get the real image size
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
jcrop_api = this;
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
{
var rx = 150 / c.w;
var ry = 150 / c.h;
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
jQuery('#avatar-crop-preview').css({
width: Math.round(rx * boundx) + 'px',
height: Math.round(ry * boundy) + 'px',
marginLeft: '-' + Math.round(rx * c.x) + 'px',
marginTop: '-' + Math.round(ry * c.y) + 'px'
});
}
};
Let me know how you get on.
olivier comments:
Hi,
should I put it in the file
bp-core-avatars.php?
Thanks, not sure where those functions are run.
Pixel Coder comments:
@john Tried running the above code via console and it looks like those errors don't terminate the script.
Bit of a JS noob here, any ideas what JS errors are considered fatal? The console is returning a Type and Syntax error.
Maybe the console will allow code execution regardless of errors in a "sandbox" type environment.
Ah who knows. Is it legitimate to have side convos here? :p
Pixel Coder comments:
If you give me FTP i'll get this on for you.
Works fine, tested as you can see from the latest Avatar on your site.
olivier comments:
OK Alistair,
your picture looks centered.
any email where I can send you my ftp access?
Pixel Coder comments:
Hello,
alistair at pixelcoder dot co dot uk
You should also be able to send a message via wpquestions.com
olivier comments:
Just joined this platform. Wish I had found it before. I just sent you a mail. Olivier
Pixel Coder comments:
Yes, it's very good.
You're all set now, lift-offfff. :)
olivier comments:
I will check immediately ;-)
olivier comments:
My site is blank! only the buddypress bar remains....
Francisco Javier Carazo Gil answers:
Olivier,
Look at it: http://www.thinkplexx.com/blog/nadi/wordpress-image-croping-does-only-jpeg-buddypress-avatar-cropping-uppload-transparency-problem
I have been using BuddyPress and this solution was successful.
olivier comments:
Already tried it but this code has already been depreciated. It was not working.
Uploading an image is working and it looks fine but the crop function is simply taking the upper left corner.
Olivier
Francisco Javier Carazo Gil comments:
Olivier,
Are there any JavaScript problems?
Look at the console. If you want send me FTP details via PM.
Francisco Javier Carazo Gil comments:
I have tested and you have an error in line 206 TOKEN ILEGAL:
$(�#signup-welcome).p(;:last-child').css('display', 'none');
John Cotton answers:
I get an error on that page, line 206:
This
<script type="text/javascript">
$(�#signup-welcome).p(;:last-child').css('display', 'none');
</script>
should be
<script type="text/javascript">
$('#signup-welcome').p(;:last-child').css('display', 'none');
</script>
Fix that and I can look at the next bit...
olivier comments:
Hi John,
which page address exactly?
thanks,
olivier
John Cotton comments:
The homepage
Arnav Joy answers:
find out this
<script type="text/javascript">
$('#signup-welcome').p(;:last-child').css('display', 'none');
</script>
in header.php or in the js of the plugin for signup
idt answers:
Hi,
As others have mentioned, please try fixing first the jQuery line with incorrect syntax in your site. I think this:
<script type="text/javascript">
$(�#signup-welcome).p(;:last-child').css('display', 'none');
</script>
should have been:
<script type="text/javascript"> or
$('#signup-welcome .p:last-child').css('display', 'none');
</script>
<script type="text/javascript">
$('#signup-welcome p:last-child').css('display', 'none');
</script>
Either of the two line is correct syntax, so just try it for the meantime just to see what happens if that line is fixed.
That line of code maybe found in your header.php of your theme. That could might be the cause why other js functions on your site stopped working.
Thanks,
idt
idt comments:
<blockquote>olivier says:
My site is blank! only the buddypress bar remains....</blockquote>
I noticed that too. Did you have someone work on it?
Thanks,
idt
olivier comments:
Yes Alistair took the lead so I put it on hold.