DEV Community: Manasa SK

Django Images: Static vs Media

Manasa SK — Sun, 14 Aug 2022 06:51:00 +0000

There are mainly 2 ways of displaying images on your website when using Django. Which method should you use then? It depends on the requirements and I will be providing a detailed understanding of how and when to use each method.

The 2 ways of displaying images on a web page are:

Static images
Upload through media

Static Images

If an image is to be displayed from a definite set of images, static method should be used.

Your folder structure inside the project folder must look something like this.

ª   db.sqlite3
ª   manage.py
ª   tree.txt
ª   
+---demo
ª   ª   asgi.py
ª   ª   settings.py
ª   ª   urls.py
ª   ª   wsgi.py
ª   ª   __init__.py
ª   ª   
ª   +---__pycache__
ª           settings.cpython-310.pyc
ª           urls.cpython-310.pyc
ª           wsgi.cpython-310.pyc
ª           __init__.cpython-310.pyc
ª           
+---env
ª
+---myapp
    ª   admin.py
    ª   apps.py
    ª   models.py
    ª   tests.py
    ª   views.py
    ª   __init__.py
    ª   
    +---migrations
            __init__.py
    ª
    +---templates
    ª       index.html

Create a folder in myapp and name it 'static'.

myapp folder structure should look like this.

+---myapp
    ª   admin.py
    ª   apps.py
    ª   models.py
    ª   tests.py
    ª   views.py
    ª   __init__.py
    ª   
    +---migrations
    ª       __init__.py
    ª
    +---static
    ª
    +---templates
    ª       index.html

Now, in static folder, you can create a folder 'images' and upload your images.

In your specified html file (index.html in this case), add the following at the top of the page:

{% load static %}

In the image tag of the file, add the path to the image by adding the following:

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Static Image</title>
</head>
<body>
    <img src="{% static 'images/image.jpg' %}" alt="">
</body>
</html>

Since static url is already defined in settings.py, the static tag refers to the static folder created.

You can display the image like this:

Upload Image through Media

When multiple images need to be stored in the database or object or user specific images need to be displayed, this method is used.

The images can be uploaded to the database through:

A seperate form on a web page that takes image files
Uploading images through admin panel

Here, I will be uploading the images through the admin panel.

Since this method requires Pillow (python module), run the command:
pip install Pillow

Create your model and create an image field.

from django.db import models

# Create your models here.
class MyModel(models.Model):
    id = models.AutoField(primary_key=True, auto_created=True)
    name = models.CharField(max_length=50)
    image = models.ImageField(upload_to='images/')

This automatically creates a folder 'media' and a folder 'images' in it once the setup is completed. Migrate the changes.

In urls.py, mention the root to media:

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

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

Lastly, in settings.py, insert:

import os

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

Now that the setup is completed, you can insert the data.

To access the admin panel, create a superuser by running the command:
python manage.py createsuperuser

Now register your model in the admin panel by adding the following to admin.py:

from .models import *

admin.site.register(MyModel)

Now switch to the admin panel and add a few objects to the model. Next, edit your view to pass image query set to the web page.

# Create your views here.
def index(request):
    images = MyModel.objects.filter(name='manasa')
    return render(request, 'index.html', {'images': images})

And edit your html page to display these images.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Show Media Image</title>
</head>
<body>
    {% for img in images %}
    <img src="{{img.image.url}}" alt="" width="200px" height="150px">
    {% endfor %}
</body>
</html>

Now that the procedure is completed, run the server. The web page should look like this:

Setup and Create your First Django Application

Manasa SK — Sun, 07 Aug 2022 10:57:00 +0000

Django is a python based high-level web framework which is primarily known for rapid development. It supports the Model View Controller (MVC) pattern.

You can observe multiple websites that are built on this framework such as:

If you're new to web development, Django is a fairly easy framework to understand and work on. This was my first web framework and I would suggest it if:

Your project involves Machine Learning models or is of Scientific nature
You have some experience or knowledge of Python

Pre-requisites

While Django framework is much simpler to setup relative to other technologies, some fundamental pre requisites include:

Installation of Python If python is not installed, click here and install one of the newer versions of python.
Basics of Python Concept of OOPs, loops and conditional statements, data types and variables, functions and basic data structures are sufficient to get started.

Setup Django

Create a new folder at your desired location and open the same in the terminal

PS C:\Users\Manasa\Desktop\first_project>

Create a virtual environment to install Django

PS C:\Users\Manasa\Desktop\first_project> python -m venv env

Here, env is the name of your virtual environment.

A virtual environment is created for you to install a custom version of Python and its different packages which is not connected to the global installation on the server.

Once the environment is created, activate it by running the command

PS C:\Users\Manasa\Desktop\first_project> env/scripts/activate

Activated environment should look like this:

(env) PS C:\Users\Manasa\Desktop\first_project>

Now, install Django

 pip install django

You can check the installation by calling django-admin
It should give this output:

(env) PS C:\Users\Manasa\Desktop\first_project> django-admin

Type 'django-admin help <subcommand>' for help on a specific subcommand.

Available subcommands:

[django]
    check
    compilemessages
    createcachetable
    dbshell
    diffsettings
    dumpdata
    flush
    inspectdb
    loaddata
    makemessages
    makemigrations
    migrate
    optimizemigration
    runserver
    sendtestemail
    shell
    showmigrations
    sqlflush
    sqlmigrate
    sqlsequencereset
    squashmigrations
    startapp
    startproject
    test
    testserver
Note that only Django core commands are listed as settings are not properly configured (error: Requested setting INSTALLED_APPS, but settings are not configured. You must either define the environment variable DJANGO_SETTINGS_MODULE or call settings.configure() before accessing settings.).
(env) PS C:\Users\Manasa\Desktop\first_project>

Create Project

Now that Django is successfully installed, you can create your project and applications.

Run the following command

 django-admin startproject first_project .

Here, your project is named 'first_project'.

NOTE: '.' at the end of the command is essential as the project structure by default makes the file manage.py inaccessible to a number of files. This can cause numerous errors going ahead.

Now, create your app by running the command

 django-admin startapp myapp

Here, your application is named 'myapp'.

Now that your project and application are created, use manage.py to make further changes.

Its functionality can be observed by the following command.

(env) PS C:\Users\Manasa\Desktop\first_project> python manage.py

Type 'manage.py help <subcommand>' for help on a specific subcommand.

Available subcommands:

[auth]
    changepassword
    createsuperuser

[contenttypes]
    remove_stale_contenttypes

[django]
    check
    compilemessages
    createcachetable
    dbshell
    diffsettings
    dumpdata
    flush
    inspectdb
    loaddata
    makemessages
    makemigrations
    migrate
    optimizemigration
    sendtestemail
    shell
    showmigrations
    sqlflush
    sqlmigrate
    sqlsequencereset
    squashmigrations
    startapp
    startproject
    test
    testserver

[sessions]
    clearsessions

[staticfiles]
    collectstatic
    findstatic
    runserver
(env) PS C:\Users\Manasa\Desktop\first_project>

If this command throws an error, check whether you added '.' while creating the project.

The next step is optional but recommended. Migrate the initial changes by running the command

 python manage.py migrate

This command sets up the default database that Django provides.

Finally, run the server locally. The following command should give the result.

(env) PS C:\Users\Manasa\Desktop\first_project> python manage.py runserver
Watching for file changes with StatReloader
Performing system checks...

System check identified no issues (0 silenced).
August 07, 2022 - 16:21:53
Django version 4.1, using settings 'first_project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

http://127.0.0.1:8000/ is the link to the locally hosted application

If you see this page on following the link:

Your project is successfully set up and ready to run!