Django Tutorial #12 - Static Files & Images

Hey ninjas, in this django tutorial I'll explain how we can set up our django project to use static files such as images, css and JavaScript files.

----- COURSE LINKS:

======== Other Tutorials =========

----- NODE.JS TUTORIALS

----- MONGODB TUTORIALS

======== Social Links ==========

[ProSimples]

If you're running Django 3 and were on an older version before, you need to replace:


{% load static from staticfiles %} or {% load staticfiles %}


with just:


{% load static %}

[ignamikel]

bro just wanted to say that 6 years later, your django tutorials are still the best around! 🤗

[gszpdmv]

in DJANGO 3, in settings.py use the following STATICFILES_DIRS = [
BASE_DIR / "assets",
]

[adarshpunj]

Okay, this is indeed the BEST DJANGO tutorial in the universe. Thanks a lot for creating series.

[maxiequa]

AWS/Django for production mini-series +1

[stebterp]

Thank you very much for this series!
I'd like to add that I'd be very interested in a Django for production + AWS series.

[devkrishanrpurohit]

if the file doesn't show up, please make sure you added the finishing coma in the tuple
STATICFILES_DIRS = (
os.path.join(BASE_DIR, 'assets'),
)

this is in the settings.py

[rossideas]

Your communication skills are the best!! Short, sweet and to the point. Thank you.

[atitallahmariem]

u are awesome :) i was so confused and scared about django but the more i advance the more it getting clear and simple thank u, keep creating such perfect series plz :)

[mel]

I really like your tutorial videos. Each video/Topic is short, and gets straight to the point. I know this version may be a little outdated, but I prefer to go by your videos!

[vtconnq]

Thank you!! I searched many information, so I find this! I thougt about give up, but with your help I may continue my hobby!

[austinmurphy]

FIX: in templates {% load static %} in link href="{% static "styles.css" %}"

[garynelson]

I'm still going, but this series is exceptional. I have been using Django for about 2 years by mostly modifying the starter app that comes in Visual Studio (haters gonna hate) but I never understood it. This has filled in all the blanks. Can't thank you enough.

[AcademiaPython]

best tutorial I've ever seen, I'm loving it.

[alexarcasm]

To get the Ubuntu font you need to add :
<link rel="stylesheet" type="text/css" />
to the html file

[amrino]

What a great tutorial, thank you. Succinct, clear and quick!

I had three issues that others may have had.

1. You need to "import os" at the top of the settings.py file
2. When trying to access my admin site after these changes I had an 'incorrect padding' error. I found a solution on stack overflow - you need to download a more recent version of Django (pip install django==3.1.1)
3. {% load static from staticfiles %} did not work. I found a quick fix on stackoverflow. Just change it to {% load static %} and it works really well.

[GabrielOliveira-hmgi]

If you are having trouble with the static filers thing, try to check the folder level, it has to be on the same level of apps.

[TheVinfather]

Thanks for the tutorials, I've learnt a lot from you

[adambernard]

THANK YOU. I can't believe how bad the official django documentation is for this simple task.

[clinck]

If your changes in css is not reflecting on web page then it might be because of your browser is caching css file in the browers,
Try refreshing web page by holding ctrl or shift, this should work.