From 438c7b5ae1bf4147298171f24a647fe77fd0c636 Mon Sep 17 00:00:00 2001
From: Jake Howard <git@theorangeone.net>
Date: Fri, 27 Jul 2018 20:43:28 +0100
Subject: [PATCH] Add images to pages

---
 docker-compose.yml                      |  1 +
 templates/common/content.html           |  8 +++--
 templates/pages/section_index_page.html | 41 ++++++++++++++-----------
 3 files changed, 30 insertions(+), 20 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 0740ac0..2f91bfe 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -31,6 +31,7 @@ services:
       - ./project/:/app/project/
       - ./static/:/app/static/
       - ./templates/:/app/templates/
+      - ./docker-data/media:/app/media
 
     depends_on:
       - db
diff --git a/templates/common/content.html b/templates/common/content.html
index 4a6680b..2ba5eba 100644
--- a/templates/common/content.html
+++ b/templates/common/content.html
@@ -1,6 +1,10 @@
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
-<div class="mb-3 image header-image" data-image=''></div>
+
+{% if page.image %}
+    {% image page.image width-1000 as photo %}
+    <div class="mb-3 image header-image" data-image='{{ photo.url }}'></div>
+{% endif %}
 <h1 class="display-5">{{ page.title }}</h1>
 <h5 class="my-3">Subtitle</h5>
 <p>{% include "common/content_details.html" with page=page %}</p>
diff --git a/templates/pages/section_index_page.html b/templates/pages/section_index_page.html
index d349f47..73810af 100644
--- a/templates/pages/section_index_page.html
+++ b/templates/pages/section_index_page.html
@@ -1,30 +1,35 @@
 {% extends "base.html" %}
 
-{% load static %}
+{% load static wagtailimages_tags %}
 
 {% block content %}
 <div id="main">
     <div class="container">
-      {% include "common/content.html" %}
+        {% include "common/content.html" %}
 
-      <hr />
+        {% if page.body %}
+            <hr />
+        {% endif %}
 
-    {% for child in page.get_children.specific %}
-        <div class="media list-page-item mb-3">
-            <div class="d-none d-md-block align-self-center img-wrapper mr-3">
-                <a href="{{ child.url }}">
-                    <div class="image" data-image=''></div>
-                </a>
+        {% for child in page.get_children.specific %}
+            <div class="media list-page-item mb-3">
+                <div class="d-none d-md-block align-self-center img-wrapper mr-3">
+                    {% if child.image %}
+                        <a href="{{ child.url }}">
+                            {% image child.image width-300 as photo %}
+                            <div class="image" data-image='{{ photo.url }}'></div>
+                        </a>
+                    {% endif %}
+                </div>
+                <div class="media-body">
+                    <a href="{{ child.url }}">
+                    <h5 class="my-0">{{ child.title }}</h5>
+                    </a>
+                    <small>{% include "common/content_details.html" with page=child %}</small>
+                    <p>{{ child.get_short_body }}</p>
+                </div>
             </div>
-              <div class="media-body">
-                <a href="{{ child.url }}">
-                  <h5 class="my-0">{{ child.title }}</h5>
-                </a>
-                <small>{% include "common/content_details.html" with page=child %}</small>
-                <p>{{ child.get_short_body }}</p>
-            </div>
-        </div>
-    {% endfor %}
+        {% endfor %}
     </div>
   </div>
 {% endblock %}