DropzoneJS thumbnailWidth and thumbHeight don't work

Question

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);
}

I couldn't reproduce the issue, I used your code spinets and got this result: https://dry-everglades-43790.herokuapp.com/ which seems working fine. it could be something else in your code. — Rabah, Oct 04 '17 at 12:34
Thanks @RabahG and Romias for helping. I noticed the problem was actually within the Photo.php file, where the thumbnails were created. Unfortunately, I completely forgot about this file when debugging. I went through the code again to try to figure out how the thumbnails were actually created and it brought me back here. — Brad Ahrens, Oct 04 '17 at 13:39

score 1 · Answer 1 · answered Oct 04 '17 at 01:48

1

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

answered Oct 04 '17 at 01:48

Romias

13,783
7
56
85

Thanks @Romias, I forgot to list that in the post. You can now see my CSS. Unfortunately, that hasn't helped, at least with the code that I currently have. Any idea why? – Brad Ahrens Oct 04 '17 at 08:23
I have followed this question completely with no results: https://stackoverflow.com/questions/28031705/dropzone-thumbnail-width-image-size – Brad Ahrens Oct 04 '17 at 08:33

score 0 · Accepted Answer · answered Oct 11 '17 at 10:04

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);
}

DropzoneJS thumbnailWidth and thumbHeight don't work

Problem

Code

Solution:

Code for solution

2 Answers2

Solution:

Here is my code: