Panel - Cropper for Images

Hi,

I’m currently working on a implementation of the jquery.cropper as a Custom Panel Field.

The idea is that you select images from a Dropdown, this is then loaded into the cropper. You then click a “Crop Now”-Button that sends the File to another .php File which then crops the image using Imagick.

My problem at this point is that it seems like I’m not able to put the file (thats called via ajax) into my site/fields/cropper/ Folder that I created (because of the htaccess?) - if the file is located on the root level, it works.

3 Likes

Maybe this answer does help you as well: Site preventing asset loading

$.ajax( {
  url: '<?php url('site/fields/cropper/ajax_cropper.php') ?>',
  type: 'post',
  data: data,
  success: function ( data, status ) {
  },
  error: function ( xhr, desc, err ) {
  } 
);

At this point it doesn’t matter if I write the URL hard-coded or with the URL-Function, does it? So I guess I have to whitelist the file in the .htaccess?

Edit: I put the Code on github.com/Pascalmh/kirby-cropper (edit: deleted repo - new one is here: https://github.com/blankogmbh/kirby-cropper).

The Readme is wrong at the current state but it’s how I want it to be once everything works as expected.
What you’ll have to do to make it work is pull all files into site/fields/cropper/ except for the ajax_cropper.php which has to go into the your project root folder.

What @distantnative referred to is a custom route inside your field that proxies the request. The resulting URL would be something like cropper-plugin/ajax-cropper.

Finally got time to finish it up - https://github.com/blankogmbh/kirby-cropper thank you @distantnative and @lukasbestle for your help!

4 Likes

This looks super cool!

I just installed it but wasn’t able to produce a cropped image.

Is it still working for you?

Yes, still working for me. So you see the Cropping Area, you can choose the area that should be cropped? That would mean you have the submodule and everything on the frontend works as expected.

If that is not the case make sure that the submodule is there (https://github.com/fengyuanchen/cropper). So in your site/fields/cropper-Folder should be another cropper-Folder which inherits the files of the submodule (the jQuery image cropping plugin).

Firstly: thanks @Pascalmh. Top job!

Like @iancox I also managed to get the frontend working, used the cropper tool and saved but couldn’t produce a cropped image to my knowledge. The image that the text file points to is still the original image. Perhaps I am missing something?

Ok it works! The problem was that imagemagick wasn’t installed.

1 Like

A couple of questions though regarding the usage.

Do you have to first click “Crop image” (which closes the dialog) and then go back to the select box and select the image again to save it?

How does one show the cropped image in a template?

Thanks in advance

You select the Image, then you select the part of the image you want to crop, then you press “Crop image” - then the original image will be overwritten. You can use it as any other image in kirby (as it is just that, a totally normal image - just cropped).

Awesome tool !

I was trying to install it, but it doesn’t work for me.
I followed the instructions and it seems that all is in it’s place.
But i don’t see any “Crop Image” button. A field appears, but it seems to be just an image selector.

@zyre, you mentioned that imagemagick wasn’t installed. Does this plugin depend on whether this is installed on the user’s computer?

Do I still need to add ajax_cropper.php to the root folder?

Hi there,
I can’t have it working properly. In the panel I only have a field that let me select among my files but nothing happens when one is selected.
Any advice about something I could have missed?

  • I putted the full folder in the site/fields/ under the name “cropper”.
  • add the code to .config file
  • add the field in my Blueprints

Thanks in advance

How did you install the field? If you didn’t install via Git, the cropper folder is probably empty?

1 Like

You’re right! I downloaded the zip and the cropper folder was empty…
Thanks a lot

Hi,
I’m looking to add this field at file level. So when we edit a file we immediately have the cropping option of the edited file.
No problem to add the field in the file blueprint but how could it be possible to have this file immediately selected? (by default it’s dropping list to select the file to crop among all files from folder).

As example you can see what Focus plugin is doing08

Thanks in advance