Laravel Image Intervention Tutorial With Example
How to use Intervention Image in Laravel 5 with Example.
In this tutorial we will show how to use Intervention image manipulation package in Laravel. Basically we use this package to upload an image and resize it in the server. Common use cases are upload users photo or upload a product image etc.
Laravel Image Intervention Tutorial With Example
Step 1: Install Laravel in your development server
composer create-project --prefer-dist laravel/laravel laravel_intervention
This command will install the latest Laravel in your development server.
Step2: Config database options
After you install Laravel package, find a file named .env in the root folder. As we said earlier, .env file is responsible for saving config options.
Open .env file and update below lines with your database options.
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 DB_DATABASE=tutorial DB_USERNAME=root DB_PASSWORD=password0909
Step 3: Create Model & Migration
Let’s say, we have a product database. I am not going very deeper or full detailed product, just want to show a simple product example. So our product has 2 fields name, image. Learn Health idea’s and Tips
Run the below command to create a new migration in Laravel
php artisan make:migration create_products_table
Open the file located in database/migrations/2018_10_31_104226_create_products_table.php. First 3 section of the file will be different for you as it is the timestamp for the file generated.
/** * Run the migrations. * * @return void */ public function up() { Schema::create('submissions', function (Blueprint $table) { $table->increments('id'); $table->string('name'); $table->string('image'); $table->timestamps(); }); }
So you want to add the fields to be generated in the migration file. Now we have a name and image field there. Then run the following command to create the database table.
php artisan migrate
So we are done with the database table. Now let’s create the model file, by running the below command.
php artisan make:model Product
Step 3: create the view file
Save the below blade file in resources/views/create.blade.php
<html lang="en"> <head> <title>Laravel Image Intervention</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> </head> <body> <div class="container"> <h3 class="jumbotron">Laravel Image Manipulation </h3> <form method="post" action="{{url('products')}}" enctype="multipart/form-data"> @csrf <div class="row"> <div class="form-group"> <input type="text" name="name" class="form-control" placeholder="Name"> </div> <div class="form-group"> <input type="file" name="image" class="form-control"> </div> <div class="form-group"> <button type="submit" class="btn btn-success">Upload Image</button> </div> </div> @csrf </form> </div> </body> </html>
Step 4: Create the controller & Route
Run the below command to create the controller
php artisan make:controller ProductController --resource
This will create a file in app/Http/Controllers/ProductController.php.You may notice I have used –resoruce at the end of the command, this will generate a skeleton for basic CRUD operation.
Next, you can register the routes in routes/web.php
Route::resource('products', 'ProductController');
Since you are using resource route, you don’t need to write down separate routes for CRUD operations. Laravel is brilliant enough to detect that from URL and HTTP methods.
/** * Show the form for creating a new resource. * * @return \Illuminate\Http\Response */ public function create() { return view('create'); }
Let’s test the application in the browser. Go to your browser and access the URL to your application.
Step 6: Install Intervention Image Package
Now it’s the time to install the intervention image package. move to your terminal and run the below command
composer require intervention/image
Find the providers in config >> app.php file and register the ImageServiceProvider.
'providers' => [ // ... Intervention\Image\ImageServiceProvider::class, ] Locate the aliases in config >> app.php file and register the aliases. 'aliases' => [ // ... 'Image' => Intervention\Image\Facades\Image::class, ]
Step 7: Submit the form and upload the image
//ProductController.php use App\Product; use Image; public function store(Request $request) { $image = $request->file('image'); $filename = $image->getClientOriginalName(); //Fullsize $image->move(public_path().'/full/',$filename); $image_resize = Image::make(public_path().'/full/'.$filename); $image_resize->fit(300, 300); $image_resize->save(public_path('thumbnail/' .$filename)); $product= new Product(); $product->name = $request->name; $product->image = $filename; $product->save(); return back()->with('success', 'Your product saved with image!!!'); }
Hope you have followed Laravel Image Intervention Tutorial.
One Comment