Improved thumbnail generation

Fixes #88

app/Controllers/UploadController.php

@@ -3,6 +3,7 @@
 namespace App\Controllers;
 
 use GuzzleHttp\Psr7\Stream;
+use Intervention\Image\Constraint;
 use Intervention\Image\ImageManagerStatic as Image;
 use League\Flysystem\FileExistsException;
 use League\Flysystem\FileNotFoundException;
@@ -378,16 +379,20 @@ class UploadController extends Controller
         if (param($request, 'width') !== null && explode('/', $mime)[0] === 'image') {
 
             $image = Image::make($storage->readStream($media->storage_path))
-                ->resizeCanvas(
+                ->resize(
                     param($request, 'width'),
                     param($request, 'height'),
-                    'center')
-                ->encode('png');
+                    function (Constraint $constraint) {
+                        $constraint->aspectRatio();
+                    })
+                ->resizeCanvas(param($request, 'width'),
+                    param($request, 'height'), 'center')
+                ->stream('png');
 
-            $response->getBody()->write($image);
             return $response
                 ->withHeader('Content-Type', 'image/png')
-                ->withHeader('Content-Disposition', $disposition.';filename="scaled-'.pathinfo($media->filename)['filename'].'.png"');
+                ->withHeader('Content-Disposition', $disposition.';filename="scaled-'.pathinfo($media->filename, PATHINFO_FILENAME).'.png"')
+                ->withBody($image);
         } else {
             $stream = new Stream($storage->readStream($media->storage_path));
 

resources/templates/dashboard/grid.twig

@@ -13,7 +13,7 @@
                     <div class="col-md-4" id="media_{{ media.id }}">
                         <div class="card mb-4 shadow-sm">
                             {% if isDisplayableImage(media.mimetype) %}
-                                <img class="card-img" src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=286&height=219') }}" alt="Card image">
+                                <img class="card-img" src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=348&height=267') }}" alt="Card image">
                             {% else %}
                                 <div class="text-center" style="font-size: 178px;"><i class="far {{ mime2font(media.mimetype) }} mb-4 mt-4"></i></div>
                             {% endif %}

resources/templates/dashboard/list.twig

@@ -32,9 +32,9 @@
                                             <td class="text-center">
                                                 {% if isDisplayableImage(media.mimetype) %}
                                                     {% if media.username is not null %}
-                                                        <img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=256&height=128') }}" class="img-fluid rounded admin-img">
+                                                        <img src="{{ urlFor('/' ~ media.user_code ~ '/' ~ media.code ~ '.' ~ media.extension ~ '/raw?width=84&height=42') }}" class="img-fluid rounded">
                                                     {% else %}
-                                                        <img src="{{ route('upload.raw', {'id': media.id}) }}" class="img-fluid rounded admin-img">
+                                                        <img src="{{ route('upload.raw', {'id': media.id}) }}" class="img-fluid rounded">
                                                     {% endif %}
                                                 {% else %}
                                                     <i class="far {{ mime2font(media.mimetype) }} fa-2x"></i>

src/css/app.css

@@ -40,10 +40,6 @@ body {
     border-top-right-radius: 0;
 }
 
-.admin-img {
-    max-height: 25px;
-}
-
 .user-title {
     white-space: nowrap;
     overflow: hidden;