Add dynamic images to home and content pages

.gitignore

@@ -304,3 +304,4 @@ cython_debug/
 # End of https://www.toptal.com/developers/gitignore/api/python,node
 
 /collected-static
+media/

static/src/scss/_hero.scss

@@ -1,3 +1,9 @@
+img.hero {
+  height: 40vh !important;
+  width: 100%;
+  object-fit: cover;
+}
+
 section.hero {
   position: sticky;
   top: 0;

static/src/scss/_homepage.scss

@@ -3,8 +3,9 @@ body.page-home-homepage {
   flex-direction: column;
 
   main {
-    // TODO: Image background
-    background-color: orange;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
     height: 100%;
     display: flex;
     justify-content: center;

templates/base.html

@@ -27,9 +27,11 @@
       {% navbar page %}
     {% endcache %}
 
+    {% block main %}
       <main>
         {% block content %}{% endblock %}
       </main>
+    {% endblock %}
 
     {% cache 3600 "footer" %}
       {% footer %}

website/common/migrations/0002_contentpage_hero_image.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.5 on 2022-06-15 08:11
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0024_index_image_file_hash"),
+        ("common", "0001_initial"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="contentpage",
+            name="hero_image",
+            field=models.ForeignKey(
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                to="wagtailimages.image",
+            ),
+        ),
+    ]

website/common/models.py

@@ -1,6 +1,7 @@
 from django.db import models
 from django.utils.functional import classproperty
 from wagtail.admin.panels import FieldPanel
+from wagtail.images import get_image_model_string
 from wagtail.models import Page
 
 
@@ -15,5 +16,11 @@ class BasePage(Page):
 
 class ContentPage(BasePage):
     subtitle = models.CharField(max_length=255, blank=True)
+    hero_image = models.ForeignKey(
+        get_image_model_string(), null=True, on_delete=models.SET_NULL
+    )
 
-    content_panels = BasePage.content_panels + [FieldPanel("subtitle")]
+    content_panels = BasePage.content_panels + [
+        FieldPanel("subtitle"),
+        FieldPanel("hero_image"),
+    ]

website/common/templates/common/content_page.html

@@ -1,6 +1,10 @@
 {% extends "wagtail_base.html" %}
 
+{% load wagtailimages_tags %}
+
 {% block content %}
+<img class="hero" src="{% image_url page.hero_image 'width-1200' %}" alt="">
+
 <section class="hero container">
   <div class="hero-body">
     <div class="columns">

website/home/migrations/0004_homepage_image.py

@@ -0,0 +1,24 @@
+# Generated by Django 4.0.5 on 2022-06-15 08:10
+
+import django.db.models.deletion
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("wagtailimages", "0024_index_image_file_hash"),
+        ("home", "0003_homepage_heading"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="homepage",
+            name="image",
+            field=models.ForeignKey(
+                null=True,
+                on_delete=django.db.models.deletion.SET_NULL,
+                to="wagtailimages.image",
+            ),
+        ),
+    ]

website/home/models.py

@@ -1,5 +1,6 @@
 from django.db import models
 from wagtail.admin.panels import FieldPanel
+from wagtail.images import get_image_model_string
 
 from website.common.models import BasePage
 
@@ -8,5 +9,11 @@ class HomePage(BasePage):
     max_count = 1
 
     heading = models.CharField(max_length=128, blank=True)
+    image = models.ForeignKey(
+        get_image_model_string(), null=True, on_delete=models.SET_NULL
+    )
 
-    content_panels = BasePage.content_panels + [FieldPanel("heading")]
+    content_panels = BasePage.content_panels + [
+        FieldPanel("heading"),
+        FieldPanel("image"),
+    ]

website/home/templates/home/home_page.html

@@ -1,6 +1,9 @@
 {% extends "wagtail_base.html" %}
 
-{% block content %}
+{% load wagtailimages_tags %}
+
+{% block main %}
+<main style="background-image: url({% image_url page.image 'width-1200' %})">
   <h1>{{ page.heading }}</h1>
 
   <input id="search-input" class="input" type="text" placeholder="Search">
@@ -8,6 +11,7 @@
   <div class="box latest">
     <strong>Latest Post</strong>: <a href="#">{% lorem 6 w random %}</a> &rarr;
   </div>
-{% endblock content %}
+</main>
+{% endblock %}
 
 {% block darkmode %}{% endblock %}

website/urls.py

@@ -1,9 +1,10 @@
 from django.conf import settings
 from django.contrib import admin
-from django.urls import include, path
+from django.urls import include, path, re_path
 from wagtail import urls as wagtail_urls
 from wagtail.admin import urls as wagtailadmin_urls
 from wagtail.documents import urls as wagtaildocs_urls
+from wagtail.images.views.serve import ServeView
 
 from website.search import views as search_views
 
@@ -12,6 +13,11 @@ urlpatterns = [
     path("admin/", include(wagtailadmin_urls)),
     path("documents/", include(wagtaildocs_urls)),
     path("search/", search_views.search, name="search"),
+    re_path(
+        r"^images/([^/]*)/(\d*)/([^/]*)/[^/]*$",
+        ServeView.as_view(action="redirect"),
+        name="wagtailimages_serve",
+    ),
 ]