Laravel 11 Image Intervention Tutorial: Resize and Crop Image Like a Boss

ever wondered how websites manage to display various image sizes without slowing down the loading times Well image manipulation plays a crucial role in any web application hello everyone and welcome back to the programming Fields I'm omish Rana today I'm back with another interesting video in Lille 11 playlist today we will be diving into Lille 11 image intervention step by step we will learn how to leverage intervention image this is a popular library to manipulate image within your laral application so by the end of this video you will be able to resize crop Watermark and perform various other image manipulation to enhance your Lal projects the intervention image Library offers a unified API flexibility with different image formats and seamless integration with larl and this makes it more powerful for developers so I will cover step by step in this video but before jumping to the example let's discuss about some functionality provided by image inter package so the image intervention Library provides the flexibility to resize the image we can crop we can put Watermark we can add text overlay over the image we can encode we can decode the image and also we can transform the scaling of the image along with the color transformation these are just a few functionalities and intervention image provides many more features for manipulating image all right so in this video we will cover all these features in depth so let's get started so first thing first we will install larl intervention image package so initially we will check out the documentation of larl image intervention package so let's search larel image intervention and here we have the very first link of this official documentation let's click on this and under this getting start tab we have this introduction so we can read out this introduction so basically this intervention image package will be used for processing images so this provides different functionalities just to manage images just like it provides the flexibility to resize the image we can add Watermark we can crop the images and it provides many other functionalities so let's proceed with this installation of this package so if we'll scroll down then we can see we have the following prerequisite it requires PHP 8.1 minimum and there should be MB string PHP extension enabled also it required image processing PHP extension so if you are ready with these prerequisites then let's proceed with this installation so for installing this image intervention package we will be using composer so let's copy this command come back to the terminal and under this project folder let's add it let's hit enter and this will take a couple of seconds to install this image intervention package and this is done all right so if we will check out to the composer. Json file then we can see we have this intervention image 3.6 now let's come back to the documentation again let's follow this other steps so after installtion we are ready to use this image manager and if we'll scroll up under this framework integ ation let's click on this we have the laral integration here so we have completed this installation step now in the second step we can proceed with this image manager so in order to use this intervention image we will have to import this facade in our controller or class all right so now in the next step we will create One controller so I will switch back to the terminal and I will create One controller as PHP artion make controller image controller all right so the controller has been created so now inside this controller we can import this facade so let's copy this one let's come back to the vs code editor inside this app HTTP controllers we have this image controller so here we can add this image intervention L facade all right and thereafter we will have to create one function so that we can choose any image from the form so let's create one function as file upload and basically this will return one view so I will return one view but before returning this view I will have to create one view so inside this resources views I will create one blade file as image upload. blade. PHP and here I will use bootstrap 5 so I will generate this basic skeleton of bootstrap 5 using this bootstrap extension now let's remove these things yes let's change this title to L 11 image intervention okay and here inside this body tag I will be creating one container one row and column as Excel 6 all right let's give pading from top and bottom and inside this I will create one card there will be card header and card body also we can keep card footer and I will wrap this card in one form so here I will open one form action we will have to Define as let's suppose image do store and also we will have to Define method as post then we will have to use ENC type as multiart form data all right let me dock this and let's close this form here to this card fotter let's align it yes inside this card header I will add one card title and here I will add title as image intervention in L 11 okay and then inside this card body I will be creating one div as form group and uh inside this I will create one label for image all right there will be label closing and after that I will create one input type of file I will add class as b control and we will have to pass name as image and ID as image all right and inside this card fotter I will add one button as button type submit class will be BTN BTN primary and button text will be upload okay this is done now inside this controller function let's return this view as image upload and also we will have to render this function so we will have to create one route so let's create one route as route colum colum get image and here I will have to call this image controller colon colon class and uh then we will have to call this file upload function let's import this controller here I will write use app SL HTTP / controllers / image controller all right now let's come back to the browser let's try to access this route and we will have to Define one more route as image store all right so better we can create route group route colon colon controller and inside this I will pass image controller class group function and uh here let's move these two routes and we don't require this and here we will have to create one more route as route call colum post image and we will have to create one more function as store image let's give one name as image. store all right this is fine so when we will choose any image and we will click on upload this will trigger this function so we will have to Define one more function inside this image controller so let's add this function and as store image all right and here we will use this eliminate HTTP request and it's object as request all right let's dump and D this request image because we have input name as image here inside this form all right so inside this form let's add csrf directive so we will be using at theate csrf let's refresh this page and here let's select one image okay now let's click on upload yes we are getting image object so in order to validate the image we will be using request validate function and inside this array we will have to pass build name as image we have and this will be required and also we will be accepting only image so we will Define mes type as PNG jpg JP SVG G GF and also we will Define Max as 2048 that will be 2 MB basically and respective to this validation we will have to display the error messages inside this blade file so under this form group let's add error directive so if error has image then this will display error message so we will be writing text danger class for this and here we will be displaying message this is done let's come back to the browser now let's try to submit this form without choosing any image yes this validation has triggered let's select any image let's try to click on upload yes we are getting file object so now in the next step we will be proceeding with the image intervention for resizing image so let's come back to the documentation again and here if you'll scroll up then we have this Basics and inside this we have this image manager let's click on this if you will scroll down then we can see we have to use these two drivers all right so basically intervention supports GD that is graphics driver and iMagic driver for managing the images so in PHP I file we already have the GD driver graphics driver so you'll have to enable that extension first and after that you'll have to import these two name spaces in your application all right so let's copy these two name spaces come back to the code and inside this controller we will have to add these two so I already had this image manager let me remove this yes and instead of this iMagic I will use GD because I have the GD graphics driver all right now again switch to the documentation and here it provides image manager inst stance that means using this driver we will have to create one instance so basically the working flow of image intervention is like firstly we will have to upload the image from this form to our local directory and then we will F that image from the directory and then we can resize the uploaded image and we can save that to another directory all right so this is the basically working flow of this image intervention we will have to read the image from the local directory that is already uploaded in our local file system so before proceeding the image manager instance let's proceed the upload functionality so here let's start upload functionality for the image so we are already getting this request image so let me create one variable as image and here I will use request file system and then from this file system I will get image all right now in the next step I will generate the unique image name using the time stamp all right so I will create one variable as image name and here I will call get client original extension provided by larel so basically this will return the extension of this image whether it is jpg PNG or JP anything all right and uh before this extension I will use this time function and I will concat this with this extension all right so basically this will return the time stamp file name if I will put dump and die image name all right let's check this if you'll refresh then we can see we are getting this time stamp. extension because our uploaded image extension is PNG so we are getting the extension now we will proceed with the image upload so as of now I'm going to upload this image in the public directory if I will expand this directory then inside this public currently we don't have any folder all right so here I will use image because I already extracted this request file image inside this dollar image variable so I can use dollar image move function all right so basically this move fun function will upload the image inside this public directory so here this move function requires two parameters the first parameter will be directory name so let's suppose I'm giving directory name as uploads and in the second parameter we will have to pass the image name that we are generating from this timestamp extension so let's pass this image name so here I will add upload image in the public uploads directory let's save and come back to the browser again now let's reload this yes so it is reloaded and the image should be uploaded inside this uploads folder yes we can see we have this image uploaded inside this uploads directory if we will click on this we have this uploaded image all right now we can proceed with the resizing image using intervention all right so I want this image to be resized in a specific Dimension because as of now we can see we have this large image and if we will check this Dimension then we have this resolution as 2578 into 1490 okay so in case let's suppose if you are creating any user profile management system then in that case you need the resized image to manage the profile picture all right so in that scenario you will have to resize the image after uploading this so let's come back to the documentation again and now we will have to copy this line so basically this will create the driver from this GD Graphics because we have imported this graphics driver here all right so let's create this graphics driver manager here we had imported this image manager all right and we are using this driver so basically we are creating a new instance of this graphics driver GD all right so let me change this to image manager all right and now we will be going ahead with the resizing image and we will be storing that in a different directory so let's switch to the documentation again and uh under this resizing images option let's click on this we have this resizing the image section and under this we will have to read the uploaded image from the directory and after reading the image we can use this resize function so basically this will manage the height and width in this pixel also we can specify the height or width specifically if we want to change the height or width according to our need then we will have to pass the named argument Ed like this so let's go ahead with the reading image from the uploaded directory from the local file system so I'll be adding comment as reading uploaded image from local file system as uploads directory all right so I will be using this image manager read function all right so I will be using this read function inside this read function we will have to pass the parameter as directory name along with the file name because we are going to read the file from this uploads directory so we will specify uploads and then also we will have to pass the the image name that is already uploaded here so we already generated this time time file name and using this Tim St file name we are uploading the image so we will have to use the same time St file name here all right so basically this will read the uploaded image from this uploads directory using this Tim stamp image name all right and uh let me assign this to one variable as let's suppose thumbnail image so I will provide thumb image all right and now after reading this file we will have to resize the image so in the next step we will have to call the resize function as this provides this resize function so let's call this resize function so I will be using thumb image because we have captured this time stamp image name inside this thumb image variable so I will be using this thumb image resize function and inside this resize function we can pass the dimension that we want to resize the image so let's add 250 by 250 you can pass this according to your need all right and after resizing the image we will have to store the resized image in different directory all right so we can use this save function so basically this save function requires two parameter we will have to specify the directory name along with the file name so in this case we will have to create create One Directory manually because this intervention has not the permission to create the directory all right else you'll have to provide the access to create the directory by giving the permission so as of now I'm going to create one more directory as thumbnails all right so I have created One Directory inside these uploads as thumbnails and here I will have to specify the directory because we are uploading this in public directory so I will give public path function and inside this we have uploads and then thumbnails so the new resized image will be saved inside this uploads thumbnails directory and then we will have to concat this image name because the uploaded image will be saved using the same time stamp image name all right this is done and here we can return back with success image uploaded and resized successfully okay in between we can store image in the database so as of now I'm not going to store that in a table let's come back to the browser let's refresh this application and uh also we will have to capture the success response inside this blade file so here before this form capture this alert response so I will create bootstrap div class alert all right and inside this I will add condition if session has success and if and inside this I will use session get success okay this is done and here we can capture one response just like this so if we have response then we will display the success message else we can display the error message as unable to upload and resize image okay yeah this is done now let's capture this error message as well so here we will write else if session has error then we will capture the same alert just like this and I will write alert Danger yeah this is fine and here instead of success we will have to pass session get error all right this is done now let's come back to the browser let's refresh it once let's try to upload image let's click on upload yes it return the success message as image uploaded and precise successfully now let's come back to the directory and inside this thumbnails you can see we have this 337 file name name and here this is resized all right so here we can see this resized the image and here it compressed it in the 250 by 250 Dimension the original image size was 2578 by 1490 but in some scenario if you will see this image is not clearly visible because this is resized means this compressed this image all right so the text is is not clearly visible but in some scenario if you want to crop the image then we can check out this documentation again it provides cover function if you'll search for cover then we can see this will crop and resized So currently we resized the image only but if you want to crop and resize together then we can use this cover function all right so let's check that inside this image controller instead of resize I will be using cover all right let's come back to the browser again let's refresh it let's choose the same image let's click on upload let's check that and here we have this 469 so we can see this time this cropped that image in 250 by 250 Dimension all right and if you'll see the differences in this it resized the entire image into 50x 250 Dimension but in the cover function it cropped and recy the image in the specified Dimension all right similar to this way it provides different functions just to manage the image just like it provides a scale up a scale down function we can add Watermark we can add image effect just like we can blur we can change the color we can add BL effect we can invert and many other things we can add text and font over the images we can draw anything just like we can add Circle we can add lining over the images we can add animations all right we can change the colors and transparency of the image as well for more information you can go through this documentation properly and you can use this Library effectively for your application all right now we are at the end of this video and in this video we have covered the Lille image intervention we learned how to install the library and also we have integrated with the laral application and explored fundamental functionality like resizing the image while maintaining aect ratio remember to consult the intervention image documentation for a deeper dive into the extensive capabilities by using intervention image you can efficiently manipulate images with your laral application and the best thing is it improves user experience through faster loading times and Visually appealing image presentation so if you found this video helpful please consider liking subscribing and leaving a comment below and if you have any questions feel free to share what kind of image manipulation functionality you would like to see in the future videos throughout your laral development Journey strive for clear and concise code give a proper comment and follow the coding conventions this will enhance readability and maintainability of your code and when working with code utilize screencasting tools with annotation to showcase the code and file Parts in action you can use proper code formatting tools to ensure your code is well structured and easy to follow consistent formatting improves readability for both you and other developers I hope this comprehensive video provides a clear and informative guide to laral image intervention so see you in the next video Until Then happy coding [Music]

Channel: Programming Fields

Views: 617

Keywords: Programming Fields, programmingfields, laravel, laravel tutorial, laravel image intervention, laravel 11 image resize, laravel image crop, resize image in laravel, crop image in laravel, laravel image manipulation, intervention image laravel, laravel image optimization, resize image laravel tutorial, crop image laravel tutorial, laravel image processing, laravel image upload resize, laravel image library, resize images in laravel 11, crop images in laravel 11, image intervention

Id: f2WNXpEPtKk

Length: 26min 25sec (1585 seconds)

Published: Sun May 12 2024