Suppose you want to upload only a specific range of images in your Laravel application. So you can validate the image before submitting that, hey user, you can only be able to store 100 into 100 ratio image. This is good that you are giving ratio validation before uploading the images.

But you can do such a thing that, whatever ratio images the user gives input, you can resize it like your own and then save it. In this case, the image intervention package is there. So in this tutorial, we will see laravel image intervention install and then laravel image intervention compress and then laravel image intervention resize and finally laravel image intervention save.

In this laravel image intervention tutorial, you will see how to user make(), resize(), crop(), circle() methods, and chain them with image intervention. Image intervention provides us with many helper methods and we can chain them to refactor our desired image.

So let's see the preview of laravel 10 image interventio:

laravel-10-image-intervention-example

Step 1: Download Fresh Laravel

In this first step, we need a fresh Laravel 10 application for the laravel image intervention. So download it by the below command:

composer create-project laravel/laravel example-app

 

Step 2: Create Model

We are going to use the Image model. Now create an image model and update it like below:

database/migrations

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('images', function (Blueprint $table) {
            $table->id();
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('images');
    }
};

 

And now update the model like:

app/Models/Image.php

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Image extends Model
{
    use HasFactory;

    protected $fillable = [
        'name'
    ];
}

 

Step 3: Connect database

After successfully installing the laravel app and then configuring the database setup like below to create this interventionimage laravel 10.

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password

 

Now run php artisan migrate command to update the database. 

php artisan migrate

 

Read also: Laravel 10 Upload Image To Storage Folder

 

Step 4:  Create Route

Now in this step, we have to create a route to create laravel image intervention tutorial.

routes/web.php

<?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TutorialController;

Route::get('/', [TutorialController::class,'index'])->name('welcome');
Route::post('/', [TutorialController::class,'store'])->name('store');

 

Step 6: Install Image Intervention

Now in this step, we have to install image intervention package to our latest laravel 10 application. So run this composer command to install it:

composer require intervention/image

 

Step 7: Create Controller

Now in this step, we have to create a TutorialController to define this method to create how to resize image using image intervention in laravel.

php artisan make:controller TutorialController

 

Now update the controller like the below:

app/Http/Controllers/TutorialController.php

<?php

namespace App\Http\Controllers;

use App\Models\Image;
use Illuminate\Http\Request;
use Intervention\Image\Facades\Image as ResizeImage;

class TutorialController extends Controller
{
    public function index()
    {
        return view('welcome');
    }

    public function store(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg|max:2048',
        ]);

        $path = public_path('images/');
        !is_dir($path) &&
            mkdir($path, 0777, true);

        $name = time() . '.' . $request->image->extension();
        ResizeImage::make($request->file('image'))
            ->resize(100, 100)
            ->save($path . $name);

        $image = new Image();
        $image->name = $name;
        $image->save();

        return redirect()
            ->back()
            ->with('success', 'Image successfully upload.');
    }
}

 

Step 8: Create Views

In this step, we will create a form for laravel 10 image interventio. So update the welcome file like below:

resources/views/welcome.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header" style="background: gray; color:#f1f7fa; font-weight:bold;">
                    Laravel 10 Image Intervention Example- Laravelia
                </div>
                 <div class="card-body">                    
                    <form class="w-px-500 p-3 p-md-3" action="{{ route('store') }}" method="post" enctype="multipart/form-data">
                        @csrf
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label">Image</label>
                            <div class="col-sm-9">
                              <input type="file" class="form-control" name="image" @error('image') is-invalid @enderror id="selectImage">
                            </div>
                            @error('image')
                                <span class="invalid-feedback" role="alert">
                                    <strong>{{ $message }}</strong>
                                </span>
                            @enderror
                            <img id="preview" src="#" alt="your image" class="mt-3" style="display:none;"/>
                        </div>
                        <div class="row mb-3">
                            <label class="col-sm-3 col-form-label"></label>
                            <div class="col-sm-9">
                                <button type="submit" class="btn btn-success btn-block">Submit</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection
@push('script')
    <script>
        selectImage.onchange = evt => {
            preview = document.getElementById('preview');
            preview.style.display = 'block';
            const [file] = selectImage.files
            if (file) {
                preview.src = URL.createObjectURL(file)
            }
        }
    </script>
@endpush

 

Now we need to create a master file. So create a app.blade.php file and add it to the following path:

resources/views/layouts/app.blade.php

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSRF Token -->
    <meta name="csrf-token" content="{{ csrf_token() }}">

    <title>{{ config('app.name', 'Laravel') }}</title>
    
    <!-- Tailwindcss -->
    <script src="https://cdn.tailwindcss.com"></script>

    <!-- Scripts -->
    @vite(['resources/sass/app.scss', 'resources/js/app.js'])
    @stack('style')
</head>
<body>
    <div id="app">
        <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm">
            <div class="container">
                <a class="navbar-brand" href="{{ url('/') }}">
                    Laravelia
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <!-- Left Side Of Navbar -->
                    <ul class="navbar-nav me-auto">

                    </ul>

                    <!-- Right Side Of Navbar -->
                    <ul class="navbar-nav ms-auto">
                        <!-- Authentication Links -->
                        @guest
                            @if (Route::has('login'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
                                </li>
                            @endif

                            @if (Route::has('register'))
                                <li class="nav-item">
                                    <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
                                </li>
                            @endif
                        @else
                            <li class="nav-item dropdown">
                                <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
                                    {{ Auth::user()->name }}
                                </a>

                                <div class="dropdown-menu dropdown-menu-end" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="{{ route('logout') }}"
                                       onclick="event.preventDefault();
                                                     document.getElementById('logout-form').submit();">
                                        {{ __('Logout') }}
                                    </a>

                                    <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
                                        @csrf
                                    </form>
                                </div>
                            </li>
                        @endguest
                    </ul>
                </div>
            </div>
        </nav>

        <main class="py-4" style="background: #f1f7fa;">
            @yield('content')
        </main>
    </div>
    @stack('script')
</body>
</html>

 

Read also: All File Upload Process In Laravel

 

Conclusion

Now we know how to resize and compress image in Laravel 10 using php image intervention package. Hope we can use laravel image intervention. Hope this laravel image intervention tutorial will clarify your concept about laravel intervention.

Category : #laravel

Tags : #laravel , #file upload