Laravel upload Image with resizing, cropping using Image Intervention package

We will cover how to resize,crop and upload image in laravel using a laravel package called Image Intervention. Lots of developers upload images without cropping, resizing . It causes browsers to load original large images uploaded by the admin or end user . In this way the website becomes slower to load , it will affect SEO ranking. So we must resize,crop actual large images to some other thumbnail size for listing purposes. We will also upload the images using the year,month folder structure. So, that it will easier to manage, backup these images on server. Here in this tutorial we will upload the same image in 2 times. One for an actual large image and other for a thumbnail cropped image of fixed size. Let's start the steps from beginning.

1) Install the Laravel Image Intervention Package

Intervention Image is a PHP image editing and handling package that is open source. It makes it easier and more expressive to create, edit, and compose pictures, and it currently supports the two most popular image processing libraries, GD Library and Imagick. The class was created to make image handling in PHP easier and more expressive. Whether you want to produce picture thumbnails, watermarks, or format big image files, Intervention Image makes it easy to do it with as few lines of code as possible. The library is completely unit-tested and adheres to the FIG standard PSR-2 to provide a high level of compatibility with common PHP code. Open your laravel command terminal and execute below

It will install this package in your laravel Now, After you have installed Intervention Image, open your Laravel config file config/app.php and add the following lines. In the $providers array add the service providers for this package.

Add the facade of this package to the $aliases array.

Now the Image Class will be auto-loaded by Laravel.

2) function to upload, resize,crop the uploaded image

first of all inject below in your required controller class use Image; use File; use Validator; Then put below inside your function where you handling image upload

Let 's explain the above code step by step to make it more clear

In the above lines we have validated the image to check whether it is an image not another file like pdf, doc, xls etc . Then we also validated for image extension. We fixed only accepted images of jpeg, png, jpg, gif, webp,svg . This validation is required , we can't trust the end user because some hacker can also upload malicious code to hack the website.

In above we check whether it is a valid image and not corrupted . Then we get it's original name . We also replace white space with this symbol '-' because users can upload any images containing white space but in background usage of the image if it has white space then it can't load. So, these steps are also required. Then we use PHP rand() function and time() function to add some unique number with the actual image name to avoid any duplicated image name in uploaded folder .You can see here we have 2 variable to store image name , first for large image size and other for thumbnail image size .

Now in above code we have created a folder structure to have a year and month folder then checking if this folder does not already exist then we create it . If you are already familiar with WordPress CMS then you know that WordPress also upload images in the same manner .

Here we are using the Image Intervention package to upload the image in our specified folder path. If you notice it we only passed width parameters not height because we do not want to stretch the image to fixed height. We used aspectRatio() method ,it handles the uploaded image final width to mentioned width i.e 900px but height will be proportional . Here the upsize() method keeps the image from being upsized. Then we put the final uploaded image with the complete absolute path in variable to pass it in our database table's column.

Above code also uploads the image but with another small size to use for thumbnail image displaying purpose. We used the fit() method , it forced the image width and height within the mentioned 290px X 200px. It's better than crop() method because if we use crop method then some portion of the image will be cropped . But in fit() method image size will adjust in this width and height. We also used the encode() method to decrease image size , of course it affects minor image quality but it is good if you use low weight images.

3) For multiple image uploading with the above same feature

This is the most useful task to upload multiple images like for photo gallery images.

I have written this tutorial to focus only on laravel image uploading with resizing also for multiple image upload with resizing. The code considers you already have set up the database tables, model file, view files . This code for updating the model. You can make it for a new creation just by modifying a few lines. Hope this tutorial helps to solve your important things for image uploading , cropping, resizing and uploading to year, month folder wise . If you have any query, please write below in the comments. If you are looking to hire an experienced Laravel developer, freelancer. Pls fill our contact us form, we will get back to you soon .