Introduction

In this tutorial I will show you how to work with static resources in Django
templates. Static resources, such as, css (Cascading Style Sheet), images, js (JavaScript) are frequently required to include in our web application as these resources increase look and feel and to handle any events of the web pages.

Django provides django.contrib.staticfiles to help you manage them.

You may like to read on template.

Prerequisites

Knowledge of Python and Django Templates

Python version – 3.6.5/3.8.5, Django version – 2.2/3.0.8

Project Configuration

You generally create a Django project and under your project you have one or more applications.

Let’s say you have created Django project called myproject and you have also created an app called myapp under myproject. You may check the documentation for creating Django project and apps under project.

I assume that you have the required configurations for your myapp in myproject/myproject/settings.py file in INSTALLED_APPS section as below:

INSTALLED_APPS = [
    'myapp.apps.MyappConfig',
	...
]

The myapp.apps.MyappConfig is formed as a dotted notation from myproject/myapp/apps.py, where you will find the class name as MyappConfig that has name myapp.

Also make sure that django.contrib.staticfiles is included in your INSTALLED_APPS. So the INSTALLED_APPS looks at least similar to below:

INSTALLED_APPS = [
    'myapp.apps.MyappConfig',
    'django.contrib.staticfiles',
    ...
]

In your settings file – myproject/myproject/settings.py, define STATIC_URL, for example:

STATIC_URL = '/static/'

Putting Static Resources

You have to put the static resources, such as, css, js, images into the correct location.

So create a directory called static under myproject/myapp directory. Now you can keep the static files into static folder or you can segregate them and keep css under static/css folder, keep js under static/js folder, keep images under static/images folder to manage the files in better way.

Here I will create separate folders for keeping static files.

Related Posts:

• Working with Static Resources CSS JS Images in Flask Framework

So create myapp folder under static folder and then create css, js and images folders under static/myapp directory.

Let’s say, we have kept style.css file under static/myapp/css directory, jquery.min.js file under static/myapp/js folder and sample.jpg under
static/myapp/images folder.

Note you might be able to get away with putting your static files directly in myapp/static/ (rather than creating another myapp subdirectory), but it would actually be a bad idea. Django will use the first static file it finds whose name matches, and if you had a static file with the same name in a different application, Django would be unable to distinguish between them. You need to be able to point Django at the right one, and the easiest way to ensure this is by namespacing them. That is, by putting those static files inside another directory named for the application itself.

Now let’s say you have a template file called index.html under myproject/myapp/templates/myapp directory and you want to load static resources. So your template file would looks like below:

{% load static %}

<link rel="stylesheet" href="{% static 'myapp/css/style.css' %}">

<script type="text/javascript" src="{% static 'myapp/js/jquery.min.js' %}"></script>

<div>
	<img src="{% static "myapp/images/sample.jpg" %}" alt="My image">
</div>

//rest of your code goes here

In the above template, I used the static template tag to build the URL for the given relative path using the configured STATICFILES_STORAGE.

You may like to read on template.

That’s all about working with static resources css, js and images in Django templates.