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 regular task for developers. The developers should do it correctly. It’s a good practice to resize the images as per its container size. It helps you to improve page speed. In this article, we study how to resize the image in Laravel using the Intervention Image library.

Intervention Image library provides an easy way to resize the images. This library uses GD Library and Imagick for image manipulation under the hood.

Why Should Resize Images?

Take the 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 an original image. Here, the thumbnails are the resized version of the original image.

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

This is one example of why we should resize the images. There are many others as well. Having said that, let’s take a look at how to resize the image in Laravel using the Intervention Image library.

Installation

For getting started, you need to install the Intervention Image library in your Laravel project. 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 provider of this package to 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

To resize the image, we have to first write code for uploading an image. So first create a directory where we will store the images. Head over to the terminal and run the command:

php artisan storage:link

This command creates a ‘storage’ directory under the ‘public’ folder. In the ‘storage’ folder, we will store a full and a thumbnail version of the images.

Next, create a form in your view file. I am also adding code for the success message in the blade file.

@if (session('success'))
    <div class="alert alert-success">
        {{ session('success') }}
    </div>
@endif
<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>

Replace the placeholder ‘PASS_ACTION_URL’ with your route.

In the controller, it is needed to add the facade ‘Image’ of a library which we have added in the 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 the Intervention Image library. In the below code, I will upload the image in two places. One is the original image under the ‘profile_images’ folder. The second one is under the ‘profile_images/thumbnail’ directory. I will 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('image')->with('success', "Image uploaded successfully."); //change the route as per your flow
    }
}

Here I am resizing the image proportionally. Doing so, you keep the aspect ratio and the image will not cut off. I have passed width as 400 and height as 150. You can change these values as per your requirement.

If you are looking for hard cropping 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);

After this, you will get the thumbnail with a dimension of 100*100.

I hope you may learn about resizing the image in Laravel using the Intervention Image library. Please share your thoughts and suggestions in the comment section below.

Related Articles

  • Image Optimization using artisansweb/image-optimizer Package
  • 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.

    4 thoughts on “Resize Image In Laravel Using Intervention Image Library

    1. Thanks for this tuto. It help mea lot.But is there any way to change the image background color? I’m working on an e-commerce and i want all the uploaded items images get a white background. I can do that by using PhotoShop in each image before uploading them but it’s little bit struggle. Coul you please provide me any solution ?

    2. 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 *