Modified Photoapp templates

config/photoapp/templates/photoapp/create.html

@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="mt-3 text-center">Add photo</h1>
+</div>
+<div class="form-group">
+  <form action="" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <button type="submit" class="btn btn-success mb-3">Add Photo</button>
+  </form>
+</div>
+{% endblock body %}

config/photoapp/templates/photoapp/delete.html

@@ -0,0 +1,32 @@
+{% extends 'base.html' %} {% block body %}
+<div class="form-group mx-auto">
+  <h2 class="text-center">
+    You are going to <span class="text-danger">delete</span>: "<i
+      >{{ photo }}</i
+    >
+    "
+  </h2>
+  <p class="text-center">Are you sure, you want to delete the photo ?</p>
+  <div class="form-group">
+    <form
+      action=""
+      method="post"
+      class="d-flex flex-column align-items-center justify-content-center"
+    >
+      {% csrf_token %}
+      <div class="row">
+        <div class="col">
+          <a href="{% url 'photo:detail' photo.id %}" class="btn btn-primary"
+            >Cancel</a
+          >
+        </div>
+        <div class="col">
+          <button type="submit" class="btn btn-danger">Delete</button>
+        </div>
+      </div>
+      <p>This action is irreversible</p>
+    </form>
+  </div>
+</div>
+
+{% endblock body %}

config/photoapp/templates/photoapp/detail.html

@@ -0,0 +1,29 @@
+{% extends 'base.html' %} 
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="text-center">{{ photo.title }}</h1>
+  <p class="text-center fw-light">Uploaded on: {{photo.created}} <br> By {{photo.submitter.username}}</p>
+  {% if user == photo.submitter %}
+    <p class="text-center">
+      <span><a href="{% url 'photo:update' photo.id %}" class="text-primary px-2">Update</a></span>
+      <span><a href="{% url 'photo:delete' photo.id %}" class="text-danger px-2">Delete</a></span>
+    </p>
+  {% endif %}
+</div>
+<div class="row pb-5">
+  <div class="col-md-8">
+    <img src="{{photo.image.url}}" alt="" width="100%" />
+  </div>
+  <div class="col-md-4">
+    <h4>More about this photo:</h4>
+    <ul class="list-group list-group-horizontal-lg list-unstyled py-4">
+      {% for tag in photo.tags.all %}
+        <li><a href="{% url 'photo:tag' tag.slug %}" class="btn btn-sm list-group-item list-group-item-primary">{{tag.name}}</a></li>
+      {% endfor %}
+    </ul>
+    <p>{{ photo.description }}</p>
+  </div>
+</div>
+
+{% endblock body %}

config/photoapp/templates/photoapp/list.html

@@ -1,7 +1,15 @@
-{% extends 'base.html' %}
+{% extends 'base.html' %} 
 
 {% block body %}
 
-
-
-{% endblock body %}
+<div class="row">
+  {% for photo in photos %}
+  <div class="col-lg-3 col-md-4 col-xs-6">
+    <a href="{% url 'photo:detail' photo.id %}" class="d-block mb-4 h-100">
+      <img src="{{photo.image.url}}" class="img-fluid rounded" alt="{{photo.title}}" />
+    </a>
+  </div>
+  {% endfor %}
+</div>
+
+{% endblock body %}

config/photoapp/templates/photoapp/taglist.html

@@ -0,0 +1,11 @@
+{% extends 'photoapp/list.html' %}
+
+{% block body %}
+
+<div class="alert alert-primary">
+    <h2 class="text-center">Photos with the tag {{tag}}</h2>
+</div>
+
+{{ block.super }}
+
+{% endblock body %}

config/photoapp/templates/photoapp/update.html

@@ -0,0 +1,15 @@
+{% extends 'base.html' %}
+{% load crispy_forms_tags %}
+
+{% block body %}
+<div class="mx-auto">
+  <h1 class="mt-3 text-center">Edit photo {{photo}}</h1>
+</div>
+<div class="form-group">
+  <form action="" method="post" enctype="multipart/form-data">
+    {% csrf_token %}
+    {{ form|crispy }}
+    <button type="submit" class="btn btn-success mb-3">Edit Photo</button>
+  </form>
+</div>
+{% endblock body %}