DEV Community

loading...
Cover image for Django Photo Gallary | Django Project

Django Photo Gallary | Django Project

Madhuban Khatri
I am Madhuban Khatri. Skills : Python , Php and JavaScript | Fun Fact : I am a Self - Taught Programmer |
・3 min read

Hello Friends, Whatsup? I hope you will fine.
In this blog, I am showing you a amazing project - Photo Gallary in Django Framework.

Demo Video

Source Code

1.) settings.py(Add Code)

#Media Files
MEDIA_ROOT = 'D:\\django_projects\\dj_gallary\\main\\static\\media'
MEDIA_URL = 'media/'
Enter fullscreen mode Exit fullscreen mode

2.) project/urls.py

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('main.urls'))
] + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Enter fullscreen mode Exit fullscreen mode

3.) views.py

from django.shortcuts import render, redirect
from django.http import HttpResponse
from django.views.generic import TemplateView
from .models import Post
from django.contrib import messages

# Create your views here.
class IndexView(TemplateView):
    template_name = 'index.html'
    def get(self, request):
        all_posts = Post.objects.all().order_by('-id')
        params = {"posts": all_posts}
        return render(request, self.template_name, params)


class UploadView(TemplateView):
    template_name = 'upload.html'
    def get(self, request):
        return render(request, self.template_name)
    def post(self, request):
        img_title = request.POST['title']
        imgName = request.FILES['img_name']
        add_img = Post(title=img_title, img_field=imgName)
        add_img.save()
        messages.success(request, 'Image Added Succefully.')
        # print(imgName, title)
        return render(request, self.template_name)


class DeleteView(TemplateView):
    def get(self, request, id):
        delete_post = Post.objects.get(id=id)
        delete_post.delete()
        messages.success(request, 'Image Deleted Succefully.')
        return redirect('/')
Enter fullscreen mode Exit fullscreen mode

4.) app/urls.py

from django.urls import path
from . import views



urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
    path('upload/', views.UploadView.as_view(), name='upload'),
    path('delete/<int:id>/', views.DeleteView.as_view(), name='delete_img')
]
Enter fullscreen mode Exit fullscreen mode

5.) models.py

from django.db import models

# Create your models here.
class Post(models.Model):
    title = models.CharField(max_length=200)
    img_field = models.ImageField(upload_to='uploads/')
    date = models.DateField(auto_now_add=True)

    def __str__(self):
        return self.title
Enter fullscreen mode Exit fullscreen mode

6.) admin.py

from django.contrib import admin
from .models import Post

# Register your models here.
admin.site.register(Post)
Enter fullscreen mode Exit fullscreen mode

7.) templates/index.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Django Photo Gallary</title>
  </head>
  <body style="background-color: black; color: white;">
    <div class="container w-75 text-center py-5">
      <h2>Django Photo Gallary</h2>
      <div class="container">
        <a href="{% url 'upload' %}" class="btn btn-outline-primary">Upload Image</a>
      </div>
    </div>



    <div class="container">
        {% if messages %}
               <div class="container">
                   {% for message in messages %}
                   <div class="alert alert-{{ message.tags }}" role="alert">
                        {{ message }}
                   </div>
                   {% endfor%}
               </div>
            {% endif %}
        <div class="row">
            {% for post in posts %}
                <div class="col">
                    <img src="{% static post.img_field.url %}" id="image{{forloop.counter}}" alt="{% static post.img_field.url %}"
                        style="width: 300px; height: 300px;">
                    <h3>{{post.title}} <a href="{% url 'delete_img' post.id %}" class="btn btn-danger">Delete</a></h3>
                    <p class="text-muted">{{post.date}}</p>

                </div>
            {% endfor %}

        </div>

    </div>

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
  </body>
</html>

Enter fullscreen mode Exit fullscreen mode

8.) templates/upload.html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    {% load static %}
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">

    <title>Django Photo Gallary</title>
  </head>
  <body style="background-color: black; color: white;">

    <div class="container w-75 text-center py-5">
      <h2>Django Photo Gallary</h2>
    </div>

    <div class="mb-3 container w-50">
        <div class="row">

            {% if messages %}
               <div class="container">
                   {% for message in messages %}
                   <div class="alert alert-{{ message.tags }}" role="alert">
                        {{ message }}
                   </div>
                   {% endfor%}
               </div>
            {% endif %}

            <form action="{% url 'upload' %}" method="post" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="text" class="form-control my-4" name="title" placeholder="Title for Image">
            <div class="col">
                <input type="file" class="form-control" name="img_name" id="exampleFormControlInput1">
            </div>
            <div class="col">
                <input type="submit" value="Upload" class="btn btn-success my-4">
            </div>
            </form>
        </div>
        <div class="container text-center w-25 my-5">
            <a href="{% url 'index' %}" class="btn btn-outline-primary">Back</a>
        </div>
    </div>



    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Discussion (0)