In this video, learn how to add static files and URLs to your project.
The next thing that we need to do on our website is add a picture of ourselves. We want to present ourselves to the world here and the jobs that we've worked with, and a nice picture of yourself is a great way to do that. So you might have noticed here on the desk top, a picture of little old me here, feel free to use my picture if you don't have one yourself, but really, again, this is your website, let's see you project, a picture of yourself there. But when we add this to our website, you know, a picture of ourselves is not really a job, it doesn't make sense to add it in that way, right, we don't wanna go just drag and drop this into the images folder, we want this to come into our site as a static object, and if you're wondering what a static object is, it's something specifically for your website, it's not connected at all with the database, so it's a little bit of a process to get this up and running, but I'm gonna take you step by step through that.
So the first thing that we need to do, is we need to open up the folder that's gonna contain our image. And so, let's go ahead and move into Atom here, and inside of our jobs folder, we're gonna create a new folder called static. Okay, so we'll just go ahead and name that Static. And this is where we're going to add the image of yourself. So, I'm gonna go ahead and move back into the desktop let's open up a finder so I can drag and drop this in, so I'm gonna get inside of our portfolio project, go into jobs to that static folder that we just created, and I'm gonna copy this picture and paste it inside of there.
Great, so we have this picture of ourselves inside of our jobs app, essentially it's inside of the stack folder, but in the bigger picture it's a part of the jobs app. The next thing that we need to do is we need to tell Django where to be looking for this information, and how to display, ultimately that, to the user. So we're gonna move over into Atom, we're gonna go to our settings, let's open up the portfolio folder and go to our settings, and we're gonna be scrolling all the way down on this file.
But in addition to saying that we should have a static URL, we also have to say where we want the static to be stored. So we're gonna put in all caps here: STATIC_ROOT, and we wanna have this equal to a place in our project where we want this to be. Now, it's gonna be really tempting to, you know, just manually type out the file path, but the thing is, our portfolio project could move to different places on our computer, and eventually we're gonna be putting it up on our website, so we never wanna, go you know, all the way and say something like, okay we're gonna go to our users slash nickwalter, all that stuff, instead we always wanna refer to files within the project.
And so, in order to do this, we're gonna write a little bit of code to get to our base of the project, and then say put it in a particular folder. So we're gonna say: os.path.join, okay, and this is because we're joining two things together, first is going to be the BASE DIR, which is the base directory, that's sort of the starting point of our project, and then we're gonna say a comma, and then give a name for the folder where we want this to be stored, so let's just go ahead and just put static inside of here.
So, again just a recap, we just added this one line, I kinda walked you through everything that you needed there, but we're gonna have the static root at the very end of our file line 126 that says: hey we want this to be in our base directory in a folder called static. Now with this in place, let's go ahead and move over to our URLs because in order to access these static files we have to know what URL they should be displayed at. So we're gonna need to get those things that we just set in our settings: the static root, and the URL.
So we're gonna have to import our settings into this file, so we're gonna say: from, and this is all lowercase, django.conf-import, and we want to import our settings, so all lowercase settings, just like that. The next thing that we wanna do is from, lowercase django.conf. and we wanna get to our urls.static, and we want to now import static.
So with these two imports here, at the end of our urlpatterns we're going to say: plus-lowercase static, what we just imported with parenthesis, and what we're gonna provide inside of here is the static URL and the static root. So we're gonna say: settings., and then all caps, STATIC_URL-comma, and then settings., and now we want: STATIC_ROOT.
Now with this second setting here, where we have the static root, this is a perimeter that we have to specify, and so we're gonna say: lowercase document_root is equal to this, so we don't have to for the first perimeter 'cause it's needed but, so we have fully here: static(settings.STATIC_URL, document_root=settings.STATIC_ROOT) and this is essentially pulling those two things that we just set in our settings.py here, and now applying them to our URLs to say: hey, these are the things that we want to use when we're showing static files.
So, again, a lot of leg work here to be able to show static files, but Django needs to know: where they are, and where they should be located.
- Setting up URLs in your Django project
- Creating models in Django
- Connecting your Django project to Postgres
- Adding static images
- Designing the layout for your website
- Creating object views
- Updating URL paths