Join us and get access to thousands of tutorials and a community of expert Pythonistas.

This lesson is for members only. Join us and get access to thousands of tutorials and a community of expert Pythonistas.

Unlock This Lesson

Static Files

Getting Started With Django: Building a Portfolio App Martin Breuss 06:57

In this lesson, you’re going to learn about static files so you can add images, CSS, or JavaScript in the right folder structure inside Django.

When you created models.py, you said that there would be images associated with each project and you put them in the database with the filepath '/img':

# Create your models here.
class Project(models.Model):
    title = models.CharField(max_length=100)
    description = models.TextField()
    technology = models.CharField(max_length=20)
    image = models.FilePathField(path='/img/')

Just like you saw with the templates folder, Django is aware of all the static folders inside each project and collects all of them and puts them all in one folder, so don’t forget to use double folder structure.

00:00 Hey again! In this video, we’re going to talk about static files: how to add images—or eventually also other things like CSS or JavaScript—into the right folder structure inside of Django. Let’s take a peek.

00:15 So, what we did in our models before, we said there’s going to be images associated to each project, and we put them into the database with the file path '/img' (image).

00:25 One thing you need to know about Django is that, similar to the templates folders, Django’s going to be aware of all the static/ folders inside of each project.

00:34 So, something that’s called static inside of here—let’s go ahead and create it: static.

00:39 Django’s going to know about that this exists, and it’s going to look for images, for example, inside of there. So, what we’re telling it here is we’re saying inside of static, there’s going to be a folder called img. Let’s create that one as well.

00:58 And inside of there, we’re going to have the different file paths. Those are just going to be the names of our image files associated with the projects. Cool.

01:08 So, what we could do next is just copy-paste those images right in here, and then start hooking it up. However, what I mentioned for a moment was these static/ folders are similar to templates/ in that Django is aware of them inside of each app, and they are similar in another way, which is that in production, Django collects all the static/ folders from all of the apps that you have in your project together, and puts them all into one folder.

01:37 So remember, we looked at Django’s double folder structure when we looked at template folders. So we said, we want to put always a subfolder that has the name of the project inside of the templates/ folder, so that then, when they finally all get collected together in the big templates/ folder, we’re not going to run into any problems.

01:58 The same thing, surprisingly, applies also for everything inside of static/. So what do we want to do again, to avoid future troubles, is to make this double folder structure.

02:09 Inside of projects/, we’re going to have a static/ folder, and inside of there, we’re going to have another projects/ folder, named after the app that you’re working with. The reason the exact same as with templates/: if it gets collected together, we want to avoid ambiguity.

02:23 So, eventually, this is what we would want to end up in production: one big static/ folder, a subfolder named after the app, and then inside, whatever we have, and then we can repeat ourselves and it’s not going to make any problems. Okay, so, this is not how we currently have it set up over here, all right?

02:43 We’re just saying static—that’s the one that Django’s aware of—and then '/img'. So we will have to change something here and let’s go ahead and fix that.

02:57 What we need to do is add here, the name of the project folder, projects—

03:04 that’s how we want it to look like: '/projects/img'. And then, inside of here, we’re going to recreate this same structure that we have with templates/, so I’m going to make a new folder in here, call it projects, the name of our app, and then I’m going to move this folder in there.

03:28 So now, perfect, right? Now we have the double folder structure, everything is fine. Inside of here, we’re going to have our images. However—and that’s an important thing to be aware of—we made a change to our model that is going to tell the database how to set it up, but we have not applied this change to the database.

03:48 So what we need to do to make these changes also be reflected inside of the database—so that every data item, every image file path that we’re going to add, is actually going to have this extra projects/ folder prepended to it—is we going to have to do two things. First, we’re going to have to say python manage.py makemigrations.

04:12 Let’s take a look at this. You’re going to see another migrations file pop up here, once I run this command,

04:20 and it also gives us feedback. It tells us, “Okay, what happened is we altered the field image on project.” project is our table and that’s the image field. We made a change here.

04:33 A way that you can see here, also, is a second migrations file popped up that has encoded in Python to translate into SQL, and then finally apply those changes to the database. Again, they’re not applied yet.

04:47 All we did with this first command makemigrations is to make the migrations—in here, this file gets created. And now, what we want to do is apply those migrations to the database

04:59 by running the command migrate. So, once I run this, we see a much shorter output than last time, but we get another OK, so that means that now our database, every time we’re going to add something to it, it’s going to prepend '/projects/img', which is perfectly correct for how we want our double folder structure to be set up. All right. So, let’s close all of this.

05:22 We took a little excursion in here. What we want to do now, is to also add image files in here. Because all that we’re storing in our FilePathField, is just the path to the files, not the files in themselves.

05:38 We’re going to have to add the files to this folder. And for that, I’m going to head to my desktop, where I have these three files randomly distributed around here, and I’m going to add those to my project.

06:24 So, after moving them over, now I have them sitting in here, just inside of the folder structure. We know that our path that we’re saving into the database is going to correctly bring us all the way to here, so that what we’re going to have to add is only the filename—depending on what entry we want to choose, the correct filename for that.

06:48 Perfect. That means our static files are set up and we can continue in the next video.

Martin Breuss RP Team on Jan. 7, 2020

Hello @Amit kumra. It is difficult to diagnose your issue and provide helpful tips without more information.

Can you describe what problem you are running into? Is there any feedback from your command line when attempting to create the object?

As some general tips:

Make sure you are working in an activated virtual environment where you have Django installed
Start the shell session with python manage.py shell
When creating the object, make sure you’re providing all the necessary information

Hope that helps, otherwise please describe in detail what you are doing and what is currently not working, as well as any error messages and exceptions you are receiving.

dinu on Feb. 26, 2020

Path for image is specified as “projects/img”. Shoudln’t it be “static/projects/img” instead.

Ricky White RP Team on Feb. 27, 2020

Hi Dinu. You don’t need to put static at the start of your paths in this case, as Django knows to look for files and images there by default. This is because you will have STATIC_URL set in your settings.py file which tells it the base directory for all static file. Hope that helps.

tfgf on Dec. 10, 2020

Hi,

Python is throwing an error regarding FilePathField with path “projects/img” being not found.

Shouldn’t it be relative to double structure folder?

Like so:

image = models.FilePathField(path='projects/static/projects/img/))

tfgf on Dec. 10, 2020

Oh just realised that FilePathField error is handled at: realpython.com/lessons/debugging-part-1/.

Important: In case you try to fix it on this lesson, watch that video.

Vasanth Baskaran on Aug. 20, 2021

For those who are wondering, you can download the “sample project” zip file from the supporting material. If I am not wrong it contains the image files used by Martin on this course.

east4ming on Jan. 9, 2023

Is /static/img/projects/ more reasonable than static/projects/img/? After all, a production web site typically has all the images under one context root (such as /img/)

VitaminC on April 20, 2023

I’m using PyCharm Community edition. I noticed when you create directories in the “projects” folder that your IDE seems to create a package automatically without having to explicitly select a ‘package’ in the drop down list (New -> Directory). For me to create a folder represented by a folder with a small circle in it, such as you’ve done in your video, I have to select ‘package’ and not ‘directory’. Have you configured your PyCharm to do this automatically, or is it a feature that isn’t available on the Community edition?

Joshua Rin on Sept. 9, 2023

In the double-folder structure in the templates video you create templates/projects, but in this double-folder structure you create static/projects/img. I don’t understand the inconsistency.

Bartosz Zaczyński RP Team on Sept. 11, 2023

@Joshua Rin There’s no inconsistency, as both the templates/ folder and the static/ folder contain the corresponding app subfolders, such as projects/. Inside that nested folder, you’re free to create as many subfolders as you like. The img/ one is a convenience folder to keep things organized by storing images separately from other static resources like JavaScript files or CSS styles.

Become a Member to join the conversation.