Introduction

In this tutorial we will see working with media files in Django templates. Media files, such as, images, videos etc. are frequently loaded into our 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, Django version – 2.2

Python and Django setup

Example with Source Code

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

Project Configuration

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 we will store the files locally and we will see how to access those media files into Django templates.

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





Serving media files

You have told Django 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 we 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.

Thanks for reading.