Thumbnail generation on upload

[talvbansal]

Generating thumbnails for images on upload would be a great feature to optionally enable,

In high volume environments it would be normal for this sort of work to be shipped off to a queue so maybe this is something that needs to be configurable.

I've never actually worked with queues before so im not 100% sure on how to implement this or how we can fall back to getting the current application to handle thumbnail generation on upload.

There also needs to be a way to reference the thumbnail easily within blade/view templates, maybe some sort of helper function.

[brtka]

Hi, I've actually implemented thumbs in your library for my own project:

I've used the image intervention library to make images in /src/services/MediaManager.php

previously you had a saveFiles() method, which I slightly modified:

$content = Image::make($file->getRealPath());
$content->backup();
if ( $content->$method($width, $height, function ($constraint) {
         $constraint->upsize();
   })->save($destinationPath.'/'.$fileName)) {
$uploaded++;
}

The backup() method is in case you want to make multiple thumb sizes. This simple code could be easily made into a separate method within the file, which accepts the three values: method for image manipulation (fit, crop, resize), width and height.

[talvbansal]

@Brle88 amazing!!! Since you already have this working, would you be able to submit a PR with your above changes in?

If you've made any other changes I'd love to hear about them and consider them for inclusion!

[brtka]

Sure, the only thing I changed was adding the image intervention library, using it in the MediaManager.php and adding a editing a single method:

public function saveFiles(array $files, $folder = '/') 
{
    $uploaded = 0;
    /** @var UploadedFile $file */
    foreach ($files as $file) {
        if (!$file->isValid()) {
            $this->errors[] = trans('media-manager::messages.upload_error', ['entity' => $file->getClientOriginalName()]);

            continue;
        }

        $fileName = $file->getClientOriginalName();
        $fileNameThumb =  'thumb-'.$file->getClientOriginalName();
        $destinationPath = public_path('/storage');
        $content = Image::make($file->getRealPath());
        $content->backup();

        if ( $content->fit(750, 400, function ($constraint) {$constraint->upsize();})->save($destinationPath.'/'.$fileName)) {
            $uploaded++;
        }
        $content->reset();
        $content->fit(183, 145, function ($constraint) {$constraint->upsize();})->save($destinationPath.'/thumb/'.$fileNameThumb);
    }

    return $uploaded;
}

I dont have the original method saved, but I did change the path, and the name - this was a quick and a dirty solution, I would propose a separate method for thumbs.

[talvbansal]

@Brle88 thanks for that! I'll try adding the code in shortly.

In the above code images are being renamed as thumb-{filename.extension}, before i go ahead and work on this I wanted to ask if anyone had any preferences to the way in which the thumbnails were named or if there was a preference to put them into a subdirectory?

We also have to think about deleting files, do we delete the corresponding thumbnails too? (- my preference) or is there a case where thumbnails would want to be removed manually?

@Brle88, @austintoddj do you guys have any thoughts?

[brtka]

Well, I kinda wanted to say more about this - I think that the best solution is the wp solution. In large scale, the best way to organize files is by month - 01, 02, 03 etc. I didn't think of this at first, by now I know, it would fix the speed problem, a mentioned in the my feature request previously. As for the naming, well it depends what are your naming conventions - i.e, if you have multiple sizes, then 'thumb-' isn't gonna work, and it's much simpler, to do i.e. 180x145_filename.extension. In my case, I did add a separate thumb folder, just because thumbs should not be manipulated in any way by users, and I've instructed writers on my website not to enter that folder. Also, keeping thumbs in a separate folder makes sense, because in this way you de-clutter the ui.

[torian257x]

was this actually implemented? Btw wordpress as well makes use of an image attribute called srcset

https://css-tricks.com/responsive-images-youre-just-changing-resolutions-use-srcset/

[talvbansal]

Hi @Jossnaz,

This hasn't been implemented yet that's why the issue is still open.

If you could make a PR with the ideas in the link you've posted it be really grateful!

Thanks

Talv