Last Updated : 23 Jul, 2025
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 AppPrerequisites:
Open terminal and run:
Define the Product Modeldjango-admin startproject <project_name>
cd <project_name>
python manage.py startapp gallery
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>
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:
Make Migrations and Migrate Databasepip install Pillow
Create a Superuserpython manage.py makemigrations
python manage.py migrate
Run:
python manage.py createsuperuser
Enter your username, email, and password when prompted.
Run Server and Add Products via Admin PanelStart server:
python manage.py runserver
Output:
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4