4

I'm trying to build a plugin, and part of it requires to upload (or choose an already uploaded one) an image, and when it's done uploading to crop it (a bit like how you change a header image in the WP_Customizer).

I currently have this code code:

Index.php:

<div class="imagearea">
    <div class="noimage">
        <a class="select-image button button-primary button-large">Selecteer een foto</a>
    </div>
</div>

imageUpload.js:

jQuery(document).ready(function (){
jQuery(".select-image").click(function() {
  var custom_uploader = wp.media({
      title: 'Selecteer een afbeelding',
      button: {
        text: 'Selecteer'
      },
      multiple: false
    })
    .on('select', function() {
      var cropper = wp.cropper().open();
    }).open();
});
});

But I then get the error: Uncaught ReferenceError: wp.cropper is not defined

It seems like wp.cropper is not the correct name, while /wp-includes/crop/cropper.js does seem to suggest that on line 39. I've also tried some variations of the name (wp.Cropper, WP.cropper, Cropper, etc...)

I'm on Wordpress 4.4

  • Take a look at script-loader.php; there's a comment in there that says "no longer used by core" and it seems to indicate that the jQuery plugin jCrop.js is used, instead. – C C Dec 15 '15 at 18:48
1

Untested, but I believe this should work:

jQuery(document).ready(function (){
    jQuery(".select-image").click(function() {
        var custom_uploader = wp.media({
            title: 'Selecteer een afbeelding',
            button: {
                text: 'Selecteer'
            },
            multiple: false
        });
        custom_uploader.on('select', function() {
            custom_uploader.Jcrop();
        });
        custom_uploader.open();
    });
});
  • Doesn't work :( Uncaught TypeError: custom_uploader.Jcrop is not a function. I've also tried some variations (jcrop, JCrop, jCrop) but it doesn't seem to be correct. – Jeroen Dec 16 '15 at 12:46
  • 1
    Hmmm. ok, it looks like the cropping functionality is buried deeper then, most likely inside the backbone/underscore.js framework that seems to be in play when on the media manager page. I'd try loading JCrop and see if I can get it to work that way, especially if you want it to be part of the .on('select') action. – C C Dec 16 '15 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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