How to resize thumbnails of uploaded images? I tried thumbnailWidth: "350" in my javascript, but this does not increase the size of the sketch, rather, the thumbnail just looks enlarged. How do I manipulate the thumbnail size of an image?
HTML:
<section id="create"> <form action="upload.php" class="dropzone" id="uploadphoto"></form> </section>
CSS
.dropzone { position: relative; border: 10px dotted #FFF; border-radius: 20px; color: white; font: bold 24px/200px arial; height: 400px; margin: 100px auto; text-align: center; width: 400px; } .dropzone:hover { border: 10px dotted #0C3; .dropzone.dropped { background: #222; border: 10px dotted #444; } .dropzone.in { width: 600px; height: 200px; line-height: 200px; font-size: larger; } .dropzone img { border-radius: 10px; vertical-align: middle; max-width: 95%; max-height: 95%; }
JavaScript:
Dropzone.options.uploadphoto = { maxFilesize: 25, //MB dictDefaultMessage: "Drag and Drop Posters or click", acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF,.pdf,.pub", thumbnailWidth:"350", accept: function(file, done) { console.log("uploaded"); //debuging the upload done(); }, init: function() { this.on("addedfile", function() { if (this.files[1]!=null){ this.removeFile(this.files[0]); } }); } };
Crisp
source share