diff --git a/app/Console/Commands/thumbnail.php b/app/Console/Commands/thumbnail.php new file mode 100644 index 0000000..a2c0da3 --- /dev/null +++ b/app/Console/Commands/thumbnail.php @@ -0,0 +1,42 @@ +format('Y/m/d'); - $backupdir = sprintf('upload/images/backup/%s',$backupdir); + $backupdir = sprintf($location.'/backup/%s',$backupdir); $bckfile = Carbon::now()->format('Hi'); $bckfile = sprintf('%s.jpg',$bckfile); // Upload file $file->move($backupdir,$bckfile); \File::copy($backupdir."/".$bckfile,$location."/".$filename); + $image = Image::make($backupdir."/".$bckfile)->resize(160, 120); + $image->save( config('app.image.thumb_dir').'/'.$bckfile); echo 'Upload Successful.'; }else{ echo 'File too large. File must be less than 2MB.'; diff --git a/composer.json b/composer.json index 967011e..ccc81ce 100644 --- a/composer.json +++ b/composer.json @@ -10,6 +10,7 @@ "require": { "php": "^7.2.5|^8.0", "fideloper/proxy": "^4.4", + "intervention/image": "^2.6", "laravel/framework": "^6.20", "laravel/tinker": "^2.5", "laravel/ui": "1.*", diff --git a/composer.lock b/composer.lock index 49f02fd..af3261f 100644 --- a/composer.lock +++ b/composer.lock @@ -4,7 +4,7 @@ "Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies", "This file is @generated automatically" ], - "content-hash": "3061c7e401dd79848d53eb3a6d99d324", + "content-hash": "11becec6f16dbcd46b90d4bd089913ff", "packages": [ { "name": "dnoegel/php-xdg-base-dir", @@ -706,6 +706,90 @@ }, "time": "2020-12-26T17:45:17+00:00" }, + { + "name": "intervention/image", + "version": "2.6.1", + "source": { + "type": "git", + "url": "https://github.com/Intervention/image.git", + "reference": "0925f10b259679b5d8ca58f3a2add9255ffcda45" + }, + "dist": { + "type": "zip", + "url": "https://api.github.com/repos/Intervention/image/zipball/0925f10b259679b5d8ca58f3a2add9255ffcda45", + "reference": "0925f10b259679b5d8ca58f3a2add9255ffcda45", + "shasum": "" + }, + "require": { + "ext-fileinfo": "*", + "guzzlehttp/psr7": "~1.1 || ^2.0", + "php": ">=5.4.0" + }, + "require-dev": { + "mockery/mockery": "~0.9.2", + "phpunit/phpunit": "^4.8 || ^5.7 || ^7.5.15" + }, + "suggest": { + "ext-gd": "to use GD library based image processing.", + "ext-imagick": "to use Imagick based image processing.", + "intervention/imagecache": "Caching extension for the Intervention Image library" + }, + "type": "library", + "extra": { + "branch-alias": { + "dev-master": "2.4-dev" + }, + "laravel": { + "providers": [ + "Intervention\\Image\\ImageServiceProvider" + ], + "aliases": { + "Image": "Intervention\\Image\\Facades\\Image" + } + } + }, + "autoload": { + "psr-4": { + "Intervention\\Image\\": "src/Intervention/Image" + } + }, + "notification-url": "https://packagist.org/downloads/", + "license": [ + "MIT" + ], + "authors": [ + { + "name": "Oliver Vogel", + "email": "oliver@olivervogel.com", + "homepage": "http://olivervogel.com/" + } + ], + "description": "Image handling and manipulation library with support for Laravel integration", + "homepage": "http://image.intervention.io/", + "keywords": [ + "gd", + "image", + "imagick", + "laravel", + "thumbnail", + "watermark" + ], + "support": { + "issues": "https://github.com/Intervention/image/issues", + "source": "https://github.com/Intervention/image/tree/2.6.1" + }, + "funding": [ + { + "url": "https://www.paypal.me/interventionphp", + "type": "custom" + }, + { + "url": "https://github.com/Intervention", + "type": "github" + } + ], + "time": "2021-07-22T14:31:53+00:00" + }, { "name": "laravel/framework", "version": "v6.20.9", @@ -7230,5 +7314,5 @@ "php": "^7.2.5|^8.0" }, "platform-dev": [], - "plugin-api-version": "2.0.0" + "plugin-api-version": "2.1.0" } diff --git a/config/app.php b/config/app.php index 9e5b36c..fec62c7 100644 --- a/config/app.php +++ b/config/app.php @@ -175,6 +175,7 @@ return [ App\Providers\EventServiceProvider::class, App\Providers\RouteServiceProvider::class, + Intervention\Image\ImageServiceProvider::class, ], /* @@ -226,6 +227,14 @@ return [ 'Validator' => Illuminate\Support\Facades\Validator::class, 'View' => Illuminate\Support\Facades\View::class, + 'Image' => Intervention\Image\Facades\Image::class, ], + /* + Upload file path + */ + 'image' => [ 'dir' => 'upload/images', + 'thumb_dir' => 'upload/images/thumb', + 'thumb_width' => 160, + 'thumb_height' => 120], ]; diff --git a/config/image.php b/config/image.php new file mode 100644 index 0000000..2b1d2c3 --- /dev/null +++ b/config/image.php @@ -0,0 +1,20 @@ + 'gd' + +]; diff --git a/package.json b/package.json index 0933441..27a8435 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "moment": "^2.29.1", "vue-datetime": "^1.0.0-beta.14", "vue-dygraphs": "^0.1.2", + "vue-gallery-slideshow": "^1.5.2", "vue-table-dynamic": "^0.4.1", "vuejs-thermometer": "^0.1.3", "weekstart": "^1.0.1" diff --git a/resources/js/app.js b/resources/js/app.js index 9eb9965..aac2ff0 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -51,6 +51,9 @@ Vue.use(CardPlugin); import { BButton } from 'bootstrap-vue' Vue.component('b-button', BButton); +import VueGallerySlideshow from 'vue-gallery-slideshow'; +Vue.use(VueGallerySlideshow); + //(function () { var app = new Vue({ el: '#app', @@ -100,6 +103,7 @@ Vue.component('b-button', BButton); } }, series: { "temperature" : [], "humidity" : [], "pressure": [] }, + images: { "images-0": {'/upload/images/camera.jpg'}, "images-1": {}, "images-2": {} } }, mounted: function () { console.log('MOUNTED'); diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index 8983c0f..c055662 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -184,8 +184,20 @@
+
+
+