Django Static Files And Images

Django Static Files And Images

Now we are going to add some style to our posts application that we have been building. Django follows conventions for locating static files and images, just like it has conventions for most things. In Django, you can have static files shared across an entire project or on a per-application basis. In this tutorial, we will be setting up a static directory inside of our given application. Then we’ll make use of the static template tag to make use of static files inside of the application like CSS files, Image files, and JavaScript files.


The first thing you want to do is configure the STATICFILES_DIRS constant in We are going to be storing our static files and images in a directory named static. Therefore we add the following snippet to the bottom of the file.

# Static files (CSS, JavaScript, Images)

STATIC_URL = '/static/'

    os.path.join(BASE_DIR, 'static')

The STATIC_URL is already configured by default, but you do need to manually add that STATICFILES_DIRS setting.

Directory Layout

Within the application directory, we can add a static directory in addition to the template directory.

django static files per app

Notice that inside of the posts application folder, there is a static folder. Inside of the static folder, we need to namespace just like we do with the templates folder. So we can place our static files in this structure.

  • posts/static/posts
  • Our templates are located using this structure.

  • posts/templates/posts
  • This is to make sure that every time Django searches for files across different applications, it is using the correct one if two files have the same name.

    Setting up a base template

    We are once again going to use Django Template Inheritance to set up a base template named base.html.


    <!doctype html>
    <html lang="en">
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        {% load static %}
        <link rel="stylesheet" href="{% static "posts/css/bootstrap.min.css" %}">
        <title>Django Blog</title>
    <body class="container mt-5">
    {% block content %}
    {% endblock content %}

    In the snippet above, we are using the static template tag to build the URL for the given relative path. To use this, we first need to load it using {% load static %}. From there we can build out a target url using something like {% static “posts/css/bootstrap.min.css” %}.

    Extending From Base.html

    We already have a file in our app that displays a list of blog posts in the system. We saw this in the Django Models tutorial. Now we are going to update the post_list.html file so that it extends the base.html file we just referenced above.


    {% extends "./layout/base.html" %}
    {% load static %}
    {% block content %}
        {% for post in posts %}
            <div class="card mb-4" style="width: 40rem">
                <img src="{% static 'posts/images/'|add:post.slug|add:'.jpeg' %}" class="card-img-top">
                <div class="card-body">
                    <h3 class="card-title">{{ post.title }}</h3>
                    <h6 class="card-subtitle mb-2 text-muted">{{ post.slug }}</h6>
                    <p class="card-text">{{ post.snippet }}...</p>
        {% endfor %}
    {% endblock content %}

    By using the {% extends “./layout/base.html” %} line of code, we are now making use of the Html and included static files of base.html. We also have changed the markup in post_list.html to make use of bootstrap classes. This creates a pretty good looking result.

    django blog list

    Learn More

    Django Static Files And Images Summary

    We can use static files and images with Django to give our applications a better look and feel for the end-user. Configuring static files for local development is pretty easy and you can consult the documentation for steps on how to get a production environment ready.