From a5abb515384c71b64d06505630aab50b4d388453 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 17 Jun 2022 15:58:23 +0100
Subject: [PATCH] Separate hero into its own file

---
 website/common/models.py                      |  2 +
 .../common/templates/common/content_page.html | 40 +------------------
 website/common/templates/common/hero.html     | 38 ++++++++++++++++++
 3 files changed, 42 insertions(+), 38 deletions(-)
 create mode 100644 website/common/templates/common/hero.html

diff --git a/website/common/models.py b/website/common/models.py
index fbcef34..88231de 100644
--- a/website/common/models.py
+++ b/website/common/models.py
@@ -8,6 +8,8 @@ from wagtail.models import Page
 class BasePage(Page):
     show_in_menus_default = True
 
+    HERO_IMAGE_SIZE = "width-1200"
+
     class Meta:
         abstract = True
 
diff --git a/website/common/templates/common/content_page.html b/website/common/templates/common/content_page.html
index 1756e39..3f5fe6c 100644
--- a/website/common/templates/common/content_page.html
+++ b/website/common/templates/common/content_page.html
@@ -1,47 +1,11 @@
 {% extends "wagtail_base.html" %}
 
-{% load wagtailimages_tags %}
-
 {% block content %}
-{% if page.hero_image %}
-<img class="hero" src="{% image_url page.hero_image 'width-1200' %}">
-{% endif %}
 
-<section class="hero container">
-  <div class="hero-body">
-    <div class="columns">
-      <div class="column">
-        <h1 class="title is-1">{{ page.title }}</h1>
-        {% if page.subtitle %}
-          <h2 class="subtitle">{{ page.subtitle }}</h2>
-        {% endif %}
-      </div>
-      <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
-        <div class="dropdown is-hoverable is-right">
-          <div class="dropdown-trigger">
-            <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
-              <span>Table of Contents</span>
-              <span class="icon is-small">
-                <i class="fas fa-angle-down" aria-hidden="true"></i>
-              </span>
-            </button>
-          </div>
-          <div class="dropdown-menu" id="dropdown-menu" role="menu">
-            <div class="dropdown-content menu">
-              <ul class="menu-list">
-                <li><a>Dashboard</a></li>
-              </ul>
-            </div>
-          </div>
-        </div>
-        <button class="button is-radiusless">Top</button>
-      </div>
-    </div>
-
-  </div>
-</section>
+{% include "common/hero.html" %}
 
 <div class="container content">
   {% lorem 10 p %}
 </div>
+
 {% endblock content %}
diff --git a/website/common/templates/common/hero.html b/website/common/templates/common/hero.html
new file mode 100644
index 0000000..a4c72b6
--- /dev/null
+++ b/website/common/templates/common/hero.html
@@ -0,0 +1,38 @@
+{% load wagtailimages_tags %}
+
+{% if page.hero_image %}
+  <img class="hero" src="{% image_url page.hero_image page.HERO_IMAGE_SIZE %}">
+{% endif %}
+
+<section class="hero container">
+  <div class="hero-body">
+    <div class="columns">
+      <div class="column">
+        <h1 class="title is-1">{{ page.title }}</h1>
+        {% if page.subtitle %}
+          <h2 class="subtitle">{{ page.subtitle }}</h2>
+        {% endif %}
+      </div>
+      <div class="column is-narrow dropdown-wrapper is-hidden-touch is-grouped">
+        <div class="dropdown is-hoverable is-right">
+          <div class="dropdown-trigger">
+            <button class="button is-radiusless" aria-haspopup="true" aria-controls="dropdown-menu">
+              <span>Table of Contents</span>
+              <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+              </span>
+            </button>
+          </div>
+          <div class="dropdown-menu" id="dropdown-menu" role="menu">
+            <div class="dropdown-content menu">
+              <ul class="menu-list">
+                <li><a>Dashboard</a></li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        <button class="button is-radiusless">Top</button>
+      </div>
+    </div>
+  </div>
+</section>