Added mulit image-type compatability to manager & app and added scaled image selection

app/Http/Controllers/ImageController.php

@@ -33,23 +33,24 @@ class ImageController extends Controller
 
 
     /**
-     * Get all images, Paginated
+     * Get all gallery images, Paginated
      * @param int $page
      * @return \Illuminate\Http\JsonResponse
      */
-    public function getAllGallery($page = 0)
+    public function getAllByType($type, $page = 0)
     {
-        $imgData = $this->imageRepo->getAllGallery($page);
+        $imgData = $this->imageRepo->getPaginatedByType($type, $page);
         return response()->json($imgData);
     }
 
 
     /**
      * Handles image uploads for use on pages.
+     * @param string  $type
      * @param Request $request
      * @return \Illuminate\Http\JsonResponse
      */
-    public function uploadGallery(Request $request)
+    public function uploadByType($type, Request $request)
     {
         $this->checkPermission('image-create');
         $this->validate($request, [
@@ -57,10 +58,25 @@ class ImageController extends Controller
         ]);
 
         $imageUpload = $request->file('file');
-        $image = $this->imageRepo->saveNew($imageUpload, 'gallery');
+        $image = $this->imageRepo->saveNew($imageUpload, $type);
         return response()->json($image);
     }
 
+    /**
+     * Generate a sized thumbnail for an image.
+     * @param $id
+     * @param $width
+     * @param $height
+     * @param $crop
+     * @return \Illuminate\Http\JsonResponse
+     */
+    public function getThumbnail($id, $width, $height, $crop)
+    {
+        $this->checkPermission('image-create');
+        $image = $this->imageRepo->getById($id);
+        $thumbnailUrl = $this->imageRepo->getThumbnail($image, $width, $height, $crop == 'false');
+        return response()->json(['url' => $thumbnailUrl]);
+    }
 
     /**
      * Update image details

app/Http/Controllers/UserController.php

@@ -18,7 +18,8 @@ class UserController extends Controller
 
     /**
      * UserController constructor.
-     * @param $user
+     * @param User     $user
+     * @param UserRepo $userRepo
      */
     public function __construct(User $user, UserRepo $userRepo)
     {

app/Http/routes.php

@@ -57,10 +57,12 @@ Route::group(['middleware' => 'auth'], function () {
 
     // Image routes
     Route::group(['prefix' => 'images'], function() {
-        Route::get('/gallery/all', 'ImageController@getAllGallery');
+        // Standard get, update and deletion for all types
-        Route::get('/gallery/all/{page}', 'ImageController@getAllGallery');
+        Route::get('/thumb/{id}/{width}/{height}/{crop}', 'ImageController@getThumbnail');
-        Route::post('/gallery/upload', 'ImageController@uploadGallery');
         Route::put('/update/{imageId}', 'ImageController@update');
+        Route::post('/{type}/upload', 'ImageController@uploadByType');
+        Route::get('/{type}/all', 'ImageController@getAllByType');
+        Route::get('/{type}/all/{page}', 'ImageController@getAllByType');
         Route::delete('/{imageId}', 'ImageController@destroy');
     });
 

app/Repos/ImageRepo.php

@@ -52,15 +52,15 @@ class ImageRepo
 
 
     /**
-     * Get all images for the standard gallery view that's used for
+     * Gets a load images paginated, filtered by image type.
-     * adding images to shared content such as pages.
+     * @param string $type
      * @param int    $page
      * @param int    $pageSize
      * @return array
      */
-    public function getAllGallery($page = 0, $pageSize = 24)
+    public function getPaginatedByType($type, $page = 0, $pageSize = 24)
     {
-        $images = $this->image->where('type', '=', 'gallery')
+        $images = $this->image->where('type', '=', strtolower($type))
             ->orderBy('created_at', 'desc')->skip($pageSize * $page)->take($pageSize + 1)->get();
         $hasMore = count($images) > $pageSize;
 
@@ -191,7 +191,7 @@ class ImageRepo
      * @param bool  $keepRatio
      * @return string
      */
-    private function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
+    public function getThumbnail(Image $image, $width = 220, $height = 220, $keepRatio = false)
     {
         $thumbDirName = '/' . ($keepRatio ? 'scaled-' : 'thumbs-') . $width . '-' . $height . '/';
         $thumbFilePath = dirname($image->path) . $thumbDirName . basename($image->path);

resources/assets/js/components/image-manager.vue

@@ -76,6 +76,22 @@
             }
         },
 
+        props: {
+            imageType: {
+                type: String,
+                required: true
+            },
+            resizeWidth: {
+                type: String
+            },
+            resizeHeight: {
+                type: String
+            },
+            resizeCrop: {
+                type: Boolean
+            }
+        },
+
         created: function () {
             window.ImageManager = this;
         },
@@ -88,7 +104,7 @@
         methods: {
             fetchData: function () {
                 var _this = this;
-                this.$http.get('/images/gallery/all/' + _this.page, function (data) {
+                this.$http.get('/images/' + _this.imageType + '/all/' + _this.page, function (data) {
                     _this.images = _this.images.concat(data.images);
                     _this.hasMore = data.hasMore;
                     _this.page++;
@@ -98,7 +114,7 @@
             setupDropZone: function () {
                 var _this = this;
                 var dropZone = new Dropzone(_this.$els.dropZone, {
-                    url: '/images/gallery/upload',
+                    url: '/images/' + _this.imageType + '/upload',
                     init: function () {
                         var dz = this;
                         this.on("sending", function (file, xhr, data) {
@@ -120,6 +136,24 @@
                 });
             },
 
+            returnCallback: function (image) {
+                var _this = this;
+                var isResized = _this.resizeWidth && _this.resizeHeight;
+
+                if (!isResized) {
+                    _this.callback(image);
+                    return;
+                }
+
+                var cropped = _this.resizeCrop ? 'true' : 'false';
+                var requestString = '/images/thumb/' + image.id + '/' + _this.resizeWidth + '/' + _this.resizeHeight + '/' + cropped;
+                _this.$http.get(requestString, function(data) {
+                    image.thumbs.custom = data.url;
+                    _this.callback(image);
+                });
+
+            },
+
             imageClick: function (image) {
                 var dblClickTime = 380;
                 var cTime = (new Date()).getTime();
@@ -127,7 +161,7 @@
                 if (this.cClickTime !== 0 && timeDiff < dblClickTime && this.selectedImage === image) {
                     // DoubleClick
                     if (this.callback) {
-                        this.callback(image);
+                        this.returnCallback(image);
                     }
                     this.hide();
                 } else {
@@ -139,7 +173,7 @@
 
             selectButtonClick: function () {
                 if (this.callback) {
-                    this.callback(this.selectedImage);
+                    this.returnCallback(this.selectedImage);
                 }
                 this.hide();
             },

resources/assets/js/components/image-picker.vue

@@ -24,7 +24,7 @@
             showImageManager: function(e) {
                 var _this = this;
                 ImageManager.show(function(image) {
-                    _this.image = image.url;
+                    _this.image = image.thumbs.custom || image.url;
                 });
             },
             reset: function() {

resources/views/pages/create.blade.php

@@ -16,5 +16,5 @@
             @endif
         </form>
     </div>
-    <image-manager></image-manager>
+    <image-manager image-type="gallery"></image-manager>
 @stop

resources/views/pages/edit.blade.php

@@ -14,6 +14,6 @@
             @include('pages/form', ['model' => $page])
         </form>
     </div>
-    <image-manager></image-manager>
+    <image-manager image-type="gallery"></image-manager>
 
 @stop

resources/views/settings/index.blade.php

@@ -32,7 +32,7 @@
             <div class="col-md-6">
                 <div class="form-group" id="logo-control">
                     <label for="setting-app-logo">Application Logo</label>
-                    <p class="small">This image should be 43px in height. </p>
+                    <p class="small">This image should be 43px in height. <br>Large images will be scaled down.</p>
                     <image-picker current-image="{{ Setting::get('app-logo', '') }}" default-image="/logo.png" name="setting-app-logo" image-class="logo-image"></image-picker>
                 </div>
             </div>
@@ -86,6 +86,6 @@
 
 </div>
 
-<image-manager></image-manager>
+<image-manager image-type="system" resize-height="43" resize-width="200"></image-manager>
 
 @stop