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

pqina

pqina supports this item

Supported

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

255 comments found.

Hi quick question… I was able to create a callback for the will-remove event but only using javascript, how can create the callback will-remove from an Jquery function???

Ah, it’s currently not possible to use data attributes and a configuration object at the same time. I’ve rewritten the snippet above to only use a configuration object.

<div id="my-snippet" class="slim">
    <img src="test.jpg" alt="" />
    <input type="file" name="slim[]" accept="image/jpeg,image/png,image/gif,image/bmp"/>
</div>

<script src="jquery.js"></script>
<script src="slim/slim.jquery.js"></script>

<script>
$( document ).ready(function() {

    function imageWillBeRemoved(data, remove){
        alert(data);
        alert(remove);
        remove();
    }

    $("#my-snippet").slim({ 
        willRemove: imageWillBeRemoved,
        ratio: '1:1',
        service: 'async.php',
        minSize: '180,180',
        push: true,
        jpegCompression:100,
        label: 'Arrastra tu foto o haz click',
        maxFileSize: 3,
        statusContentLength: 'La imagen es demasiado grande, intenta con otra',
        statusImageTooSmall: 'La imagen es muy pequeña, el tamaño mínimo es de $0 pixeles.',
        statusNoSupport: 'Tu explorador no soporta todas las funciones',
        statusFileSize: 'Tu imagen es demasiado grande MAX 3 MB',
        statusUnknownResponse: 'Error al procesar la imagen',
        statusUploadSuccess: 'Guardada',
        buttonCancelLabel: 'Cancelar',
        buttonConfirmLabel: 'Aceptar',
        statusFileType: 'Por favor elige una imagen válida se espera:jpeg,png,gif,bmp',
        meta:{
            foto:1
        }
    });

});
</script>

THANKS for the support Probably I did something wrong cause it was not working.. but I fixed it using this :

function my_fun(){ /* some operations */ } $(function(){ my_fun(); //run my_fun() ondomready }); // just js function js_fun(){ my_fun(); //== call my_fun() again }

okay, glad to hear it’s working!

try some hours to rename the image, but slim use always the orginal name.. can you see whats wrong???

Regards

<div class="slim" data-service="async.php" data-ratio="2:3" data-size="600,400" data-push="true" data-instant-edit="true" data-will-transform="updateFilename"> <input type="file" name="slim[]"> </div> <script> function updateFilename(data, ready) { // update the filename data.output.name = 'newname.jpg'; // continue saving the data ready(data); } </script>

Hi!

Not at my workstation right now, but I think if you use will-save instead of will-transform it should work.

works perfect for me…. many thanks for fast help

No problem :-) Glad to hear it’s working!

Does slim cropper support gif cropping now? I have some how upload gif without cropping and it working fine but when on edit page my gif load in slim then it should come in call back `data-did-load` and it come but some time it’s not coming in the `data-did-load` callback so i’m unable to handle it any idea?

Hi, It can’t deal with animated gifs, non-animated gifs should be transformed into png’s. If you have a test case I’m happy to take a look at it, please send information using the support page.

Hi, Nice Plugin!

Could I add some transparent cover photo by default ?

When user upload their photo to this plugin, they could download the composite picture that include transparent cover photo and their photo in same picture.

Thanks! There’s currently no default setting to do this but you can alter the didTransform callback to make custom changes to the image ( see the text example on the product website ).

Hello,

I am currently interested in buying your plugin to be used in my codeigniter coded website. But, I am not so sure whether it is running ok in codeigniter framework.

Does anybody use it on your ci website before? Thanks in advance.

Hi! Thanks for your interest in Slim.

I don’t have any experience with codeigniter myself but a customer left a positive review saying they got it to work successfully. I also had another customer ask some questions about code igniter, and succeeded in implementing it. So it’s possible.

hey mate how do i set max image size? is it data-max-size?

Hi, there’s currently no option for this, it’s on the list for a future release as other customers have requested this as well.

here is something i wrote as i need something for now:

javascript:

$("body").on("DOMSubtreeModified", ".slim-crop-area", function() {
  var $div = $(this);
  var text = " "$div.width() +" x " $div.height()+" ";
  if($div.find(".c).is(") || $div.data("dragging") == true){
    if( $(".slim-crop-area .c").html() != text){
      var timer = setTimeout( function(){ 
        $div.find(".c").html(text);
        $div.find(".c").css("background-color", "transparent").css("opacity", "1");
      }  , 10);
      return;
    }
    clearTimeout(timer);
  }
});

css:

.slim-crop-area .c span{
  background: rgba(0,0,0,.2);
  color: #fff;
  padding: 10px;
}

Thanks for sharing, might be helpful for other customers.

fotodany

fotodany Purchased

Hey I`m very happy with slim…

now I have a little problem:

I will change the image name and the path. But I don`t no the correct variable for the path.

Thanks

<div class="slim" data-service="slim/async_icon_add.php" data-fetcher="slim/fetch.php" data-ratio="16:9" data-size="1920,1080" data-push="true" data-instant-edit="true" data-will-save="updateFilename3">
                                                                            <?php
                                                                                $filename = '../../' .$link123. '/icon2.jpg';

                                                                                if (file_exists($filename)) {
                                                                                    echo '<img src="../../' .$link123. '/icon2.jpg" alt="" />';
                                                                                } 
                                                                            ?>     
                                                                            <input type="file" name="slim[]">
                                                                        </div>

                                                                        <script>
                                                                        function updateFilename3(data, ready) {

                                                                            // update the filename
                                                                            data.output.name = 'icon2.jpg';
                                                                            // update the path
                                                                            data.output.??? = '../../<?php echo $link123 ?>/';
                                                                            // continue saving the data
                                                                            ready(data);

                                                                        }
                                                                        </script>

There’s no way to set the path of the file on the client, as that would allow users to change it (which would introduce a severe security risk). It’s best to edit the async.php file and fix the path there. Is that an option?

fotodany

fotodany Purchased

I have different gallerys in different folders…

and I need a way to transport the path to async_icon_add.php :-(

Then I would advice to set the path to a meta attribute, for instance data-meta-path="my_path". Then you can access that value on the server with $image['meta']->path;.

I would advice to check the value of the path for the paths you allow as otherwise the user can pass different paths to your server.

Does that help out?

aarsna1

aarsna1 Purchased

what am I doing wrong here:

<div class="slim trigger-slim" data-service="/includes/Browser/ajax/image_upload.php" data-size="760,250" data-max-size="760,250" own="" script="" to="" show="" error="" data-ratio="free" data-instant-edit="true" data-max-file-size="1" data-push="true" data-label="upload image" data-will-remove="handleImageRemoval" data-did-upload="image" data-meta-id="1" data-meta-type="rt" data-meta-name="james"> <input type="file"/> </div>

when user uploads the image, it does not save save to correct size (corpped size), its eighter bigger image or some random size.

Ah okay, than data-size should limit the size of the output image to the given values. Does it not do that? Maybe I’m misunderstanding the problem.

aarsna1

aarsna1 Purchased

no it don’t work:

images: before crop – https://ibb.co/gwK48k crop – https://ibb.co/kidE8k

result: Array ( [0] => Array ( [input] => Array ( [data] => [name] => bg-1.jpg [type] => image/jpeg [size] => 318777 [width] => 1800 [height] => 1175 )

[output] => Array
        (
            [data] => 'image data here'
            [name] => bg-1.jpg
            [type] => image/jpeg
            [width] => 1207
            [height] => 448
        )
[actions] => Array
    (
        [crop] => Array
            (
                [x] => 333.185773932
                [y] => 196.349427516
                [width] => 1207.61607727
                [height] => 448.38183492
                [type] => manual
            )
[size] => 
    [rotation] => 0
    [filters] => Array
        (
            [sharpen] => 0
        )
)
[meta] => stdClass Object
    (
        [id] => 668602652
        [type] => rt
        [name] => tell
    )
)

)

That’s so odd, do you have a publicly accessible test page so I can take a look?

kastel

kastel Purchased

Hi, I’m going to buy your script and use it with wordpress. I made my own plugin with a custom profile image, and I need a script to upload (and crop) the picture. You have two versions of wordpress plugin, but I will not use Gravitty forms and contact form 7. Which one should I choose to have the least work of linking your script to my plugin (I just need an example wordpress connection). Does the wordpress script have all the capabilities of a standalone version?

I would advise to buy the standalone version and configure it to work with your plugin, the GF and CF7 plugins are configured specifically for those frameworks and offer less flexibility.

I’m not sure if this is the case but I want to make sure you’re aware before you buy. You are free to use Slim in a private plugin but the license does not allow the use of Slim in a WordPress plugin sold on Envato or somewhere else.

Slim cropper support “data-min-size” for restricting minimum size. Does it also support to restrict maximum size, for example it don’t want to upload a image greater than “900,400” pixel. I’m not concern with “data-max-file-size” I just want to restrict with pixel “data-min-size” restrict to minimum in that way any restriction on maximum pixel size.

Hi! There’s not max-size setting as high resolution images can be scaled to fit lower resolutions. Use the data-size attribute to set the max image size and Slim will scale down images accordingly.

aarsna1

aarsna1 Purchased

how do i catch dispatchEvent while cropping images?

Hi, can you please use the support tab for support requests, it’s a lot easier and quicker to communicate over email than using the comment form.

I’m not sure I understand the question, so please when contacting with the support form can you supply some more details.

Hi, reeeeeeallly nice ! It works perfectly ! Can I have a multi-files upload ?

Thanks, glad you like it! Currently there’s no support for multiple files in the same Slim cropper. I’ve written this short article on how you could set it up but it’s officially not supported as it’s not part of the package: https://pqina.nl/blog/multiple-file-upload-with-slim

Thank you so much for your quick answer ;) Best regards

Hi there, before any thin else i would like to congratulate for the nice SLIM uploader and say our team over here in Brazil love it to!

Rik, we would like to check with you how we could recover an error message when the user select the file as we would like to position the message with a different font and style in another position.

Are we going the right way please? or would it offer any other way to get it?

Thank you very much!

Appreciate your support.

Thank you! Danillo and Team

Hi! I’ve responded to your other support request over email.

Hi, i had just renew the support, as we are near to launch our plataform would appreciate very much if you could help us with that question! Thank you very much and again: Very Good Script!

Hi, thanks for renewal. Please send messages using the support form OR the comments section, not both as that makes communication more difficult than it needs to be.

Hi Do you have an fully working angular 4 example? Wrestling with this all day. Primarily with the upload function… everthing works ok until it is time to send data to server. in the documentation it says // form data to post to server console.log(formdata); but when I send formdata to the server it says it cannot find image… when I console log, it is an object: FormData {}

Hi, I’ve also received a support request, I’ll get back to you over email. Please try to use the support tab instead of the comment section as that makes communication a lot easier.

Im using your plugin but when uploading the image its uploading a broken image? Please help me on this…

pqina

pqina Author

I’ve replied to your support inquiry over email.

by
by
by
by
by
by