Discussion on Slim Image Cropper, Responsive Uploading and Ratio Cropping Plugin


pqina supports this item


This author's response time can be up to 1 business day.

291 comments found.

if purchase this… exist way to do it work in my CodeIgniter 3.1.7 Web Site? Codeigniter PHP framework site… if yes you have instructions for PHP framework sites?

Hi, I do not have any experience with Codeigniter so can’t offer help or tutorials I can say that customers have successfully setup Slim with Codeigniter.

See this reply by alankoeninger -> https://codecanyon.net/comments/18828338

Hi, I’ve used this script with Codeigniter without any problems. Just follow the PHP help and examples and it works fine. Just put the slim.php file into your application/libraries folder and load it from there – eg. require_once( APPPATH . ’/libraries/slim.php’ );

Hi there, thanks for the plugin, it’s great.

Is it possible to support retina (ie. high resolution screens) for the image preview, after an image has been added to the hopper (but not uploaded)? They are appearing a bit blurry on a laptop. They look fine when saved however, or when theya re being cropped. Thanks again.

Hi! I’ve recently added the data-device-pixel-ratio attribute. It’s currently not documented but you can set it to "auto" to automatically detect the pixel density of the device. Note that this might impact performance negatively.

That’s great, thanks!


Bagmaz Purchased

I’m use slim.module on Vue.js.

This is config:

mounted() {
            new Slim(this.$el, {
                ratio: '1:1',
                defaultInputName: 'picture',
                maxFileSize: 2,
                internalCanvasSize: {
                    width: 2048,
                    height: 2048,
                minSize: {
                    width: 80,
                    height: 80,
                forceSize: {
                    width: 320,
                    height: 320,
                size: {
                    width: 320,
                    height: 320,
                buttonCancelLabel: 'Annullera',
                buttonConfirmLabel: 'Bekräfta',
                label: 'Släpp en bild här eller klicka för att ladda upp.',
                service: this.uploadFile,

And this is uploadFile methods:

 methods: {
            uploadFile(data) {
                axios.post('/picture/user/' + this.slug, data);

And I will get this response:

{rotation: null, crop: {x: 334.5, y: 0, height: 1331, width: 1331, type: "auto"},…}
{name: "bg6.jpg", type: "image/jpeg", size: 585645, width: 2000, height: 1331, field: null}
{name: "bg6.jpg", type: "image/jpeg", width: 320, height: 320, image: null, field: "slim_output_0"}

My output image is null.

Does anyone help me to solve this problem?


Best to use the support tab so we can communicate over email.

A public test case would be useful.

There’s a Vue wrapper contained in the package, better to use that with Vue than write your own.


Bagmaz Purchased

I also contacted through support but this is not my answer.

I said when I use data service, Output image is null.

This is a plugin for Php and Laravel is a PHP Framework but the plugin not work with Laravel 5.5, Please check my code above and tell me where did i make mistake.

Thank you.

Ah, it was not clear to me that that was the same account. Please try to keep communications in one location.

In my reply to the comment, I advised you to use the Vue wrapper.

I replied to your initial support request with a request for further information, I’ll await your reply.

Also, can supply a publicly accessible URL where I can test this.

Hi, Love the plugin. I have it on a form in CF7 and it shows fine, prints fine but does not embed into the sending form. I have placed the shortcode on the form but it only shows the file name where the image should be. Please assist. Many Thanks

Hi, just replied to your email. By the way, this is the product page for the JavaScript version of Slim.

Hi, Your script follows these three steps. 1) Cut to a predefined size 2) Insert a watermark (png image) in the right botton position 3) image download. Thanks

Got it. Help me with this? Thanks

At the moment I don’t have any time available to build custom solutions. Maybe one of the developers at Envato Studio can help?

Hi, just added a watermark image example to the data-will-transform section on the website ( http://slimimagecropper.com ).


Kazza Purchased

Once the user has clicked the upload button, is it possible to redirect them to another page upon a successful upload? I cannot seem to figure it out, I have tried modifying some of the lines within async.php and or slim.php, but to no avail. Thanks

You could use the data-did-upload callback and change the window location using something like window.location = "page.html";

Hi I need these steps for taking print orders How can use your plugin ?

1-customer select photos from computer or mobile phone 2-Crop, resize and adjust 3- upload photos on our website 4-We get photos on our server


Apart from the demo page, I do not have any other public tests available. I do not have any experience with WooCommerce, but it seems to work with the Gravity Forms version so should be possible.

thank you for fast reply however im not expert and didnt understand multiple uploads article.

in case you have paid service to implement what we need, please let me know

otherwise i need to find ready to use solution

Okay. My agenda is currently fully booked so can’t do custom work at the moment. Maybe Envato Studio is an option?

Hi, Is the watermark only text or can I insert a png image? Thanks

There is information on using the drawImage API on this page: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

Ok. Thanks.

Hi, just added a watermark image example to the data-will-transform section on the website ( http://slimimagecropper.com ).

Hi Rik,

Very nice script you made there ;-)

I have problems with your script. Everytime i use data-post=”input” or data-post=”input, output” I always get a error after hitting the submit button.

Error: “Slim was not used to upload these images.”

The idea was to save the original file and the cropped 16:9 version. Using your latest version. I never managed to use the “input” option.

What am I doing wrong? Hope you can help out.

Groeten, Marco


<div class="slim" data-label="Drop your file here" data-post="input, output" data-size="376,212" data-min-size="376,212" data-ratio="16:9"> <input type="file" name="test" id="test" required /> </div>

Mmhh. still same with bigger files (2-3MB)... grrrr. Do you think 800000 is to small?

My test location including phpinfo: https://future-webdevelopment.nl/slim/


pqina Author

800.000 means it’ll accept 800.000 characters, files bigger than 1MB will probably contain more than 1.000.000 characters encoded as base64 (which is unfortunately how Slim has to send these files when not using data-service).

Note that it’s possible that sending really big files will cause the browser to run out of memory, so if you have the option to send the files async (using data-service) that’s better.

Ahh wasn’t familair what the suhosin options did. I know the encoded base64 options and totally understand why it wasn’t working before because of the many characters (thanks to your explanation).

Contacted my hosting again, and they changed the PHP version and this one doesn’t have the suhosin limits and seems that it’s finally working fine, also with bigger files. Awesome! Thnx again for your patient and help.

Peace out.

This comment is currently being reviewed.

Hi, Can not you prepare an example by adding a watermark (image png) after the cut? This is a recurring questioning among interested users; Thanks

I understand. Anyway thank you. I will try to track the status, is that I really need this functionality.

Hi, just added a watermark image example to the data-will-transform section on the website ( http://slimimagecropper.com ).

Very good. Thank you. :)