diff --git a/app/Http/Controllers/ImageController.php b/app/Http/Controllers/ImageController.php index 7e7fedfde..23f5446d6 100644 --- a/app/Http/Controllers/ImageController.php +++ b/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 diff --git a/app/Http/Controllers/UserController.php b/app/Http/Controllers/UserController.php index ed9deab2d..d1c328b86 100644 --- a/app/Http/Controllers/UserController.php +++ b/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) { diff --git a/app/Http/routes.php b/app/Http/routes.php index 5b1e245a1..274fccbff 100644 --- a/app/Http/routes.php +++ b/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'); - Route::get('/gallery/all/{page}', 'ImageController@getAllGallery'); - Route::post('/gallery/upload', 'ImageController@uploadGallery'); + // Standard get, update and deletion for all types + Route::get('/thumb/{id}/{width}/{height}/{crop}', 'ImageController@getThumbnail'); 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'); }); diff --git a/app/Repos/ImageRepo.php b/app/Repos/ImageRepo.php index 2699b9e97..0da243f7c 100644 --- a/app/Repos/ImageRepo.php +++ b/app/Repos/ImageRepo.php @@ -52,15 +52,15 @@ class ImageRepo /** - * Get all images for the standard gallery view that's used for - * adding images to shared content such as pages. - * @param int $page - * @param int $pageSize + * Gets a load images paginated, filtered by image type. + * @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); diff --git a/resources/assets/js/components/image-manager.vue b/resources/assets/js/components/image-manager.vue index bb691760b..c47fee184 100644 --- a/resources/assets/js/components/image-manager.vue +++ b/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(); }, diff --git a/resources/assets/js/components/image-picker.vue b/resources/assets/js/components/image-picker.vue index a52cd3661..4318ea1f0 100644 --- a/resources/assets/js/components/image-picker.vue +++ b/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() { diff --git a/resources/views/pages/create.blade.php b/resources/views/pages/create.blade.php index 4399de854..6db60a0b9 100644 --- a/resources/views/pages/create.blade.php +++ b/resources/views/pages/create.blade.php @@ -16,5 +16,5 @@ @endif - + @stop \ No newline at end of file diff --git a/resources/views/pages/edit.blade.php b/resources/views/pages/edit.blade.php index 7261da8f5..d89daf250 100644 --- a/resources/views/pages/edit.blade.php +++ b/resources/views/pages/edit.blade.php @@ -14,6 +14,6 @@ @include('pages/form', ['model' => $page]) - + @stop \ No newline at end of file diff --git a/resources/views/settings/index.blade.php b/resources/views/settings/index.blade.php index ebf538198..759bb1678 100644 --- a/resources/views/settings/index.blade.php +++ b/resources/views/settings/index.blade.php @@ -32,7 +32,7 @@
-

This image should be 43px in height.

+

This image should be 43px in height.
Large images will be scaled down.

@@ -86,6 +86,6 @@ - + @stop