Use hero title include. Add conditionals to include where no image set. Workson #15

bakerydemo/templates/base/form_page.html

@@ -1,12 +1,12 @@
 {% extends "base.html" %}
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags navigation_tags wagtailimages_tags %}
 
 {% block content %}
+{% include "base/include/header-hero.html" %}
+
 <div class="container">
     <div class="row">
         <div class="col-md-8">
-            <h1>{{ page.title }}</h1>
-            
             {% if page.intro %}
                 <p class="intro">{{ page.intro|richtext }}</p>
             {% endif %}

bakerydemo/templates/base/form_page_landing.html

@@ -2,7 +2,13 @@
 {% load wagtailcore_tags %}
 
 {% block content %}
-    <h1>{{ page.title }}</h1>
+{% include "base/include/header-hero.html" %}
 
-    {{ page.thank_you_text|richtext }}
+<div class="container form-page-thanks">
+    <div class="row">
+        <div class="col-md-7">
+            {{ page.thank_you_text|richtext }}
+        </div>
+    </div>
+</div>
 {% endblock content %}

bakerydemo/templates/base/include/header-hero.html

@@ -0,0 +1,23 @@
+{% load wagtailcore_tags wagtailimages_tags %}
+
+{% if page.image %}
+    {% image page.image fill-1920x600 as image %}
+    <div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
+    <div class="hero-gradient-mask"></div>
+        <div class="container">
+            <div class="row">
+                <div class="col-md-7">
+                    <h1>{{ page.title }}</h1>
+                </div>
+            </div>
+        </div>
+    </div>
+{% else %}
+    <div class="container">
+        <div class="row">
+            <div class="col-md-7">
+                <h1>{{ page.title }}</h1>
+            </div>
+        </div>
+    </div>
+{% endif %}