Add Support for Multiple Authors in Blog Posts

wagtailio/blog/migrations/0015_remove_blogpage_author_blogpageauthor.py

@@ -0,0 +1,69 @@
+# Generated by Django 5.1.6 on 2025-03-27 03:50
+
+from django.db import migrations, models
+import django.db.models.deletion
+
+import modelcluster.fields
+
+
+def migrate_author_data(apps, schema_editor):
+    BlogPage = apps.get_model("blog", "BlogPage")
+    BlogPageAuthor = apps.get_model("blog", "BlogPageAuthor")
+
+    for blog_page in BlogPage.objects.all():
+        if blog_page.author:
+            BlogPageAuthor.objects.create(
+                page=blog_page, author=blog_page.author, sort_order=0
+            )
+
+
+class Migration(migrations.Migration):
+    dependencies = [
+        ("blog", "0014_add_new_imageblock"),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name="BlogPageAuthor",
+            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),
+                ),
+                (
+                    "author",
+                    models.ForeignKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="+",
+                        to="blog.author",
+                    ),
+                ),
+                (
+                    "page",
+                    modelcluster.fields.ParentalKey(
+                        on_delete=django.db.models.deletion.CASCADE,
+                        related_name="authors",
+                        to="blog.blogpage",
+                    ),
+                ),
+            ],
+            options={
+                "ordering": ["sort_order"],
+                "abstract": False,
+            },
+        ),
+        migrations.RunPython(migrate_author_data),
+        migrations.RemoveField(
+            model_name="blogpage",
+            name="author",
+        ),
+    ]

wagtailio/blog/models.py

@@ -36,7 +36,8 @@ def posts(self):
         return (
             BlogPage.objects.live()
             .descendant_of(self)
-            .select_related("author", "author__image", "category")
+            .select_related("category")
+            .prefetch_related("authors__author")
             .order_by("-date", "pk")
         )
 
@@ -127,17 +128,23 @@ def __str__(self):
     ]
 
 
-class BlogPage(Page, SocialMediaMixin, CrossPageMixin):
-    template = "patterns/pages/blog/blog_page.html"
-    subpage_types = []
-    canonical_url = models.URLField(blank=True)
+class BlogPageAuthor(Orderable):
+    page = ParentalKey("blog.BlogPage", related_name="authors")
     author = models.ForeignKey(
         "blog.Author",
-        null=True,
-        blank=True,
-        on_delete=models.SET_NULL,
+        on_delete=models.CASCADE,
         related_name="+",
     )
+
+    panels = [
+        FieldPanel("author"),
+    ]
+
+
+class BlogPage(Page, SocialMediaMixin, CrossPageMixin):
+    template = "patterns/pages/blog/blog_page.html"
+    subpage_types = []
+    canonical_url = models.URLField(blank=True)
     main_image = models.ForeignKey(
         "images.WagtailIOImage",
         null=True,
@@ -161,7 +168,12 @@ def siblings(self):
         return self.__class__.objects.live().sibling_of(self).order_by("-date")
 
     content_panels = Page.content_panels + [
-        FieldPanel("author"),
+        InlinePanel(
+            "authors",
+            heading="Authors",
+            label="Author",
+            max_num=3,
+        ),
         FieldPanel("main_image"),
         FieldPanel("date"),
         FieldPanel("category"),

wagtailio/project_styleguide/templates/patterns/components/authors/authors.html

@@ -0,0 +1,21 @@
+{% load wagtailimages_tags %}
+
+<ul class="authors{% if authors_class %} {{ authors_class }}{% endif %}">
+    {% for author_content in authors %}
+        <li>
+
+            <div class="author{% if author_class %} {{ author_class }}{% endif %}">
+                {% if author_content.author.image %}
+                    {% image author_content.author.image fill-90x90 class="author__image" %}
+                {% endif %}
+                <div class="author__content">
+                    <p class="author__name mini-meta mini-meta--bold">{{ author_content.author.name }}</p>
+                    {% if author_content.author.job_title %}
+                        <p class="author__meta mini-meta">{{ author_content.author.job_title }}</p>
+                    {% endif %}
+                </div>
+            </div>
+
+        </li>
+    {% endfor %}
+</ul>

wagtailio/project_styleguide/templates/patterns/components/authors/authors.yaml

@@ -0,0 +1,20 @@
+context:
+  authors:
+    - author:
+        name: John Doe
+        job_title: Wagtail community manager
+        image: True
+    - author:
+        name: Jane Smith
+        job_title: Wagtail core team
+        image: True
+    - author:
+        name: John Smith
+        job_title: Wagtail developer
+        image: True
+
+tags:
+  image:
+    author.image fill-90x90 class="author__image":
+      raw: |
+        <img src="https://placehold.co/90x90" width="90" height="90" alt="Some alt" class="author__image">

wagtailio/project_styleguide/templates/patterns/pages/blog/blog_page.html

@@ -13,7 +13,9 @@ <h1 class="blog__heading article-heading">{{ page.title }}</h1>
                 <h2 class="blog__intro intro-small">{{ page.introduction }}</h2>
             {% endif %}
 
-            {% include "patterns/components/author/author.html" with author=page.author classes="blog__author author--blog" %}
+            {% if page.authors.all %}
+                {% include "patterns/components/authors/authors.html" with authors=page.authors.all author_class="author--blog" authors_class="blog__authors"%}
+            {% endif %}
         </header>
 
         {% if page.main_image %}

wagtailio/project_styleguide/templates/patterns/pages/blog/includes/blog_post.html

@@ -30,8 +30,9 @@
         <h2 class="blog-post__title {% if featured %}heading-two{% endif %}">{{ post.title }}</h2>
         <p class="blog-post__listing-text">{% firstof post.listing_text post.introduction %}</p>
 
-        {% if post.author %}
-            {% include 'patterns/components/author/author.html' with author=post.author %}
+        {% if post.authors.all %}
+            {% include "patterns/components/authors/authors.html" with authors=post.authors.all %}
         {% endif %}
+
     </div>
 </a>

wagtailio/static/sass/components/_author.scss

@@ -4,6 +4,7 @@
     $root: &;
     display: flex;
     align-items: center;
+    margin-right: 20px;
 
     &__image {
         width: 40px;

wagtailio/static/sass/components/_authors.scss

@@ -0,0 +1,13 @@
+@use "../abstracts/mixins" as *;
+
+.authors{
+    list-style: none;
+
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+
+    @include media-query(large){
+        gap: 20px;
+    }
+}

wagtailio/static/sass/components/_blog.scss

@@ -4,7 +4,7 @@
 .blog {
     &__meta,
     &__intro,
-    &__author,
+    &__authors,
     &__heading {
         grid-column: 2 / span 2;
 

wagtailio/static/sass/main.scss

@@ -16,6 +16,7 @@
 // Components
 @use 'components/app';
 @use 'components/author';
+@use 'components/authors';
 @use 'components/backer';
 @use 'components/backers';
 @use 'components/burger';