Added support for Images to be linked to Blogs

services/cms/blog/apps.py

@@ -2,4 +2,4 @@ from django.apps import AppConfig
 
 
 class BlogConfig(AppConfig):
-    name = 'blog'
+    name = "blog"

services/cms/blog/migrations/0001_initial.py

@@ -9,20 +9,26 @@ class Migration(migrations.Migration):
 
     initial = True
 
-    dependencies = [
-        ('wagtailcore', '0040_page_draft_title'),
-    ]
+    dependencies = [("wagtailcore", "0040_page_draft_title")]
 
     operations = [
         migrations.CreateModel(
-            name='BlogIndexPage',
+            name="BlogIndexPage",
             fields=[
-                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.Page')),
-                ('intro', wagtail.core.fields.RichTextField(blank=True)),
-            ],
-            options={
-                'abstract': False,
-            },
-            bases=('wagtailcore.page',),
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.Page",
                     ),
+                ),
+                ("intro", wagtail.core.fields.RichTextField(blank=True)),
+            ],
+            options={"abstract": False},
+            bases=("wagtailcore.page",),
+        )
     ]

services/cms/blog/migrations/0002_blogpage.py

@@ -7,23 +7,28 @@ import wagtail.core.fields
 
 class Migration(migrations.Migration):
 
-    dependencies = [
-        ('wagtailcore', '0040_page_draft_title'),
-        ('blog', '0001_initial'),
-    ]
+    dependencies = [("wagtailcore", "0040_page_draft_title"), ("blog", "0001_initial")]
 
     operations = [
         migrations.CreateModel(
-            name='BlogPage',
+            name="BlogPage",
             fields=[
-                ('page_ptr', models.OneToOneField(auto_created=True, on_delete=django.db.models.deletion.CASCADE, parent_link=True, primary_key=True, serialize=False, to='wagtailcore.Page')),
-                ('date', models.DateField(verbose_name='Post date')),
-                ('intro', models.CharField(max_length=250)),
-                ('body', wagtail.core.fields.RichTextField(blank=True)),
-            ],
-            options={
-                'abstract': False,
-            },
-            bases=('wagtailcore.page',),
+                (
+                    "page_ptr",
+                    models.OneToOneField(
+                        auto_created=True,
+                        on_delete=django.db.models.deletion.CASCADE,
+                        parent_link=True,
+                        primary_key=True,
+                        serialize=False,
+                        to="wagtailcore.Page",
                     ),
+                ),
+                ("date", models.DateField(verbose_name="Post date")),
+                ("intro", models.CharField(max_length=250)),
+                ("body", wagtail.core.fields.RichTextField(blank=True)),
+            ],
+            options={"abstract": False},
+            bases=("wagtailcore.page",),
+        )
     ]

services/cms/blog/migrations/0003_blogpagegalleryimage.py

@@ -0,0 +1,30 @@
+# Generated by Django 2.1.2 on 2018-11-16 18:45
+
+from django.db import migrations, models
+import django.db.models.deletion
+import modelcluster.fields
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('wagtailimages', '0021_image_file_hash'),
+        ('blog', '0002_blogpage'),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='BlogPageGalleryImage',
+            fields=[
+                ('id', models.AutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('sort_order', models.IntegerField(blank=True, editable=False, null=True)),
+                ('caption', models.CharField(blank=True, max_length=250)),
+                ('image', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='+', to='wagtailimages.Image')),
+                ('page', modelcluster.fields.ParentalKey(on_delete=django.db.models.deletion.CASCADE, related_name='gallery_images', to='blog.BlogPage')),
+            ],
+            options={
+                'ordering': ['sort_order'],
+                'abstract': False,
+            },
+        ),
+    ]

services/cms/blog/models.py

@@ -1,17 +1,20 @@
 from django.db import models
 
-from wagtail.core.models import Page
+from modelcluster.fields import ParentalKey
+
+from wagtail.core.models import Page, Orderable
 from wagtail.core.fields import RichTextField
-from wagtail.admin.edit_handlers import FieldPanel
+from wagtail.admin.edit_handlers import FieldPanel, InlinePanel
+from wagtail.images.edit_handlers import ImageChooserPanel
 from wagtail.search import index
 
 
 class BlogIndexPage(Page):
+    """Entry point of the blog. Displays its children `BlogPages`"""
+
     intro = RichTextField(blank=True)
 
-    content_panels = Page.content_panels + [
-        FieldPanel('intro', classname="full")
-    ]
+    content_panels = Page.content_panels + [FieldPanel("intro", classname="full")]
 
     def get_context(self, request, *args, **kwargs):
         """
@@ -29,13 +32,48 @@ class BlogPage(Page):
     intro = models.CharField(max_length=250)
     body = RichTextField(blank=True)
 
+    def main_image(self):
+        """Returns the first image associated with a `BlogPage` from `BlogPageGalleryImage`"""
+        gallery_item = self.gallery_images.first()
+        if gallery_item:
+            return gallery_item.image
+        else:
+            return None
+
     search_fields = Page.search_fields + [
         index.SearchField("intro"),
-        index.SearchField("body")
+        index.SearchField("body"),
     ]
 
     content_panels = Page.content_panels + [
-        FieldPanel('date'),
-        FieldPanel('intro'),
-        FieldPanel('body', classname="full"),
+        FieldPanel("date"),
+        FieldPanel("intro"),
+        FieldPanel("body", classname="full"),
+        InlinePanel("gallery_images", label="Gallery images"),
     ]
+
+
+class BlogPageGalleryImage(Orderable):
+    """
+    An image gallery descendant to a `BlogPage`
+
+    Inherits a `sort_order` field from the `Orderable` object which keeps track of image ordering.
+    The `ParentalKey` works similarly to a `ForeignKey` but also defines this class as a child of `BlogPage` model.
+    This means that the image gallery associated with a particular `BlogPage` instance is treated as a part of the page
+    in operations like submitting for moderation, and tracking version history.
+
+    The `BlogPageGalleryImage.image` is a `ForeignKey to the Wagtail built-in `Image` model where images themselves are
+    stored. The `ImageChooserPanel` provides a popup interface for choosing an existing image or uploading a new one.
+    This allows for the same image to exist in multiple galleries - effectively creating a many-to-many relationship
+    between pages and images.
+    """
+    page = ParentalKey(
+        BlogPage, on_delete=models.CASCADE, related_name="gallery_images"
+    )
+    image = models.ForeignKey(
+        # on_delete here means that is an image is deleted from the system, the gallery entry is deleted as well.
+        "wagtailimages.Image", on_delete=models.CASCADE, related_name="+"
+    )
+    caption = models.CharField(blank=True, max_length=250)
+
+    panels = [ImageChooserPanel("image"), FieldPanel("caption")]

services/cms/blog/templates/blog/blog_index_page.html

@@ -1,6 +1,6 @@
 {%  extends "base.html" %}
 
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}helvetica{% endblock %}
 
@@ -19,8 +19,9 @@
               <p class="f5 f4-l lh-copy">{{ post.intro }}</p>
             </div>
             <div class="pl3-ns order-1 order-2-ns mb4 mb0-ns w-100 w-40-ns">
-              <img src="http://mrmrs.github.io/photos/cpu.jpg" class="db"
-                   alt="Photo of a dimly lit room with a computer interface terminal.">
+              {% with post.main_image as main_image %}
+                {% if main_image %}{% image main_image fill-320x240 class="db" %}{% endif %}
+              {% endwith %}
             </div>
           </div>
           <p class="f6 lh-copy gray mv0">By <span class="ttu">{{ post.owner }}</span></p>

services/cms/blog/templates/blog/blog_page.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}helvetica{% endblock %}
 
@@ -10,5 +10,12 @@
 
     <div class="intro">{{ page.intro }}</div>
     {{ page.body|richtext }}
+
+    {% for item in page.gallery_images.all %}
+      <div class="fl ma1">
+        {% image item.image fill-320x240 %}
+        <p> {{ item.caption }}</p>
+      </div>
+    {% endfor %}
     <p><a href="{{ page.get_parent.url }}">Return to blog</a></p>
 {% endblock %}