Working with static resources in Django templates

You may also like to read:

Introduction

In this tutorial we will see working 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, Django version – 2.2

Python and Django setup

Example with Source Code

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

Project Configuration

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 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

We 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 we will create separate folders for keeping static files.

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 we might be able to get away with putting our 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. We 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, we 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.

Thanks for reading.

Working with static resources in Django templates

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top