Django Static Files

Introduction of Django Static Files

Static files are images, CSS scripts in the application. Django offers flexible techniques to induce these static files into the application. This flexible way of managing these static files will help to maintain the application performance better. The django.contrib.staticfiles is responsible for maintaining the static files in Django. The django static files play a wide role in the content management of the items used. from a Django perspective, the framework offers convenient ways through which these file-oriented resources could be very effectively handled. serving these static files precisely in production is also among the key capabilities of the currently derived Django frameworks.

How Static Files Work in Django?

Let’s see how static files work in django?

1. Ensure django.contrib.staticfiles

First we need to ensure the django.contrib.staticfiles is added as a part of INSTALLED APPS in SETTINGS.py.
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'django.contrib.postgres',
'Django_app1'
]

2. Ensure static url

Next, we need to ensure the static url is being set to ‘/static/’. All the static files will be served to the webpage using a url, and this url will have this /static/ appended to it. Basically, all the static files collected in STATICFILES_DIRS or STATIC_ROOT are accessed by the webpage using this url
 

SETTINGS.py:

STATIC_URL = '/static/'

3. Ensure STATICFILES_DIRS or STATIC_ROOT

The STATICFILES_DIRS or STATIC_ROOT variables are responsible for mentioning the path at which the static files are stored. the STATIC_ROOT is preferably used in PROD systems whereas the STATICFILES_DIRS are used in test systems. both these variables cannot be declared in the same SETTINGS.py file.
 

SETTINGS.py:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] #STATIC_ROOT = os.path.join(BASE_DIR, 'static')

4. Python manage.py collect static command

This command is used for collecting all the static files in the system and get them associated with the static directory.

python manage.py collectstatic

5. Template file changes

At last the below changes has to be made in the template file. these changes will load the static files in the template files during the rendering process.

• All these changes are associated with the header section of the html file.
• add the static files load command in the template head section.

{% load static %}

• • set the static folder reference path in the item to be pulling the static files.
    • CSS files: <link href=”{% static ‘admin/css/font.css’ %}” rel=”stylesheet”>
    • Image files: <img src=”{% static ‘admin/css/font.css’ %}” ” alt=”My image” height=”300px” width=”700px”/>

• The above changes will successfully pull the static files from the static folder.

Examples of Django Static Files

Following are the examples are given below:

Example #1

css file:

STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static'), ] #STATIC_ROOT = os.path.join(BASE_DIR, 'static') body {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 36px;
letter-spacing: 2px;
word-spacing: 1.8px;
color: #02071C;
font-weight: 700;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 34px;
letter-spacing: 2px;
word-spacing: 1.8px;
color: #02071C;
font-weight: 650;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h2 {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 32px;
letter-spacing: 1px;
word-spacing: 2.0px;
color: #02071C;
font-weight: 600;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}
h3{
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 30px;
letter-spacing: 1px;
word-spacing: 2.1px;
color: #02071C;
font-weight: 400;
text-decoration: none;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
}

Image Location:

filehandeling.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Django App1</title>
{% load static %}
<link href="{% static 'admin/css/font.css' %}" rel="stylesheet">
<style>
body {
background-image: url("{% static 'admin/img/background.jpg' %}");
background-color: #acccbb;
}
</style>
</head>
<body>
<h1> <u> FILE UPLOAD HANDELING IN DJANGO </u> </h1>
{% if messages %}
<ul>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
<div style = "max-width:470px;">
<form method =  'POST' enctype="multipart/form-data">
{{ file.as_p }}
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="submit">
</form>
</div>
</body>
</html>

Output:

Example #2

css file:

@import url(fonts.css);
body {
margin: 0;
padding: 0;
font-size: 45px;
font-family: "Roboto","Lucida Grande","DejaVu Sans","Bitstream Vera Sans",Verdana,Arial,sans-serif;
color: grey;
background: #fff;
}
a:link, a:visited {
color: #447e9b;
text-decoration: none;
}
a:focus, a:hover {
color: #036;
}
a:focus {
text-decoration: underline;
}
a img {
border: none;
}
a.section:link, a.section:visited {
color: #fff;
text-decoration: none;
}
a.section:focus, a.section:hover {
text-decoration: underline;
}
/* GLOBAL DEFAULTS */
p, ol, ul, dl {
margin:.2em 0.8em 0;
}
p {
padding: 0;
line-height: 140%;
}
h1,h2,h3,h4,h5 {
font-weight: bold;
}
h1 {
margin: 0 0 20px;
font-weight: 300;
font-size: 20px;
color: #666;
}
h2 {
font-size: 16px;
margin: 1em 0.5em 0;
}
h2.subhead {
font-weight: normal;
margin-top: 0;
}
h3 {
font-size: 14px;
margin:.8em 0.3em 0;
color: #666;
font-weight: bold;
}
h4 {
font-size: 12px;
margin: 1em 0.8em 0;
padding-bottom: 3px;
}
h5 {
font-size: 10px;
margin: 1.5em 0.5em 0;
color: #666;
text-transform: uppercase;
letter-spacing: 1px;
}
ul li {
list-style-type: square;
padding: 1px 0;
}
li ul {
margin-bottom: 0;
}
li, dt, dd {
font-size: 13px;
line-height: 20px;
}
dt {
font-weight: bold;
margin-top: 4px;
}
dd {
margin-left: 0;
}
form {
margin: 0;
padding: 0;
}
fieldset {
margin: 0;
padding: 0;
border: none;
border-top: 1px solid #eee;
}
blockquote {
font-size: 11px;
color: #777;
margin-left: 2px;
padding-left: 10px;
border-left: 5px solid #ddd;
}
code, pre {
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
color: #666;
font-size: 12px;
}
pre.literal-block {
margin: 10px;
background: #eee;
padding: 6px 8px;
}
code strong {
color: #930;
}

formhandeling.html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Django App1</title>
{% load static %}
<link href="{% static 'admin/css/base.css' %}" rel="stylesheet">
<style>
body {
background-image: url("{% static 'admin/img/background.jpg' %}");
background-color: #acccbb;
}
</style>
</head>
<body>
<h1> <u> FORMS HANDELING IN DJANGO </u> </h1>
<div style = "max-width:470px;">
<form method =  'GET'>
{{ form.as_p }}
{% csrf_token %}
<input type="submit" class="btn btn-primary" value="submit">
</form>
</div>
<ul class="messages">
{% for message in messages %}
<li{% if message.tags %} class="{{ message.tags }}"{% endif %}>{{ message }}</li>
{% endfor %}
</ul>
</body>
</html>

Output: