Improvement: New and improved announcement page with images and style

widget_django_unchained/announcements/migrations/0017_announcement_announce_image.py

+# Generated by Django 3.2.12 on 2022-05-20 11:19
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('announcements', '0016_alter_announcement_author'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='announcement',
+            name='announce_image',
+            field=models.ImageField(blank=True, default='faceless_9ltCukV.png', null=True, upload_to=''),
+        ),
+    ]

widget_django_unchained/announcements/models.py

@@ -8,7 +8,7 @@ class Announcement(models.Model):
     announcement_body = models.CharField(max_length=500)
     pub_date = models.DateTimeField("date published")
     reaction_list = models.ForeignKey('Reaction', on_delete=models.CASCADE, related_name='+', default=1)
-    
+    announce_image = models.ImageField(default="faceless_9ltCukV.png", null=True, blank=True)
 
     def __str__(self):
         return self.announcement_title

widget_django_unchained/announcements/static/announcement/style.css

 h1 {
     color: purple;
     font-weight:bold; 
+    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 }
 p {
     color: orange;
     font-weight:bold;
+    font-family:'Courier New', Courier, monospace;
 }
 body {
     background-color: beige;
+    font-family:'Courier New', Courier, monospace;
 }
 a {
     color: orangered;

widget_django_unchained/announcements/templates/announcement/announcement_board.html

 {% extends "announcement/base.html" %}
 
 {% block content %}
-
-<h1> {{ announce.announcement_title }} </h1>
-<p> <em> by {{ announce.author.first_name}} {{announce.author.last_name}}, {{announce.pub_date}} </em> </p>
-<p> {{announce.announcement_body}}</p> 
-   
-
-<p> {% include "announcement/reactions_list.html" with reactions=announce.reaction_list %}</p>
+    <img src="{{announce.announce_image.url}}">
+    <h1> {{ announce.announcement_title }} </h1>
+    <p> <em> by {{ announce.author.first_name}} {{announce.author.last_name}}, {{announce.pub_date|date:"d/m/Y h:i:s A"}} </em> </p>
+    <p> {{announce.announcement_body}}</p> 
+    <ul>
+        {% for react in reacts %}
+            <li> {{react.reaction_name}}:{{react.tally}} </li>
+        {% endfor %}
+    </ul>
     
 {% endblock %}
\ No newline at end of file

widget_django_unchained/announcements/templates/announcement/announcement_page.html

@@ -5,7 +5,7 @@
     {% if announce_list %}
         <ul>
             {% for announce in announce_list %}
-                <li> <a href = "{% url 'detail' announce.id %}">{{ announce.announcement_title }} by {{announce.author.first_name}} {{announce.author.last_name}} dated {{announce.pub_date}} </a></li>
+                <li> <a href = "{% url 'detail' announce.id %}">{{ announce.announcement_title }} by {{announce.author.first_name}} {{announce.author.last_name}} dated {{announce.pub_date|date:"d/m/Y h:i:s A"}} </a></li>
             {% endfor %}    
         </ul>
     {% else %}

widget_django_unchained/announcements/templates/announcement/reactions_list.html

-{% extends "announcement/base.html" %}
-<p> 
-    
-     
-    <p>{{ reactions.reaction_name }} : {{reactions.tally}}</p>
-
-    {% if reactions.reaction_self != NULL %}
-        <p>{% include "announcement/reactions_list.html" with reactions=reactions.reaction_self %}</p>
-    {% endif %}    
-    
-    
-    
-    
-</p>
\ No newline at end of file

widget_django_unchained/announcements/views.py

 from django.http import Http404
 from django.shortcuts import render
-from .models import Announcement
+from .models import Announcement, Reaction
 
 
 # Create your views here.
@@ -22,4 +22,5 @@ def detail(request, announcement_id):
     except Announcement.DoesNotExist:
         raise Http404("Announcement does not exist!")
     
-    return render(request, "announcement/announcement_board.html", {"announce": announce})
\ No newline at end of file
+    reacts = Reaction.objects.filter(announcement_id=announce).order_by("reaction_name")
+    return render(request, "announcement/announcement_board.html", {"announce": announce, "reacts": reacts})
\ No newline at end of file

widget_django_unchained/forum/templates/replychain_listing.html

 <p>
-    <i> Reply by {{post.author.first_name}} {{post.author.last_name}} dated {{reply.pub_date}}: </i>
+    <i> Reply by {{post.author.first_name}} {{post.author.last_name}} dated {{reply.pub_date|date:"d/m/Y h:i:s A"}}: </i>
 </p>
 
 <p>{{reply.reply_body}}</p>