Laravel 11 Resize Image Intervention Tutorial

In Laravel 11, the intervention package allows users to resize the image before uploading or storing it in the database and project folder.

Let’s get started installing and using Image Intervention package to resize an image before uploading:

Step 1: Install Intervention Image

Run the following command to install the Intervention Image package in your Laravel project directory:

composer require intervention/image

Step 2: Create a Controller

Create a controller class by running the following command on cmd:

php artisan make:controller ImageController

Step 3: Add the Resize Image Method to the Controller

Open the ImageController.php file from app/Http/Controllers directory and add a method to handle image resizing:

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Facades\Image;

class ImageController extends Controller
{
    public function index(): View
    {
        return view('image');
    }
    
    public function resizeImage(Request $request)
    {
        $image = $request->file('image');

        // Resize image to 300x300
        $resizedImage = Image::make($image)->resize(300, 300)->encode();

        // Store resized image
        $path = 'images/resized/' . $image->hashName();
        Storage::disk('public')->put($path, $resizedImage);

        return response()->json(['path' => $path]);
    }
}

Step 4: Define Routes

Open the routes/web.php file and add the route to access the ImageController controller method:

use App\Http\Controllers\ImageController;

Route::get('image-upload', [ImageController::class, 'index']);
Route::post('/resize-image', [ImageController::class, 'resizeImage']);

Step 5: Create View

Create a view named image.blade.php in the resources/views directory, and create an HTML form to upload the image for resizing using intervention in this file:

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Resize Image Before Upload Example - Itcodstuff.com</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" />
</head>
        
<body>
<div class="container">
  
    <div class="card mt-5">
        <h3 class="card-header p-3"><i class="fa fa-star"></i> Laravel 11 Resize Image Before Upload Example - Itcodstuff.com</h3>
        <div class="card-body">

            @if (count($errors) > 0)
                <div class="alert alert-danger">
                    <strong>Whoops!</strong> There were some problems with your input.<br><br>
                    <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                    </ul>
                </div>
            @endif
  
            
            <form action="{{ url('resize-image') }}" method="POST" enctype="multipart/form-data">
                @csrf
        
                <div class="mb-3">
                    <label class="form-label" for="inputImage">Image:</label>
                    <input 
                        type="file" 
                        name="image" 
                        id="inputImage"
                        class="form-control @error('image') is-invalid @enderror">
        
                    @error('image')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
         
                <div class="mb-3">
                    <button type="submit" class="btn btn-success"><i class="fa fa-save"></i> Upload</button>
                </div>
             
            </form>
        </div>
    </div>
</div>
</body>
</html>

Step 6: Test Your Application

You can now use the /image route on a browser to test this application.