Open In App

Image Gallery GUI using Django

Last Updated : 19 May, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Image Gallery GUI using Django is a web application that allows users to view and manage a collection of images stored in a database through a user-friendly graphical interface. Here are the step-by-step instructions to implement the Image Gallery GUI.

Create Django Project and App

Prerequisites:

Open terminal and run:

django-admin startproject <project_name>
cd <project_name>
python manage.py startapp gallery

Define the Product Model

Create gallery/models.py:

Python 
from django.db import models

class Product(models.Model):
    name = models.CharField(max_length=255)
    description = models.TextField()
    image = models.ImageField(upload_to='products/')
    created_at = models.DateTimeField(auto_now_add=True)
    updated_at = models.DateTimeField(auto_now=True)

    def __str__(self):
        return self.name

Register Model in Admin

In gallery/admin.py:

Python 
from django.contrib import admin
from .models import Product

admin.site.register(Product)

Create Views to List Products

In gallery/views.py:

Python 
from django.shortcuts import render
from .models import Product
from django.http import HttpResponse


def product_list(request):
    products = Product.objects.all()
    return render(request, 'index.html', {'products': products})


def home(request):
    return HttpResponse('Hello, World!')

Configure URLs

a) In gallery/urls.py:

Python 
from django.urls import path
from . import views

urlpatterns = [
    path('/home', views.home, name='home'),
    path('', views.product_list, name='product_list'),
]

b) In project-level urls.py (<project_name>/urls.py):

Python 
from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('gallery.urls')),
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Create gallery/templates/index.html

index.html:

Python 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Product Catalog</title>
    <style>
        /* Add CSS styles for flex container and items */
        .product-list {
            display: flex;
            flex-wrap: wrap; /* Allow items to wrap to the next row if necessary */
            justify-content: space-between; /* Space items evenly along the main axis */
            list-style: none; /* Remove list styles */
            padding: 0;
        }

        .product-item {
            flex: 1; /* Grow to fill available space evenly */
            max-width: 30%; /* Limit item width to avoid overcrowding */
            margin: 10px; /* Add spacing between items */
            border: 1px solid #ccc; /* Add a border for visual separation */
            padding: 10px;
            text-align: center;
        }

    </style>
</head>
<body>
    <h1>Product Catalog</h1>
    
    <ul class="product-list">
        {% for product in products %}
            <li class="product-item">
                <a href="#">
                    <img src="{{ product.image.url }}" alt="{{ product.name }}" width="200">
                </a>
                <h2>{{ product.name }}</h2>
                <p>{{ product.description }}</p>
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Configure Static and Media Files in Settings

In <project_name>/settings.py:

Python 
import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

STATIC_URL = '/static/'
STATICFILES_DIRS = [BASE_DIR / "static"]

MEDIA_URL = '/media/'
MEDIA_ROOT = BASE_DIR / "media"

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'

Install Pillow

Since you are using ImageField, install Pillow:

pip install Pillow

Make Migrations and Migrate Database

python manage.py makemigrations
python manage.py migrate

Create a Superuser

Run:

python manage.py createsuperuser

Enter your username, email, and password when prompted.

Run Server and Add Products via Admin Panel

Start server:

python manage.py runserver

Output:

AdminPanel

Screenshot-from-2023-10-01-14-26-02-(1)


Next Article
Count number of Faces from Image using Django

A
amitgupm1wy
Improve
Article Tags :
Practice Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox