Resize Image In Laravel Using Intervention Image Library

Recently one of our readers asked how to resize the image in Laravel. Image resizing is a very common task in web development. It’s a good practice to use the images as per container size. It helps you to improve your page speed. In this article, we study how to resize the image in Laravel using Intervention Image library.

We are going to use Intervention Image library which provides an easy way to resize your images. This library uses GD Library and Imagick for image manipulation under the hood.

Why Should Resize Images?

Let’s take an example of a gallery. While working on a gallery, we normally 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 a large size image in the small container is a bad practice. It also affects your website performance.

This is one example of why should we resize the images for the website. There are many others as well. Having said that, let’s take a look at how to resize the image using the 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 in it.

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

Intervention\Image\ImageServiceProvider::class

Next 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 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. In the storage folder, we will store our uploaded images full and thumbnail versions.

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 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 the thumbnail directory. We first upload the original image in the 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 resizing the 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.

    1 thought on “Resize Image In Laravel Using Intervention Image Library

    1. after complete and write your code show this error-
      “The file “abc.jpg” was not uploaded due to an unknown error.”
      how to solve this?

    Leave a Reply

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