Resize Image In Laravel Using Intervention Image Library

Recently one of our readers asked how to resize image in Laravel. Image resizing is a very common task in the web development. In this article, we study how to resize image in Laravel using Intervention Image library.

Intervention Image provides a very clean way to resize your images. This library uses GD Library and Imagick for image manipulation.

Why Should Resize Images?

While working on a gallery, we always display the small thumbnail in the listing. When someone clicks on the thumbnail then we show a large portion of the image. The thumbnails are the resized version of your original image.

Let’s say our original image size is 500*500 and our thumbnail container is 200*200. In this case, we should resize our original image as per thumbnail container. Using large size image in the small container is a bad practice. It also affects your website performance.

Having said that, let’s take a look at how to resize image using Intervention Image library.

Installation

At first, we need to install the Intervention Image library in Laravel. You should have Composer installed on your system. Open the terminal in your project root directory and run the command below:

composer require intervention/image

After installing the library, open config/app.php file and add the following lines.

Add the service providers for this package in the $providers array.

Intervention\Image\ImageServiceProvider::class

Add the facade to the $aliases array.

'Image' => Intervention\Image\Facades\Image::class

Resize Image In Laravel

For resizing image, we need to first write a code for uploading an image. We need to create a directory where we store all uploaded files. Head over to the terminal and run the command as follows:

php artisan storage:link

This command creates a storage directory under the public folder.

Now, let’s create a form in our view file.

<form action="{{ url('PASS_ACTION_URL') }}" method="post" enctype="multipart/form-data">
    <div class="form-group">
        <label for="exampleInputFile">File input</label>
        <input type="file" name="profile_image" id="exampleInputFile">
    </div>
    {{ csrf_field() }}
    <button type="submit" class="btn btn-default">Submit</button>
</form>

In our controller, we need to add our library facade ‘Image’ which we have added in our config/app.php file.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Image;

class ImageController extends Controller
{

}

By adding the facade, we are able to call resize functions of Intervention Image library. In the below code, we will upload our file in two places. One is the original image. The second one is under thumbnail directory. We first upload the original image in thumbnail folder and then resize it.

public function store(Request $request)
{
    if($request->hasFile('profile_image')) {
        //get filename with extension
        $filenamewithextension = $request->file('profile_image')->getClientOriginalName();

        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

        //get file extension
        $extension = $request->file('profile_image')->getClientOriginalExtension();

        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;

        //Upload File
        $request->file('profile_image')->storeAs('public/profile_images', $filenametostore);
        $request->file('profile_image')->storeAs('public/profile_images/thumbnail', $filenametostore);

        //Resize image here
        $thumbnailpath = public_path('storage/profile_images/thumbnail/'.$filenametostore);
        $img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
            $constraint->aspectRatio();
        });
        $img->save($thumbnailpath);

        return redirect('images')->with('success', "Image uploaded successfully.");
    }
}

Here we are resizing the image proportionally. Doing so, we keep the aspect ratio and image will not cut off. We are passing width as 400 and height as 150. You can change these values as per your requirement.

If you are looking for hard crop then replace below lines

$img = Image::make($thumbnailpath)->resize(400, 150, function($constraint) {
    $constraint->aspectRatio();
});
$img->save($thumbnailpath);

With

$img = Image::make($thumbnailpath)->resize(100, 100)->save($thumbnailpath);

We hope you may learn about resize image in Laravel using Intervention Image library. Please share your thoughts in the comment section below.

Related Articles

  • A Guide To Upload And Compress Images In Laravel
  • Resize Image In PHP Using TinyPNG
  • If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

    Recommended Tutorials For You

    Leave a Reply

    Your email address will not be published. Required fields are marked *