javascript - Dropzone cross-platform thumbnail generation -
i using dropzone image uploads , have noticed 2 issues:
- thumbnail generation same image fails in browsers e.g. image attached, thumbnail generated in chrome, blank in safari , in firefox grey background.
- in safari, thumbnails generated, not sizes/aspect ratios. e.g. once again attached image, if streched horizontally, safari generate thumbnail, otherwise not.
update
i have established being caused "null" param thumbnail width. setting value fixes issue in browsers. ideally, show thumbnail @ original aspect ratio, seems failing sizes/browsers described above.
is there fix or workaround can show thumbnails @ original aspect ratios?
dropzone init code:
var photosdropzone = new dropzone("#photoscontainer", { url: "{% url 'ajax_photo_upload_view' %}", maxfilesize: 4, acceptedfiles: 'image/*', addremovelinks: true, dictremovefile:'delete', thumbnailheight:160, thumbnailwidth:null, });
try using following css
.dropzone .dz-default.dz-message { opacity: 1; -ms-filter: none; -webkit-filter: none; filter: none; -webkit-transition: opacity 0.3s ease-in-out; transition: opacity 0.3s ease-in-out; background: #fff; background-repeat: no-repeat; background-position: 0 0; position: absolute; width: 428px; height: 123px; margin-left: -214px; margin-top: -61.5px; top: 50%; left: 50%; font-size: 20px; } .dropzone .dz-preview{ margin: 0 10px !important; } .thumbnail { height: 150px; width: 150px; margin: 10px; } .thumbnail img{ min-height: 100px; min-width: 100px; height: 100px; width: 100px; } .dropzone img { border-radius: 10px; vertical-align: middle; min-width: 100px; min-height: 100px; }
Comments
Post a Comment