How To Use Static Files In Django

We have worked with only pure html till now, but now it’s time to move forward. In order to make our web page more attractive visually, there occurs a need for images, videos etc. We even apply spreadsheets (CSS) to our html which increases the strength(appearance) of our web page. So, today we will be adding images and CSS into our webpage with the help of Django.

So let us start by simply adding an image to our html page with the help of image tag. Whatever images or css files which we want to use in our project should be stored in a separate folder named “static”. We can store the images and spreadsheets separately or together, that does not affect our project. We only have to take care of the path to those static files. As we defined a directory for our templates earlier, same thing should be done for our static folder too, it can be done as shown below:

It should be added in settings.py of our Project folder.

As I have already stated that Django has a very transparent and brilliant documentation, we can get an idea about that from our settings.py. We have to add this variable to our static directory now. We can see a section defined to declare this directory at the bottom of our file as shown:

The section for static files is clearly defined in form of comments which makes Django very transparent.

Now after adding our directory, we can now work with our html file. In order to use these static files, we have to declare a-kind-of header file which declares that we will be accessing static files for this html file. We can declare it as:

{% load staticfiles %}

It should be declared on the top of our html file, just below the <!DOCTYPE html>. One thing to note here is that, while working with template tags (https://medium.com/@sharma.ashish.1996/template-tag-f9f7ee0a5dcb), we injected the text into our html using {}. {} is used to insert text into html while {%%} is used to insert other than text like images, css etc. We have to use the image tag for our logo as shown:

<img src=”{% static “file_location with extension” %}” alt=”Text to display if image is not found”>

Let the name of our logo be “logo.png” which is located in our static folder. Then we can use that static file with the help of following code:

After defining our views and managing our urls, if we visit our specified URL, we can get our logo as shown below:

Similarly, we can include our spreadsheet also by using {%%} syntax. Let us change the color of our heading and include a fancy border with the help of following CSS:

As I mentioned earlier, it’s not mandatory to separate the css and image files, but in order to have a proper allocation of files, let us create a folder named css and copy our first.css into it. We can now include this file into our html by using following:

<link rel=”stylesheet” href=”{% static “css/first.css” %}”>

Even though it doesn’t look good, yet we have successfully applied our css into the html file:

So, that’s all for today, we will be working with models and databases in upcoming blogs. But before we move forward, let’s just make a project with everything we have learnt so far. We can call it an advance level of our previous project (https://medium.com/@sharma.ashish.1996/a-small-project-in-url-mappings-9af69b0560fd). This project will be similar to that project, but instead of manually visiting each link, give user a choice to click on a link and view the details (use anchor tag). For example, we can have a link saying- “Click here to view father’s details”. Also provide a link for homepage at each page, so that user can come back to home page whenever he wants. For each details page, try a decent background image with matching colors, if you want give borders, margins, padding etc. Try it, I will be discussing the solution in next blog and then we will start with our models, stay safe and keep coding…

Thank you for reading, if you liked the article please click on the clap button and show your support. You can clap more than once, just keep pressing the icon!!!

VLSI Engineer with the urge for sharing knowledge.