Updated May 20, 2023
Introduction of Django Static Files
Static files are images and 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. This plays a wide role in the content management of the items used. From a Django perspective, the framework offers convenient ways to handle these file-oriented resources effectively. The currently derived Django frameworks possess key capabilities for precisely serving these static files in production.
How Static Files Work in Django?
Working is as follows:
1. Ensure django.contrib.staticfiles
First, we must ensure the django.contrib.staticfiles is added to the 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 must ensure the static url is set to ‘/static/’. The webpage will access all the static files through a URL, which will have /static/ appended to it. The webpage accesses all the static files collected in STATICFILES_DIRS or STATIC_ROOT using this URL.
SETTINGS.py:
STATIC_URL = '/static/'3. Ensure STATICFILES_DIRS or STATIC_ROOT
The STATICFILES_DIRS or STATIC_ROOT variables have the responsibility of specifying the path where the static files are stored. In PROD systems, it is preferable to use STATIC_ROOT, while in test systems, STATICFILES_DIRS is used. However, it is not possible to declare both of these variables 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 collects all the static files in the system and associates them with the static directory.
python manage.py collectstatic
5. Template file changes
At last, the below changes have to be made in the template file. These changes will load the static files in the template files during rendering.
- The header section of the HTML file is associated with all these changes.
- Add the static files load command in the template head section.
{% load static %}
- set the static folder reference path in the item to pull 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
Below are the given examples:
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:
Recommended Articles
We hope that this EDUCBA information on “Django Static Files” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
