Sign up to access "Build an E-Commerce Platform" right now.

where we have small thumbnails and we can just click through on any amount of images that have been added to this product just to view them in that kind of large image area. Now before we get started let's talk about what we're going to use to attach images and we're going to go and lean on the Laravel Media Library package and there's a good reason for this. When we upload images

or associate images with our products or variations what we also want to do is create thumbnails and this package is very good at doing that automatically we just need to define the conversion within our models. So this does have a ton of advanced features which we're not going to use but if you do need to use them they are there. So let's get started and installing this

so let's go over to the base installation section just here and let's grab the command for this we're using version 9 if version 10 is around by the time you're watching this course of course go ahead and make sure you follow the docs. Okay so we've gone ahead and done that we don't have a license for Media Library Pro which is absolutely fine let's go ahead and publish the migrations

here if I can copy this there we go and let's go ahead and run the migrations and we'll just really quickly check the database out and see what we've got. So it's pretty much just created a media table you can see here that we're using polymorphic relationships to relate media to any model in our app so model type is going to be product or variation model id will be the id and it will

generate a huge amount of other information as well which we'll talk about as we go. Okay so let's just come over here and publish the config file just in case we need to tweak anything I don't think we will do in this case and that is pretty much the config file that you can look through. Okay so adding a media disk let's talk about this so by default the media library package

will publish the files on the public disk that is what we want for now but if later on you needed to change this it would be a really good idea to head over to config and file systems to define your own disk in here as you needed so the docs here will just go ahead and get you set up with that you can set up queues anything like that. Okay so we're pretty much done with this let's go

over to the preparing your model section and this is really simple we just need to include the interacts with media tray and make sure we implement the has media contract. So we're going to start with products we are going to attach images to variations as well and let's talk about that really really quickly so let's say we're in our app we've got an overall product

image gallery and we want to show off sort of any kind of image to do with this particular product what we then want to do is when we add say black air forces in size eight to our cart in our cart view we want to see that small thumbnail of a black air force one the sizing obviously is not going to differ in terms of the image although it might do so every variation is

going to have an image really really important so we can see that on our product page our orders page everything like that but we're going to also attach overall images to this image gallery over in the product so that's pretty much what we're doing okay so let's go ahead and set this up then we need to go ahead and implement that has media trait and just go ahead and re-index

everything here so has media and then we want to go ahead and use interacts with media just here great so that is pretty much everything set up now we're going to go ahead and attach an image to this i've already got a couple of images which unfortunately i can't include in the downloads for legal reasons but go ahead and grab two product images or just one product image that you want

to use and we're going to attach this to that product and we'll check the database out and then we'll look at how we can grab these out in the next part okay so we're going to go over to our terminal to do this and we're going to open up a tinker session or you can use tinker well if you use that and we're going to go ahead and fetch out a product that we want to attach an image to so

let's go ahead and just find this by its id and if we come over to our products here we've just got product with an id of one so we've got our product here now we want to go ahead and attach this media to it so to do this we're going to go ahead and reference our product we're going to say add media and we're going to choose the path to the file so in this case i'm in the root directory

so i can pretty much just come over grab the full file name to this file and paste it in here now really importantly we want to use the preserving if we spell that properly preserving original method because that won't delete the original file that's not what we want to do and then we're going to say to media collection and that's the simplest way that we can use this package let's go

ahead and hit enter on that and sure enough that media is now attached to this product so if we check the media table out here we go we've got a model type of product a model id of one the collection name is default which is fine you can have different collections that you add media to in this case we just want to add it to a default collection and it will give us information about

the disk as well that is stored in the mime type the size of the file and any kind of manipulations that we've defined which we haven't defined just yet so that is our image uploaded now let's just check out where that's actually been placed so if we go over to our storage directory and we come over to app and public that folder now contains that image and when we reference it as long as

we have this public directory here sim linked to our main url for our app which we'll talk about in just a second then this should work nicely and we'll get to that when we start to output our images so as long as you've got an image being placed in here you're good to go now i'm going to go ahead and delete this so let's just get rid of this folder here and let's come over to the

database and get rid of this what we want to talk about is registering conversions so over in our product model let's come down to the bottom here we're going to go ahead and create our method called register media conversions and that will go ahead and fill that in for you if your editor does we've got a media piece of media being passed through this returns nothing and essentially what

we want to do here is say well we want a 200 by 200 thumbnail of any image we upload we want that to be automatically processed we want that to be placed in that directory that we just saw and then we want that to be available in our media table so we can extract that out so we can do this by saying add media conversion and then we can give it a name so in this case i'm just going to call

it thumb 200 by 200 although you could call it anything and then here is where we manipulate that image so we want this to fit inside of a 200 by 200 size so for this we're going to go ahead and use manipulations and the fit crop type you can find these all over on the image package from the same company that released this package and there we go we want about 200 by 200 so now that

we've created this register media conversions method and we've gone ahead and added this thumbnail in let's run the same command over in our terminal to generate this out so i'm just going to exit out of here and rerun php artisan tinker and let's go ahead and find that product again and let's pass in the same image with exactly the same methods and see what happens so if we come

over to the database now you'll see that we've got this generated conversion in here thumb 200 by 200 and we can reference that when we try and grab the images out if we come over to the files here you can see that we've got the original image plus the 200 by 200 conversion so when we reference that with the methods that are available with this library we can go ahead and grab out the small

images down here because there's no point using the full size image in our thumbnails down here and then the large one will just be the original version so that's pretty much it we have our media uploaded finally let's just go ahead and add the white version of this just so we have it in there so we're going to go ahead and switch black to white and there we go so if we come over to our

media table this is the white version this is the black version we can iterate through these we can grab the thumbs out for each one and of course if we come over to our files the white version with the conversion has also been uploaded so now that we've done that we'll move on and we'll build out our image gallery we have all of the images we need to do that