Added lazy resizing support for thumbnail view in media manager

Author: jaxwilko

modules/backend/widgets/MediaManager.php

@@ -802,7 +802,7 @@ public function onResizeImage()
         $path = Input::get('path');
         $path = MediaLibrary::validatePath($path);
 
-        $croppedPath = $this->resizeImage(MediaLibrary::url($path), [
+        $croppedPath = $this->resizeImage($path, [
             'mode' => 'exact',
             'width' => $width,
             'height' => $height
@@ -1325,14 +1325,14 @@ protected function generateThumbnail($thumbnailInfo, $thumbnailParams = null): a
             /*
              * Resize the thumbnail and save to the thumbnails directory
              */
-            $fullThumbnailPath = $this->resizeImage(MediaLibrary::url($path), $thumbnailParams);
+            $fullThumbnailPath = $this->lazyResizeImage($path, $thumbnailParams);
 
             /*
              * Delete the temporary file
              */
             $markup = $this->makePartial('thumbnail-image', [
                 'isError' => false,
-                'imageUrl' => $this->getThumbnailImageUrl($fullThumbnailPath)
+                'imageUrl' => $fullThumbnailPath
             ]);
         } catch (\Throwable $ex) {
             $markup = $this->makePartial('thumbnail-image', ['isError' => true]);
@@ -1353,10 +1353,26 @@ protected function generateThumbnail($thumbnailInfo, $thumbnailParams = null): a
     /**
      * Resize an image
      */
-    protected function resizeImage(string $image, array $params): string
+    protected function lazyResizeImage(string $path, array $params): string
+    {
+        return ImageResizer::filterGetUrl(
+            MediaLibrary::url($path),
+            $params['width'],
+            $params['height'],
+            array_merge(
+                ['mode' => 'exact'],
+                $params
+            )
+        );
+    }
+
+    /**
+     * Resize an image
+     */
+    protected function resizeImage(string $path, array $params): string
     {
         return ImageResizer::processImage(
-            $image,
+            MediaLibrary::url($path),
             $params['width'],
             $params['height'],
             array_merge(
@@ -1370,10 +1386,10 @@ protected function resizeImage(string $image, array $params): string
     /**
      * Crop an image
      */
-    protected function cropImage(string $image, array $params): string
+    protected function cropImage(string $path, array $params): string
     {
         return ImageResizer::processImage(
-            $image,
+            MediaLibrary::url($path),
             $params['width'],
             $params['height'],
             array_merge(
@@ -1423,7 +1439,7 @@ protected function getCropEditImageUrlAndSize($path, $params = null)
         $url = MediaLibrary::url($path);
 
         if ($params) {
-            $url = $this->resizeImage($url, [
+            $url = $this->resizeImage($path, [
                 'mode' => 'exact',
                 'width' => $params['width'],
                 'height' => $params['height'],

modules/backend/widgets/mediamanager/partials/_item-icon.php

@@ -1,26 +1,23 @@
 <div class="icon-container <?= $itemType ?>">
     <div class="icon-wrapper"><i class="<?= $this->itemTypeToIconClass($item, $itemType) ?>"></i></div>
-
-    <?php
-    if ($itemType == System\Classes\MediaLibraryItem::FILE_TYPE_IMAGE):
-        $thumbnailPath = $this->thumbnailExists($thumbnailParams, $item->path, $item->lastModified);
-        ?>
-
+    <?php if (
+        $itemType == System\Classes\MediaLibraryItem::FILE_TYPE_IMAGE
+        && $thumbnailPath = $this->lazyResizeImage($item->path, $thumbnailParams)
+    ): ?>
         <div>
             <?php if (!$thumbnailPath): ?>
                 <div class="image-placeholder"
-                    data-width="<?= $thumbnailParams['width'] ?>"
-                    data-height="<?= $thumbnailParams['height'] ?>"
-                    data-path="<?= e($item->path) ?>"
-                    data-last-modified="<?= $item->lastModified ?>"
-                    id="<?= $this->getPlaceholderId($item) ?>"
+                     data-width="<?= $thumbnailParams['width'] ?>"
+                     data-height="<?= $thumbnailParams['height'] ?>"
+                     data-path="<?= e($item->path) ?>"
+                     data-last-modified="<?= $item->lastModified ?>"
+                     id="<?= $this->getPlaceholderId($item) ?>"
                 >
                     <div class="icon-wrapper"><i class="<?= $this->itemTypeToIconClass($item, $itemType) ?>"></i></div>
                 </div>
             <?php else: ?>
                 <?= $this->makePartial('thumbnail-image', [
-                    'isError' => $this->thumbnailIsError($thumbnailPath),
-                    'imageUrl' => $this->getThumbnailImageUrl($thumbnailPath)
+                    'imageUrl' => $thumbnailPath
                 ]) ?>
             <?php endif ?>
         </div>

modules/backend/widgets/mediamanager/partials/_thumbnail-image.php

@@ -1,6 +1,6 @@
-<?php if (!$isError): ?>
+<?php if ($imageUrl): ?>
     <img src="<?= $imageUrl ?>"/>
 <?php else: ?>
     <i class="icon-chain-broken" title="<?= e(trans('backend::lang.media.thumbnail_error')) ?>"></i>
     <p class="thumbnail-error-message"><?= e(trans('backend::lang.media.thumbnail_error')) ?></p>
-<?php endif ?>
+<?php endif ?>