About template styling and amended header include. Workson #75

bakerydemo/static/css/main.css

@@ -788,6 +788,13 @@ span.outline {
   max-width: 450px;
 }
 
+/* Generic title image header include */
+.base-header img {
+  height: auto;
+  margin-top: 20px;
+  width: auto;
+}
+
 /* No gutters */
 .row.no-gutters {
   margin-right: 0;

bakerydemo/templates/base/about_page.html

@@ -4,5 +4,11 @@
 {% block content %}
     {% include "base/include/header.html" %}
 
-    {{ page.body }}
+<div class="container">
+    <div class="row">
+        <div class="col-md-7">
+            {{ page.body }}
+        </div>
+    </div>
+</div>
 {% endblock content %}

bakerydemo/templates/base/include/header.html

@@ -1,16 +1,16 @@
-{% load wagtailcore_tags %}
-{% load wagtailimages_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 <div class="container">
-
-    <div class="image">
-        {% image page.image width-500 as photo %}
-        <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
-    </div>
-
     <div class="row">
-        <div class="col-md-7 col-md-offset-2">
-            <h2>{{ page.title }}</h2>
+        <div class="col-md-7 base-header">
+            {% if page.image %}
+                <div class="image">
+                    {% image page.image width-500 as photo %}
+                    <img src="{{ photo.url }}" width="{{ photo.width }}" height="{{ photo.height }}" alt="{{ photo.alt }}" />
+                </div>
+            {% endif %}
+
+            <h1>{{ page.title }}</h1>
         </div>
     </div>
-</div>
+</div>