Placeholder image with PHP | Sebastian Sulinski | Skillshare

Placeholder image with PHP

Sebastian Sulinski

Placeholder image with PHP

Sebastian Sulinski

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
4 Lessons (1h 17m)
    • 1. Canvas method

    • 2. Generate image

    • 3. Tests

    • 4. Usage example

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course we will have a look at the way of generating placeholder images using the intervention/image package and how to write filesystem tests for our code.

Meet Your Teacher

Hello, I'm Sebastian.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.



1. Canvas method: in today's video, we're going to have a look at how we can create a placeholder image. Imagine you have a list of records which contained each of which contains a reference to an image, but for some reason, one off them may not have an image or the image has been removed by mistake or anything like this. At which point, as you can see, the second image here displaced this placeholder image, and it's the actual image. If you can see them when I'm dragging this across, you can see that's actually the image. We have three other images which records which have images, and this one obviously does not. So in order to create something like this, we're going to use their package called Intervention Image and which makes use off Aida image magic. Oh G D Library Teoh basically interact with images to generate them, crop precise and so on. So the first thing we need is to install a few packages. If we go toe packages, don't orc and let's search for the 1st 1 which is going to be this inter van shin image. There we go. That's the one click on the name of the package and then just copy the line composer, requiring the package name we go to term now before we actually go to the time and let me show you, I'm starting with a completely empty road director for the project. So we don't have any exercise fast starting fresh. And if I open the terminal that I'm already within displace hold a directory. If I do PWD, you'll see this is when it's pointing, pointing so I can pace this command directly here and heat return. This will install all the dependencies together. The package as you can see now, whilst it's refreshed, we have a vendor direct true obviously with the auto load and all these dependencies. Then we have a composer. Jason, If I opened this, it tells me that we see Within the require section we have this intervention image package . The next package we're going to need next three packages that we're going to install. It will be purely fall. If the tests were going to ride later on, the 1st 1 is going to be simply PHP units. So PHP you need There we go. If we installed this one using the same approach. So just copy this composer require a clear screen command K on a keyboard. And this time, rather than installing this under require, we want to install this under acquired death because this package is only required one. We developed one when we developed developing the the whole application. Basically. So a hyphen, hyphen death and he return Juan sold. This is done. Let's go back to, uh, our project, as you can see within a composer than you. A section has been created. This require hyphen death. And there we go. Bicycle. We've got this BHP unit. Okay, Next package we're going to need is the mockery, because we're going to mark the intervention classes some more Khoury mall create. Then we go. So that's the one. Same thing. Let's copy this composer require back to the terminal based it again. This is only for development. So hyphen, hyphen deaf. He return. And the last package we are going to need is cold. VF s stream click on this one. And as it say, see as a virtual fire system to mark the rial file system in unit says allows us to automatically mock their far system in our tests rather than using the actual fire system saving files to the hard drive and song. We going to do everything in memory while we testing So copy again that composer required back to the terminal based in hopes I should have specified a deaf like Let's go back to edit. Let's just cut it from within the require section. Let's remove this comma DNT as well, because we within the Jason file Jason isn't us forgiven as Hess ph. B. So if you had a comma here that words by says against its highlighting red. So we need to make sure that the Kalmadi end if it's the last item, you don't have any come audience. Okay, so now I've moved this package Embassy to development dependencies. We can save the cursed so close. The composer basically at Jason File and let's create death sores Director first, So source. This is where our cold will be stored. And another thing I'm going to do is create the index of PHP file index dot PHP n within this found is going to put require and let's require our outer loader from within the vendor directory out a lot dot PHP. Okay, for now, we're just going to close this index dot PHP far because we won't be doing anything more for the time being. A next thing within the source directory going to create direct tray for our where image may case that class me going to create, um call it whatever you want. I'm going to call it utilities, basically. So if you are working with the existing system of, as you put it somewhere that it makes sense. So Utilities directory for now, and their name off the class is going to be image maker. And the name space will be I will. Coal mining space up and then obviously utilities. So up you dele piece There we go for heating. Okay? And that has created our class a open combos of the Jason. We need to specify the outer loading. He has as well, so out to a load. And in between the double quotes, obviously, and then we have ps are hyphen four and for PSR for we want this up named Space and then to back slashes Colon and where we want to point this name space is going to be S R. C and the forest lush. So basically, whenever use we using up name space in the beginning, Dan's going to point to the source direction. Then obviously, whatever director we have that as we did with this image makers have up and then utilities and our image maker class is right here. Okay, So, to start with, first thing I need to you do is to ah, let's specify bicycle whatever class we're going to use here, we are going to use this image. Manager of the information. So Image manager, intervention image. So intervention image Image Manager, This is a package we're going to be using here about this intervention image package. And this is the name of the class we're going to make use off. And let's specify a few properties. I'm going to put them all s private. We encapsulate them all. We don't want anyone to have access t them directly from outside of this class. Eso private and we start with a direct true and by default what? I'm going to do this point toe assets and an image hyphen maker, and I'm putting slashes on both sides are surprisingly director separator. I'm working on Ah home mark, which is a unique system Online X. If you're working is the same thing on Windows, it would be back slash, but don't worry. Specify it this way because when we actually going to be pointing to the image from within the browser, you still need to have force largest, regardless of world system you're using and we are going to use them. The functionality here within this class which, if you are, if we are going to be pointing foot to the file using the absolute bath, we're going to replace this based on what system we're actually on s so that's the director that's created. Started with an hour and within the root of our project. It's going to be assets and then we have image hyphen maker. Our senses are extending within this director. We have image make. Next thing is going to be private property. Khaled manager, Then we going to have private property image. Then we're going to have private property called with by default. I want my image to be 600 if we don't specify otherwise than private height, which will be 400. So basically we're going to have a horizontal image. Then after this, we are going to have private extension, which by default I wants to be PNG. Then we're going to have private background, which is going to be bargain color by default. I want the image to have white colors f f f f f f. You can use the short shorthand, just three of them. I'm going to use the full six characters and then we're going to have a private file name, which is where we going to store the fund and once we've actually generated it, okay, lets aren't the dog blocks for the diarrhea tree. That's just a string. So string. Then we have. For the manager, it's going to be image manager, which is what we've imported. Right. He had a top. And then for the image, we are going to have a back slash inter ven shin, then image image. That's what is going to represent Dan folder with. That's obviously an interject for the hide. It's going to be the same interject for the extension that's going to be a string for the background. It's going to be a string as well. And for the file name, we also will have a string of you. See, This one doesn't have a different value, but it's going to be a string. Okay, so these are our properties now. The next thing we're going to do is to create a constructor. I'm going to create a funeral. Isar can shift the up a little bit. Okay, so we start with the new constructor and construct a will, uh, basically, take the image manager instance and associated with our manager property. So that's the the argument that we is going to be required for this class to instant. She ate. Okay. The next thing we need is the first bicycle e The my method that we're going to create within this class is going to be called said director. Let's say we don't want to save the file to this specific territory we would like to override, like within the test. This is what we going to do it. This will basically allow us this set. I will allow us to override this default value so public function, because it needs to be act accessible from the outside of this class set directory and we take the path. It's argument and then this directory equals path. So that's the 1st 1 Let's aren't that Doc Block as well it exporting path, of which it will be string. And then what this specific one does is set direct. True. That's what it knows. It said stature. Okay, the next one will be get directory. Basically, we creating this to imitators t be able to basically get and said that directory path. So we for this one we have you don't have any argument is going to return this, Daraji. We've made it private. We don't want anyone to mess with it. So we need to provide some and means off actually obtaining the value in setting the value . And this one gets the doctors object, get dark tree. Okay. Next method is the method that will actually create this image that we after. And it's going to be called the same way as their method. That we go into cold on our image manager and animals method is simply canvas. So public function can of us and this method sakes array off options which will basically override the properties on the properties that it will overwrite will be things like with hide extension and backgrounds. So if we want to create the image with a different dimensions, we will be able to pass them through as the key off these options Array extension. If you want to specify different one and in the background color, you might want a different one as well. So this is what we going to be able Teoh pass through using this options array. Okay, In order to do, we could do it. Miami from within this campus bullets do it in a little bit better way. So we get just going to delegate it to another method. So this in it and we're going to pass options here. So doubts this innit? Methods will basically do the job. So I'm going toe up this innit method here and again. Let's specify it is this array, and by default in my be empty and, Dan, what we're going to do within this innit method, we are going to call array walk so that we are going through each item off these options array. So, options Geragos is the first argument. And please refer to PHP recommendation to check all this. Every walked us off this countess in one of the previous courses. If you go to PHP, don't nets type this in within the search box. Obviously see the documentation to see exactly what this one does. Okay. And second arguments is a colorable eso I'm going to refer to the method within image maker . So this and then the method will be called s. So she ate and after oldest, what we're going to do is to build the file name. So this file name equals this file name method again, Another method that we don't have. So what we need to do now is basically rate this associate. So first of all, all this properties which can potentially be within specified items off the options array our overriding the properties off this class And then once we have this property, this file name will use this properties with the new values and create the finally by six. So let's create this associate method first. So the associate after this ended private function associate And there we take a value as the first argument and the key as the second because that's how they're a walk. Passes items from the first argument, reaches the area to whatever cola ble option we have is a second argument. And what we going to do here is simply this we I'm using curly brackets. You don't have to. You just can. You can just use key. But I tend to use curly brackets around the situation like this. So key equals volley Subasic. What happens here? This property name, for instance, with equals whatever values associated with it and this options here argument will be something like, Let's, for instance, say, with I want to be 800 something like this. Then high. I wants to be 800 as well and then background. I would like to be block so 000 for instance. So this is where we going to receive through the's argument. We may not receive anything, and then obviously we going to leave with a default values associated with these properties . Obviously, using this keys, we associate in the valleys with the properties of this class. Okay, so that's the associate method. The the next method is the file name and the finally methods what this one does. It basically implodes. Number of properties using their whatever heart are you going to specify? I'm going to simply use the hyphen. So let's start with a method names of private function file name. This one doesn't take any arguments. As you can see, we call here without then the argument, and we're going to return and using the implode function they go, we want to use again. As I said, it's up to you what you want to use. I'm going to use a hyphen. So all these properties that I'm going to pass through within the second argument to dis employed function within this array will basically be concatenation using disclose. The 1st 1 will be dealt with. The 2nd 1 will be the height, and the last one will be the background color. So whenever we create an image, it's going to look something Michael and just type here, say, 600 by 400 by Bagram Colors, F F f f f f and then the X station dollars. Say PNG. This is going to be the finding. You can obviously specify your own way. You can use different approach entirely up to you. That's how I've decided to do it, and then our Eddy and I'm going to conquer Tin, a tit with the full stop and this extension because don't forget. Obviously these options can also contain extension If he wants to obviously make the image with J. J pic extension. You can use this GIF or anything else you can pass this through and then that's going to override the default PNG. So we have all these concatenation with them hyphen and then other the extension of the and that's that. Find them, which we going to have associated with this filing property once we've called this farming method after walking through all these properties off this rape. Okay, so these two methods are now completed now back to campus. So now that we've got everything insane, she hated our properties. Now have the valleys associated with them that we actually want to have. So the next thing to do from within this canvas method will be to check if the file actually exist. All these fines will be safe to this directory assets image making, unless we've obviously overrating overridden the the path to the directory for the Director property s. So let's check if the file exists. So if and an exclamation mark, I'm going to use check for the opposite. This is file method which would create in just a moment. And if it does not exist because this is basically going to return Boolean true or false self it isn't. Then this make and make method will create generate this file. Otherwise, by together wise, we're not gonna do anything because the file exists and we simply returned this a return, this relative file path. That's how I've decided to call my method. So it's clear that this is relative path. Eso we can pass it through to the browser. Absolute path will be the full path to the image which will use behind the scenes the basic generated and so and check if it exists. So we have three new methods which we need to create. The fell swung is the ISS file. Then we have make and relative fire path. Let's work on these in a four long video 2. Generate image: let's know, create us this file methods and I'm going to put it right after this associate method here . So I'm going to call it It's going to be a private as well. So private function is file. And here we're going to return Boolean true or false or it's and And this bullying will be returned based on with the file exists or not. And I'm going to use this on the skull file function and then I'm going to use the method this, uh, absolute file path. So let's create this method. This method basically will return their full path to them to the file. So private function again, absolute file path. And this one returns. And again, we're going to refer to another method up salud directory. Ah, Bath. And we're going to pass one arguments. This one which is going to be this file name and what we doing here is basically delegating this cultures absolute directory path which will optionally take an argument. So by using absolute director path, you may have just the path to the directory. But if you pass anything through, like for instance, file name, you will get there directory with the file name at the end. So obviously absolute file path Aziz, the name suggests, would return the name, the full path to their image file. Where is absolute directory? Path may return their path to the image, but may also return just the path to the directory. So let's create this absolute directory path private again. Function up. So, lords, uh, let's just copy this name because I'm pretty sure I'm gonna be Spell it and then it's going to take one arguments. I'm going to call it up end and by default, it's going to be no. And now what I'm going to do is create the paths or path equals riel path and what I'm doing here as I'm going to use the path to the to the current directory where this file resides So that D I. R constant and then concatenation did weight in between a single double quotes Ford slash to a full stops for a slash two full stops for us Lunch. And let me just explain exactly what I'm doing here. So I'm going to open fire browser and on the left inside our image maker class is inside of these utilities director. So I'm going. Here's basically is the IIHS going to return the full path to this utilities director. Now I need to come out of it to the root of our projects. I'm going out one step, which in this truthful stops and forest large So I'm going to source director the 1st 1 and the 2nd 1 will take me to the place called the Director, which is the root off our project. So this is the path to actually to their to do our job project. So now we've got this partner riel path. One important thing about riel part fix you can see I'm using for its lashes. But as I said, Andy, if we on Windows, let's say Daniel Windows obviously uses backsplashes. However, Riel path always uses the right directory separates A for a given system so you don't have to worry about replacing them here. Rial part is taking care of it, so if you on Windows it's going to be replaced with a backslash is so now that we've got a path to the root of our project. Next thing we need to do is to make sure that we upend their path to our director wherever we going to be storing our files. And if we scroll up here by default, we've set it to assets Image May maker. And obviously this director is here with created this earlier. So this is where we wanted to point 2.2. If we scroll down s so what I'm going to do next is override this part for you, Able actually, let's let's append to it. We are going to you string replace function and dysfunction takes three arguments. The 1st 1 is what we're looking for and I'm going to be looking for four. It's lashes. Then what I want to replace it with. I'm going to replace it with a constant directory separator, which is Ah, one of the pretty fine PHP Constance, which tells me what director separate on a given system is if it's a Windows is going to be back slash if itself any off there UNIX type of the operating systems is going to be a forest lost things like Marcos, then old line X, for instance, they go and I have a Ford Slash associated with this constant and then and this subject which I wants to work with the bicycle, the string which I want to replace. This items within and again I'm going to use another method. Yeah, it's going to be this and in method name is going to be relative directory both, and I'm going to pass the upend argument to it Now. I'm going to explain everything just a second return path at the end, because that's what we want to return. This absolute director path will return the path effectively, basically giving us the full path to this directory when we going to be uploading the seeming, saving this injury rather eso what I'm doing here, really path automatically recognizes what it's back slasher for its large that he needs to use so we don't have to worry about this. We're going to have a right path here, but this only takes us to the root of our project. Then we need to up end this assets and image maker directors and these because we are just simply joining them together. We we need to check. Basically, if it's a Ford Slash replace all this for its logic from within this string, which is going to which this method is going to return with a correct director separator and why I am doing is this way. The reason why I'm doing is this way, because this relative directory path will later on also be used when we actually displaying the image in a browser basket. This method will return to string the relative path to the image which will be used with the image stuck and relative. But as you know, obviously within the browser, we always use the Ford Slash. That's why this will definitely and always returned the Ford Slash for our director path. Where is obviously if we are working with the absolute pass, which is basically when we are trying Teoh interact with the file system, saving the fires, removing them and so on. Then we need the correct director separate. This is why we replacing he on this this force and all these for its losses with the correct dark separated for the given system and then we obviously returned. Everything can coordinated because of see, we are concatenation this year. You can see the full stop and equal for this path, which is when we are pending this assets and then image maker director which this relative directory path will return. So let's quickly create this method as well after this one. So private function, relative directory, path and again upend by default. Nor because we may only want the path of the relative path to the directory. And what I'm going to do here is first check if ISS no opened, then simply return this director. So whatever we have associate ID wait there. Directory property. Obviously we can overwrite it because we got this said director method and saw. So this is what we will return a. Otherwise. If there is something associated with this argument, then what I want to do is simply return this directory and then append to it. So basically, we contact in a ting whatever is being passed through as an argument with this Daraji. Now, one thing that we might want to do here because someone my past something starting with the fourth slash in our directory might or might not contain ah, the trailing for its large by the before slash radiant. So what we need to make sure is that wherever we have associate with the directory and with the upended, we always have only a single ford Slash come cutting ating them. Obviously, Director, because we have set method, we have this set of sets directory methods. If someone may forgets to other, therefore it slash radiant as well. So what we're going to do is first of all, make sure that this directory property, the Valley associate with the director property does not have any Ford slash at the end. And to do this, we are going to use our train PHP function. And as a second arguments, dysfunction will take whatever heart is we want to remove. And in between a single quote, I'm going to just put the ford slash. So basically, we if we have a four slash ed d and off this string associate with the director property, remove it. Same goes for these This upend argument on the this time we want to trim it from a left hand side. So l trim and the same thing. We want to remove this ford slash. And now, just to make sure they obviously, because as it stands, we wouldn't have any for it slash in between these two. So we need to make sure that we provide this for a slash in between and concatenation altogether. Now this method is pretty much finished. But one thing I want to correct, he has because we are returning just that whatever is associated with his director property and this may or may not contain afford slash at the end, I would like to stay consistent and make sure that there's never the trailing the four slash ed the end off the valley associate with his character. So what we going to do is because we are using their get direct traumatic. Why not to use this method from within the other ones and basically do all the logic here? So what we can do, he has just simply use our trim and then make sure that we removing their for its lush Indian. So now this get director will always return the directory value associate with the Doctor property without the training slash. So what we can do now is go back here and rather than doing the same thing here, we can just call this methods so this get directory and do it this way and then the same for this. If there is no upend, obviously values sent through as an argument. We also want this without their trailing for its lush. That the same thing. This get director, and now we stay consistent throughout the entire class of whenever we go now, try and retrieve the directory wheezes. Get direct traumatic, and this method will make sure that there's never the for training for a slash ready. And so that's our relative directory path. Another thing that we will need later on is going to be relative file path. So let's quit. Create this method stray away as well. So private function Raila TIF file path And this one simply calls this relative direct report directory path method as well. So return this relative directory path and this one and for this one we simply passed the name off the fire. We wants to append to the path. So this file name and that's all for all these methods. Now let's out these dog looks because you can see we we've stopped doubting them. I'm going to scroll right to the bottom. Check what We haven't got you yet, so we have get directory now for canvas. It's simply it takes array as argument returns a string and we're going to say, Get relative path to the place, hold their image. Then we have our innit methods in it methods, it's simply going to be again. It takes options, array, body returns, nothing. So return void. And what we're going to say here initialize all properties. And then for the associate one, uh, do it this way. It takes value and keys arguments and we're going to say associate values with properties and our values and keys. They might be off. What data type? Well, they will be strings for the keys. So that's a string. And for the values they might be either. A string on inter, just off string in jail. There we go. Let's quickly check. We've got here for background for with and hide There will be strings for extension and background will be so inter just for higher within hide ends extension Baghlan strings. So that's worrying northeast to my be. Then we have this file so this one does not take any argument, but it stands bullion, truffles, and this one will simply check if file exists. Then we have absolute file path. This one returns a string takes no arguments and get up solarte path to the file. And then we going to have absolute path to a direct stream. Sold this one. It takes one argument. It maybe nobody may also be a string. So pipe and string is vertical line basically dividing this too. And then we're going to say he are get up soloed path to a directory or a file because if we are upend, that will contain the name of the file. And that's what it's going to return next one. We have relative director path. Sell this one again. It takes upend argument, which is no or a string as well. So pipe and string and they get relative bath to a dark tree. Ah, or a file. And then we have relative file path eso that is going to be again return string takes no arguments, get relative path to a file and then we have a file name. Uh, this is a set of because it sets actually returns rather than sets. So it's not assert its actually create generates the file name. So generates or bicycle get file name, get new file name and I think dance it for all these dog blocks. So let's now go back to our canvas method and see what we've got left. We've got this make method which was still need to create. So I'm going to create this method right before this ISS file Private function Make now what I'm going to do inside off this methods I'm going to first of all, associate the image intervention image instance with the image property by using this manager equals days Manager, which is this image manager class instance basic, which has been passed through as an arguments to the constructor and then use canvas method on it and canvas will take three arguments here. The 1st 1 is the with off the image that they want to create. The 2nd 1 is the height off the image, and the last one is the Bagram color. So basically all these things that could have been passed through as an argument to the Converse method and obviously, after the instant she ation here after association with the properties, this will be associated with this properties off this instance. So we passing them through, that's what we want to have. And next thing is going to be this image and we are going to call insert methadone. It's because I want to add a watermark. And to do that watermark, I'm going to use another method and I just call it here. Walter Mark and this method will return their path to the file and I want to center itself . Then center you can, obviously specified is at any at any point within your image, with its left corner, right corner and so on. But I'm going to just center it, and then we're going to have this image. We want to save it, and we want to save it to this absolute file path because we need to provide a full path to including the find them. So this is where we want to save the method we created. Area. So what happens here, my see. First of all, we create the canvas. Then we are to their watermark to this canvas image, and then we save it to this path, including the funding. So that's what this make method will do. We don't have this watermark methods. So right after this make private function private function watermark, and before we do this, let's stray away pull depth dog blocks here as well. So this one return voids because it doesn't return anything and create new Converse. Oh, just create new place holder image. I think that's that sounds a little bit better. Okay, Walter Mark, we simply return this absolute ah directory path because we want to part a point to the director. You see now how how useful this method becomes because I can pass any argument through its off, either direct without any argument. If I passed the file name, it's going to be this directory path concatenation with the finally and file name was going to be Walter Mark adult P N. G. And then semi colon at D, And let's quickly out the dog blocks here as well. What we want to do. Here's it returns up Solarte path to the water mark image file. There we go. In the meantime, I've argued this watermark image Teoh, my assets image maker directory. You can create this image in any program bicycle feel like photo shopped, for instance. It's just basically across that I did in a middle image. Dimensions are 600 by six hundreds, entirely up to you. How you want to have it. So what sort of item you want on this image? Make sure that it's the transparent PNG. That's the only thing that you need to make sure that that you're going to have with this image, because when we go into specified different background color, you want the background color to go through rather than having this this background color off whatever watermark color has set for Ford's background before we finished the video, I'd like to add another method. This time is going to be a magic method called cold static so that we can actually cold this canvas method without actually instance. She ating the image maker class before the call is made so we can actually access this method. Statically, in other words, for scroll rides to the bottom, off the file and before the closing Kelly bracket for their class declaration, we are going to create new public static function underscore, underscore coal static, and it will take two arguments. 1st 1 is going to be method named that we trying to actually call on this ah, classes own name and then we going to have arguments. First of all, we're going to do here is create the method name because we won't be able to call. It's in the following way Image maker can Vaz This will throw on air basically because the canvas methods cannot be called statically because this method actually exists. So what we going to do this? I'm going to prepare all of the methods in this case is going to be justice canvas Pretty much there were going to be using with their make, uh, before the method name. And then the method name will start with a capital letter. Some make. Converse will basically delegate the cold to image maker Con Voss. Obviously, that needs to be any instance. That's what's gonna happen behind the scenes. So the 1st 1st thing we need to do is to create this method name, so method equals and I need to make sure that the name of the methods starts with a lower case letter. So L, c. First and we are going to use up string that we go because I want to remove the 1st 4 characters or from the name off the method which is obviously going to be just make and then canvas what I want to do so we are sub stringing this so it's going to be name and four characters and semi calamity. And obviously so now we're going to have this. First of all, the substrate is going to remove. That's an L. C. First is going to make sure that the sea is lower case, which is giving us the correct name off the method. But as the method name and then what we're going to do this self equals and new static. Ah, we instant shaking itself by six this image maker ah, class. And then we're passing new image manager instance, and this one it's inside the absolute If you want to use image, magic and ideo rather than G D library Dan, do it this way. Otherwise, you don't have to provide any arguments here. You can just called image Manager without in arguments by default uses Judy, but I want to use image make, so I'm going to specify driver and then e i magic. There we go. And so the next thing I need to do simply return on. I'm going to use coal user funk array. First of all, the colorable, which is going to be itself. So instance off this image a maker class yourself we go and then the method I want to call , which is the method Start basic name of this method. Start within this method variable now and then. Any arguments that have been passed through to this to the skull to the given method which are stored within this argument argument off this call static method. So that's all we need to do here. So let's out there. Doug Brooks again. Name will be of string type arguments will be off the ray type. And what does Dances, bicycle, coal methods? Static? Cooley. So that's it in this video, in the full only one, we are going to ride tests for our image maker class. 3. Tests: in his video. We are going to ride the test for our image maker. I've argued defying called PHP unit dot xml to my exercise files. And this file is available together with the exercise fast. For this course, it's gold, several options or the Santa bicycle One important one. He has the bootstrap, which is pointing to our outer loader, which is within the vendor director, obviously generated by the composer. And then when we are going to be running out of our test where our tests will be stored to our test will be still within the test directory. And where is the source directory for our files, which is basically SRC so we don't have test directory yet. I'm going to close this fight for now. Let's quickly create this test directory, so test uh, now, if you have BHP unit installed globally, that's funny. Only gonna have to call PHP unit and that's going to run all the tests if you don't add. And obviously we've installed. If we open composer Jason, we've installed PHP unit A dependency. So what you need to do in care is if you don't have PHP unit unit installed globally when I'm going to be typing Ph. Puneet, you're going to have to type the path through the vendor bin and PHP units, basically, which is There were the PHP unities located. But that's only if you don't have it install globally. Let's quickly have a look at them. Termino. So I'm going to be basically Colin ph unit this way. Obviously, we don't have any test yet, but if you don't have bean HP Unit, as I said globally installed, then just do vendor Bean and PHP unit. And that's going to the exactly same thing. Because this way, you're going to be actually running it through this file within the being director. Now, when right intercity don't really want to interact with the rial live file system. This is why, if we open compose again, we've installed this V F s string a package which allows us to interact with the file system in memory So we don't actually save any fires to the hard drive or anything like this inside of the test data tree. Let's quickly create a new class and call it image maker. Test and disclose will extend PHP. You need framework test case the first thing I'm going to discrete a private property called Directory and this property is going to be off a string types or string. Then I'm going to, ah, bride the public function set up, which is going to be the function that that's run before every single test within this class. And what I'm going to do here is I'm going to set their directors on this directory equals V F s stream. You are l method on it. So let's import this class first. So we've got this orc movie go vfx VFA string it up. And now for the u. N L we basically specifying what director would like Teoh the name of the doctor would like to have. And it really doesn't matter where you're gonna call here because it's only in memory. It's only for the testing purposes. So test direct tree, let's say, and not sold inside of the sets up methods for their tear down public function tear down, which is the method that's called after each test. We want to close the mockery which is one of them Ah, basically packages that were going to be using He s a mockery close. This is what we want to do because we are going to be actually creating test doubles rather than using the actual image manager. We are going Teoh create a mark of it. Okay, so the first test we're going to write and I'm going to create a few new lines here Circuit shifted up a little bit is going to be cold. It's going to be public, generates on the score new image with pre defined with hi and background. And let's make sure dough. BHP Unit knows that it's a test, so test stuck at the top, and the first thing we are going to do is to create two marks. One is going to be for the intervention image class, and the other one is going to be for the intervention image. Manager class intervention package has its own tests, so we don't really need to test ah tested at all. What we need to test is what we've written, basically the cold that we've written inside of the image maker class. So let's start with the image class or image equals mockery, mockery package and Dan Methods called Mook and the name of the class that we want to create a Markoff is going to be image intervention, image image there ago and class. And let's just import this one. So just to show you what happened, he obviously we've imported this class and we only using this Colin Colin class, this world returned a full name, including their names, space and apart is going to be passed to the smoke method. And then what I want to do on this image on the smoke of the image class image should receive, uh, cold to a method called Insert. And let me just quickly show where this is coming from. We open our source. Utilities are to image maker. Our make method makes a call to the insert method off this image. Instance, because this canvas, if I click on this this image manager canvass returns inter invention image image Instance . So this is where we make in the skull to the insert on to the inside. Met it off this image instance so it should receive an insert methods coal and Dench and return should return. What should you return? It should return itself because this method simply returns this so we can change feather, so it should return image Ah, class again because this will return to full name off the class. Okay, so that's the first calls for the inside method and then from within this method. We also called the safe method on this instance. So image should receive coal to a save method. And with this one, it should return itself as well. So image class, There we go. So this is basically all for this image mock. So it should receive, insert and save method, both of which will return itself bicycle instance of itself. OK, so that's our image mark. Now let's create the image manager Mark So image manager equals mockery. Ah, mook. And this time we are marking image manager class and as well if we import it so again, if I scroll up, you can see we have the use case here and on this image meant of Jeff image manager. And there we go. It should receive called to a method converse. If we just go back to image maker, as you may remember, we have. This is our image manager. It receives a call to the canvas method because that's what we calling on this instance. Ah, and it should be once, just once. And then it should return. Shoot, return image Instance of the image. So basically passing this mock through as an argument, that's what it should return. Okay, so these two are now covered. Now it's time for our own coat. So we instance she ate the image makers are image, make her equals. New image may care, not manager in each maker. There we go. And this one takes instance off the image managers who may remember. So we passed this mock off the image manager through as an argument, and I'm going to import this image maker as well, so scrolling up to the top, You can see this is what we've got here. I'm just going to put it separately at right to the bottom, separate with all these other packages that we actually importance. Okay, so we've got instance off our image make. And now, on the image maker, what I want to do is to set the directory to wherever direct relief set using this V f s string package. So this directory argument and this property goes through as an arguments of this Director So this is the doctor we're going to be interacting with. In other words, we're going to be interacting with memory and then we create the new canvas or path equals image maker canvas, and we passed through. A few arguments on the 1st 1 will be with equals 600. Being hide equals 600 as well. In background is going to be a A. So now we should have an image which obviously is concatenation of all these and the default extensions don't PNG. If we go back to the image maker and find their method responsible for creating the filing , you can see it's with height and by grants O concatenation of their hyphen and an Eddie and we append full stop. And the extension of the extension by default is PNG. We didn't pass the extension through as an argument. That's what is going to be a PNG. So it should be 600-600 hyphen, A full stop being G. That's what this should be. So what I'm going to do now, Ihsaa call the assertion So this assert equals and on new lines what I'm going to do is I'm going to create a new method which is actually going to generate this fine name, this pre defined file path and then the path which we are passing through is an argument. Second argument, basically, which is what we should do, what we will receive by making this canvas call and let's create this pre defined file path . There we go and hear what I'm going to do is basically use. Return this directory because I want to come continent with this directory, whatever that is going to give us and then implode using the hyphen. And you're a of items which will be we've passed through. Let's just copy what we've got here. So it's going to be 600 then 600 and then the last thing is a A and Eddie. And here I need to concord in a tit with the extension dot p engine. So that is going to reflect what I'm expecting to get from this canvas method, and we are now ready to run our first test. So if you go to a terminal now just to make sure, uh, I'm in the terminal and I'm directly within the placeholder dark to say if I just pwd You can see this is where I am And this is where the roots to my project. This So I'm running all these comments from the roots of our project PHP units and that gives me and they're here, uh, should return. Method doesn't exist because it doesn't exist. Let me just check. Of course it's not should return. It should be end return. There we go. We save it, go back and run the test again. And this one tells me that it cannot find operative this image maker. Let's quickly and go back to our test. We've imported this correctly. And so it's old there. Our image maker file has a correct name. Spaces. Well, any file name. So my only guess is going to be that we haven't actually run combos it. Dump out a load yet so that our composer out alot the updates all these out a load items basically and adds them to the altar loader. Let's quickly run it. Composer dump hyphen out a load and that's optimizes with so the flock hyphen. Oh, so this has generated new outer load file which now contains all of these items from within the out a load section here. We cannot close the composer. Let's run this test again. Ph units. And it tells me doubts. Basically, what we expect isn't actually was been returned. So we are expecting this string to be like this, and that's what we got. What we got is actually correct is what we expecting is and quiet. As you can see, there's missing there space in between a directory and in the file name. Let's quickly go back to our editor. And if we open our image, make a test. There we go. This is the place where we actually failing This director doesn't have any for us. Slash at the end, and we stray away imploding with the find him. So let's put there for its lush here just to make sure Now we separate these items directory and file. If we save it, go back to the terminal and let's run PHP unit again. And there we go. We have one test wanna station and eight passes, which is great. So the first test it's passing our converse mitt. It works fine when we actually passed through arguments in the in your a four months next test we're going to do is going to be very similar. The only difference is going to be that this time we're going to actually check for the same. But when we call in canvas without actually passing any arguments, the default values will be used. So I'm going to copy these in scientists and paste it right after this pretty find file path method and let's change its name. Generate new image with default, falled with height and backgrounds. And all these things are staying this and which could actually extracted, perhaps to separate methods. But these are only Delanie to test that we're going to half. Yes, I'm just going to keep it like that. A and let's just indented a little bit regards nuts. Eso everything alliance here nicely. Okay. And now, rather than passing the arguments through, I'm just going to call canvas without any argument. And rather than pre defined fire path, we're going to create the new method Default. Ah, file bath. Ah, default file bath. Yeah, that's right. Okay, let's create this method, and this method will simply return Whatever. And I'm just going to again copy what I've got here. Whatever the default values associate with the properties off the image maker. Let's quickly check for their with We have 600. For the height, we have 400 the background ISS six times. Letter F, which is giving us wide. So let's change this to F f F and N 400 for this one. And now it's going to be the precise finally, together with a path that we want this canvas to return. If we don't pass any arguments, we've got it stark here. So that's all good. Let's go back to our terminal and run their tests against a PHP unit. Now we should have two tests, hopefully to a passing. So he return and we go. It does work, so our tests are now completed. So we've tested that our court canvas method can return the correct path, with or without any argument passed through India reformer basically setting them with height and Bagram color or even the extension If you wanted to to a different Actually, this one, we could change, perhaps to Arthuis extension as well. Let's do extension. He extension and let's make IDs J. P. J. Beck. So I'm going to rather than having P and G. L is the J. P. G. Let's check if this is going to pass as well. So let's run Ph. Beauties again, and it does spots. So as you can see if we want to change the extension, we can also pass it through as an argument if I change it to P and G now and we're going to be complaining, too, against the Jay Pek. If we run it, you'll see that it fails because of the extension dozen much. So this is what we expected to be with a J. Peg bar. We getting PNG because that's what we passed through an argument. Okay, let's reverse it back to Jay Peak and back to the terminal. That's testing it again. And everything seemed to be working. Fine. Let's move next video When we actually going to apply this image maker to one simple class 4. Usage example: So now that we have our image maker class completed our tests written as well, they all pass. Let's now have a look at their simple example with a simple class called Pulse. So inside of their source Director, I'm going to create a new class called Post, and this is going to be really very, very simple classes only gonna have to properties. But before we said the properties, I'm going to also declare for Constance. First Constant will be called directory, which is where I want my images folder posts to be start and in my case is going to be on the assets and within the directorate posts. So it polls not boast. And if I open assets directory, you can see that I've added polls directory and one simple image dimensions for 600 by 600 . So we'll be able to interact with this image. We won't be uploading anything. We just have this image ready here and then statically we're going to associate the image name with the instance off this class. Okay, so the next constant will be named image with which is what I want. My images did amend the with all my images for the post than constant image on the school hide, which will be 600 as well. Then we're going to have constant image background and I want to set it to this gray color . A A. Okay, now that we have our Constance, let's set our two properties public title and in public image. And let's quickly our dog blocks for all of them. I'm going. Actually, art dog looks for constant as well, and just out some information here is so image dark, true and then far it's going to be string. Then we have image with var. Sorry into drink. This one is Dan. We have image high, and this one is into jazz. Well, then we have image background var string. I don't always out dog blocks for the Constance because they pretty much self explanatory, but let's just let's just put it in here, OK for the time till we are going to have a string and let's say is going to be a post title and for the image we're going to have a string as well a post image. Okay, so these our constants and properties now the first method we're going to art is going to be called image talk, public function, image talk and what it will return and will return the HTML image. Talk with the path to the image for this given post. So we start with the path variable and what we are going to do. Issues that this and the method called image really lots if path and it's going to return the past relative path to the image Ford is given post. And let's create this method straight away. And within this method, we get back to this image stock in just a moment. We didn't this method. What I'm going to do is check if this has image methods again. Method between to create, which will basically check whether the image exists. Then return self directory and then concatenation of the Ford Slash because the relative paths is going to be displayed actually in the browser. So it's definitely going to be a Ford slash, and then this image, otherwise we're going to return. Is this make image relative bath? So this is when we actually going to generate this place holding Okay, let's create this has image methods first, so has image will simply return Boolean truffles based on two factors. 1st 1 this isn't empty property image, and then we check his file. And in this image up so loot path, we have seen any to create all these matters for So before we do this, make image relative part. Let's create this image absolute bath. And this one is basically going to, ah, start with the path equals rial path. Very similar thing that we've done inside of the image maker class. And we first point to the current directory and then concoct in a tit with Ford's large full stops for it slash. This is where we want to get back quickly. So out off this way inside of the source directory. So from this directory, I want to get to the root directory first. So it's just one level up and then after this, we are concatenation path, so full stop equals and then string replace again because we are now dealing with the absolute passed. So we need to make sure that all slash is off the correct type on we do. It is exactly same way as we did before. We say that we want to replace forward slashes because this is what we going to be providing everywhere by default. And we want to replace them with the constant directory separator, which again is basically PHP. PHP is built in ah ah constant, which contains them. Reid, director Separated, Forgiven operating system and then self director is what we are passing through, which is basically passing the path which was declared on this director Constant. And we replace another forest losses with whatever that Richard separator given system uses . And then we're concatenation this again with director separator and then the name of the fires of this image. And at the end, we simply returned this path. So that's our image. Absolute path method. Let's tray away. Our dog looks to this one as well a return string and get absolute path to, uh, posts image thing That's fine. And then has image what we can put here. It's returning bullion, obviously. So check if boast has and image. So that's this one. And for these two lads for the image tuck, it will return string. And what can we say here? Get html image, doc, and for the image relative path, return string. Get relative path for the image off the image off the image problem part off the image. Okay, so we have his image. We have this absolute power. So the next method is going to be make image relative parcel. It's out. This method and what this method will do is basically used this image maker in order to generate the image based on our Constance So return and I'm going to use their static approach or image maker and then make canvas. As you may remember, because we're calling this statically, this coal static method will be involved here. Because of this, it will remove the 1st 4 characters and make the first letter off the remain reminder, basically lower case. So it's going to call the canvas method on the image maker. Okay. And here we are, passing the theory. Actually, let me just put it back, and I'm going to put theory here like this, and he I'm going to do with I want to be whatever we have associate it with the image with constant and hide whatever we have associated with image, height and in the background. However, we have associated with image backgrounds, constants uh and that's pretty much everything. Let's just import this image maker, he as well. And if we scroll up, you'll see. That's what we've got here, right at the top. Okay, so back to our image. Dark method. What we need to do after this is to simply return. Actually, let's create image valuable. Start with I Am G equals as our source equals between a double quotes and it's concurred in a tid. Now we need the past so path to the image than image closing. Double quote uh, let's out stuck as well an image. This title we're gonna use as an all talk at the attributes and an image closing the out attack, closing the image tuck and then return image. So this is our image. Start. Let me just check over, go everything. So here, basically relative get image relative past because this is where we're getting the Parts Day, which we could probably rather than using this path, we could probably in line it all in one place because we know using this valuable anywhere else. That is what this way As the first week of all, we checking if the image exists. If it exists. Just get the default director, which you have set on this associated with this directory. Constant then coordinated this with the image name otherwise generating a new image and by generate, I mean get the new place holder image. Because if it's already in there, image maker directory is just going to be fetched. It's not going to regenerate. The same image is going to fetch it if we go back to utilities image maker. If we check what it does, this canvas once again the first of all we instigating the profits and check if it's not existing is the fault does not exist. Then make it otherwise just get it. Get the relative path to this image. So if the fire was the in the first place, this make method would never be involved. And then we would just fetch there the relative path to the fall and and that's pretty much it. So I think we can test it. Do we need any more? Yes, there we go. The books here So it returns. Makes no, it doesn't return mix. It's going to be a string and get placeholder image rela tive path. There we go and now it's that so our post classes now completely. Let's go and open our We're just going to collapse all this directory. I'm going to open index dot PHP right to the beginning of this course. We've required this outer low down, which is what we need. But now let's try and I'm going to show you first. Before you start using this post class, I'm going to show you first. A few other examples. So image manager, I'm going. Teoh instance. She ate it. So new image manager. And I'm going to say that I want to use a driver. I my Jake. So I'm going to be using image magic in this case, and I'm going to generate image. Image equals and I'm going to in line. It's rather than Instant Sheet is on its own new image maker, and I'm going to pass this image manager as an argument to it and then called canvas method on it. With the options any options will be with will be six hundreds, Then high will be 600 as well, and for the background I'm going to set it to know this red color 900 on Let's quickly import all these import and the same for this image maker. I'm going to move above the outer loader. Something like this. Okay, so now this image shoot, store the path to this place. Hold image. Let's do the echo image. Go back to browse the refresh the page, and there we go assets image maker and then image 600 by 600 by 900 which is my See the color. And then come continent with the extension. PNG. Let's go back to our editor Open Acids directory and an image maker. And there we go. Here's the image which has just been generated. If I opened this red color with my watermark in between 600 by 600 p and G, that's exactly what has just happened. Now if I re allowed the browser now, we just pulled this image because this image already exists, so it didn't have to be regenerated. It's just pulled from this direction because we are the head of have it. So that's how it works. Basically, every time you miss the image forgiven record, if the image has already generated is already know in Ah, I'm directory then it's just being pulled and displayed in the browser otherwise is going to generate it and then displayed in the browser bus and give you the the relative path to it. Okay, Obviously this just to religion. Obviously, this could be done. Something like image maker equals. And obviously, then we could use this image maker and do it like this. But as I said, I did it in line rather than instance. Sheeting it separately. Okay, this is one of the approaches than obviously theory. Approach would be to just remove all this and use the static approach, which would be image maker and then, ah, make compass. And there we go. That would work exactly same way now we don't have to. Instant. She ate this image manager and so on. We can just call it statically. If we go back, refresh the page Exactly. Same result and the image is obviously still there. So this is obviously that's why we've added this Ah, static call static magic method to allow us to do it all like this rather than initiating a bunch of classes. Okay, so that's one of the things. Now let's try and put this image talk in their image him itch bath in the image tac lam going to close this PHP section here and let's just cut this and I am G source. And in between the opening and closing PHP talk, let's just put this image where it apart ISS for Go to the browser, refresh the page and there we go. Our image is now displayed in the browser proper. Html hashtag So that's how we can do it with the image maker. Let's now have a look at the example with this new post class and how we can actually use it in order to output this image stuck. So what I'm going to do is first of all, isn't she the posts a post equals and you both? We don't need this brackets because we don't have anything to pass through to the constructor. Then post title will be post title and then post image. I'm going to set it to something that does not exist. Post image, for instance, adult PNG. And then I'm going to echo post image duck method, which have created earlier toxic and remove this image maker here as well. Let's just open the spells actually added their names space to it. So name space is going to be up because that's where it is. It doesn't go any further. NASA's just in the source. Doctors say his name. Space up, Let's imported within our index dot PHP file again. So let's just do it like this. And that's pretty. Everything in the browser refers the page, and there we go. We see the Grey image with 666 100 dimensions. If we just inspecting their browser, look what's happened. So I've got this asset image maker 606 hund by A and the Pulse title, which is the title property off this post instance, has been at it as the Al stuck. If we go back to the editor, you'll see that this image has now been generated because obviously the post class could not find the image. But if I change it to the image that actually exists within the poll's directory, which is this water is so it's not water markets. No one adult J p g save it reviewed in the browser. And there we go. You have the actual image because the image exists so just fetch the limits. But if we change it to something else, let's say 011 that will not exist and that will replace it with a placeholder. And if we were to change some of these values Yeah, let's say height we set to 400 Coehlo background. Let make it. Let's make it black. So Triple Zero, we go back to the browser, refresh the page and there we go. Now we've got four months. 600 wide, 400 high, with a black background somatic. This has been generated back to the editor. You can see this has been added to this image maker director. So as you can see, you can do it whichever way you want. Ah, in terms off the image, dimensions, background, color, even the extension. So I have a play. I hope you enjoy the scores. And if you have any questions and comments, obviously please use our common section under this video