1

When a user wants to change their avatar in BuddyPress, they are given the opportunity to crop their new image after uploading it.

During the 'crop step', the uploaded image is displayed on screen. This 'preview image' seems to be a fixed size (it does not resize when the browser window is enlarged or made smaller). I'd like the preview image to resize when the browser window is resized (i.e. be fluid).

Any idea how can I do this?

Notes: jCrop (which is provided in the WordPress core) is being used to crop the avatar.

I tried adding this to my stylesheet but that didn't work:

img {
    max-width : 100%;
    height : auto;
}
7
  • 1
    I looked into this problem, but before I could even help understand the issue I had to make an account, wordpress activation and then only to find I've been redirected to Gravatar? Would be nice if you could link an direct example.
    – MackieeE
    Jan 18, 2014 at 11:26
  • Sorry I can't give a direct example as everything I have is on localhost. I think, in order to see the problem in full, you would need to either set up a self-hosted WordPress site with BuddyPress installed, or visit a BuddyPress enabled website that lets their users upload avatars. Alternatively, you could visit the jCrop website to download jCrop directly. Jan 18, 2014 at 11:42
  • We shouldnt have to go through all that. You create an example upload it somewhere and come back with the link so we can take a link. I don't think anyone will answer this because its way to much effort just setting up.
    – Ruddy
    Jan 22, 2014 at 15:03
  • Ruddy thanks for your comments. I'll try to get an example uploaded as soon as possible. In the mean time, you can see the problem by looking at the default behaviour of the jCrop plugin - I've provided a link in my question. Jan 22, 2014 at 15:36
  • Here is an example of the cropping script in action: deepliquid.com/projects/Jcrop/demos.php?demo=live_crop - if you resize the browser window you should see how the preview image doesn't resize. Jan 23, 2014 at 18:58

4 Answers 4

0

try this css code

img{max-width:100%;height:auto;}
3
  • Hi Anandu, thanks for the code. I wish it was as easy as that. I'm already using that in my CSS document to make images across my site fluid. It's the particular avatar preview image I'm having trouble with (see my question for the update). Jan 18, 2014 at 10:52
  • Will you give me your site URL
    – Anandu
    Jan 18, 2014 at 16:18
  • Sorry, I have everything locally. Jan 18, 2014 at 17:26
0

Maybe you can try to destroy jCrop when user resize the window and create it again when user stop resizing. jCrop create his own image when jCrop is created and maybe this is the problem.

0
0

Try this:

In your JS:

var jcrop;
$(window).rezise(function(){
    jcrop.destroy();
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});
$(document).ready(function(){
    jcrop = $('#yourIMG').Jcrop({
        boxWidth: $('#yourIMG').width(), 
        boxHeight: $('#yourIMG').height(),
        // ...
    });
});
-1

Like I said I have no idea what the code looks like so... You may have to overwrite some stuff.

This is how you should do it.

HTML:

<div id="inner">
    <img src="http://c.dryicons.com/images/icon_sets/shine_icon_set/png/256x256/business_user.png" />
</div>

CSS:

#inner {
    width: 40%;
    height: 40%;
    border: 1px solid;
}
img {
    width: 100%;
    height: auto;
}

Wrap the preview image in a div and give it a class/id. Set there height and width to percentages (whatever you want). Now as long as it parent etc can resize this will as well now. Get the image inside and set the CSS to width: 100%; and height auto; This will get it to take up the wrap we just made. Now you only have to worry about putting the wrap in the right place. Mess around with it until you get what you want.

Note: If there are styles already on it you may need to use !important; but I would not recommend it.

DEMO HERE

If this still is not an option, you could use jQuery to get the width of the screen and using that update the image to resize. Not the best way but you could do that.

10
  • This doesn't solve the problem. As you say, you really need to see the code. I'll try to upload an example as soon as possible. In the mean time, you can see the problem by looking at the default behaviour of the jCrop plugin. deepliquid.com/content/Jcrop.html Jan 22, 2014 at 15:38
  • I really don't think I understand what you want tbh. Maybe an image would help? Show what you want where and how?
    – Ruddy
    Jan 22, 2014 at 15:43
  • Ruddy - I found an example on the Jcrop website: deepliquid.com/projects/Jcrop/demos.php?demo=live_crop - and here you can see an explanation of sizing issues with Jcrop: deepliquid.com/content/Jcrop_Sizing_Issues.html Jan 23, 2014 at 18:56
  • @henrywright I had a look, but I'm still not sure what you want. I am willing to help you but I need you to explain it better. Like I said before, give me a demo of the problem. Make an image to show what the problem is and when it occurs etc.
    – Ruddy
    Jan 24, 2014 at 7:56
  • @henrywright You say the "preview" image doesn't resize? Do you mean where you crop it? Or the little image by the side? If you are talking about the cropping bit I don't think he can be resized with the browse. This is because it used the px to determan were the crop starts and finishes. If we change that to resize with the browser (percentage) it wouldn't know were we are starting and where it should finish.
    – Ruddy
    Jan 24, 2014 at 7:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.