Working with media files in Django templates

Introduction

This tutorial will show you working with media files in Python based Django templates. Media files, such as, images, videos etc. are frequently loaded into your web application as these files improve end users’ experience.

Note that static resources or files and media files are two different things. Media files are generally uploaded by users for explaining a certain event.

You may also like to read working with static resources in Django templates.

By default, Django stores files locally, using the MEDIA_ROOT and MEDIA_URL settings.

Prerequisites

Knowledge of Python and Django Templates

Python version – 3.6.5/3.8.5, Django version – 2.2/3.0.8

Project Configuration

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

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.

In your settings file – myproject/myproject/settings.py, define MEDIA_ROOT and MEDIA_URL, for example:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = 'media/'

The media directory should be created under myproject directory.

If you want to put images and videos into separate folders then you can create images and videos directories under media directory.

Putting Media Files

Here I will store the files locally and I will show you how to access those media files into Django templates.

Put the image files under myproject/media/images directory. Let’s say that you have put below images into the images directory.

Serving Media Files

You have already let Django know where the media folder should be, and the correct URLs to access them, you need to serve all requests to the folders correctly.

Usually when you are in production, you want the webserver to take care of serving your static files and media files.

If you are developing though, you can just get the django development server to serve them for you.

Add some URLs to your myproject/myapp/urls.py as shown below:

from django.urls import path
from django.conf import settings
from django.conf.urls.static import static

from . import views

urlpatterns = [
    path('', views.index, name='index'),
]+ static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Retrieving Media Files

Open the myproject/myapp/views.py and write the below code snippets:

import os
from django.conf import settings
from django.shortcuts import render
from django.templatetags.static import static

# Create your views here.
def index(request):
    path = settings.MEDIA_ROOT
    img_list = os.listdir(path + '/images')
    context = {'images' : img_list}
    return render(request, "myapp/index.html", context)

So in the above code index.html is the template file where you will load finally media files for displaying to the end users.

For working with template files in Django go through the tutorial on working with template inheritance in Django.

Loading Media Files into Template

Now load the media files into template file index.html as shown in the below code snippets:

{% if images %}
	{% for image in images %}
		<img src="{{ MEDIA_URL }}images/{{ image }}" alt="{{ image }}">
	{% endfor %}
{% else %}
	<p>No image available.</p>
{% endif %}

You may also like to read working with static resources in Django templates.

Hope you got an idea how to work with media files in Django framework.

4 thoughts on “Working with media files in Django templates

  1. ‘django.template.context_processors.media’ sould be added in TEMPLATES –>context_processors. unless {{ MEDIA_URL }} wont work

Leave a Reply

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