DropzoneJS thumbnailWidth and thumbHeight don't work

user_6390152 0
Viewed 607

Problem

I'm using dropzone to handle multiple image uploads. I want it to generate 280x280px thumbnails. Despite my best efforts, it keeps generating 100x100px thumbnails.

Code

Here is my code:

   Dropzone.options.addPhotosForm = {
     createImageThumbnails: true,
     thumbnailWidth: "280",
     thumbnailHeight: "280",
     ...
   }

Here is my contact form:

      <form action="{{ route('store_photo_path', [$rooms->slug]) }}" 
          method="POST" class="dropzone" id="addPhotosForm">
        {{ csrf_field() }}
      </form>

Here is my CSS:

.dropzone .dz-preview .dz-image {
      width: 280px;
      height: 280px;
    }

I have tried with and without the quotes, with single and with double quotes. Nothing has worked so far.

Do you guys know what could be the problem?

Thanks!

I have read and tried these solutions: quotes/no quotes, xhrs, any of these, and jQuery.

Solution:

I finally realized what I was doing wrong. I create the thumbnails in my Photo.php file. Under the makeThumbail function, I had "->fit(100)" which forced the thumbnail to be a 100x100 image. After changing this to "->fit(280)", this fixed the problem.

Here is my code:

Code for solution

public function makeThumbnail()
{
    Image::make($this->path)
        ->fit(280)
        ->save($this->thumbnail_path);
}
dropzone.js
2 Answers

Besides modifying the size of the thumbnail as you are doing, you need to modify the .dz-image class in the CSS file accordingly.

user_77200

Solution:

I finally realized what I was doing wrong. I create the thumbnails in my Photo.php file. Under the makeThumbail function, I had "->fit(100)" which forced the thumbnail to be a 100x100 image. After changing this to "->fit(280)", this fixed the problem.

Here is my code:

public function makeThumbnail()
{
    Image::make($this->path)
        ->fit(280)
        ->save($this->thumbnail_path);
}
user_63901520
Related