Add images to pages

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

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>

templates/pages/section_index_page.html

@@ -1,20 +1,25 @@
 {% extends "base.html" %}
 
-{% load static %}
+{% load static wagtailimages_tags %}
 
 {% block content %}
 <div id="main">
     <div class="container">
         {% include "common/content.html" %}
 
+        {% 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">
+                    {% if child.image %}
                         <a href="{{ child.url }}">
-                    <div class="image" data-image=''></div>
+                            {% 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 }}">