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,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 %}
+        {% for child in page.get_children.specific %}
-        <div class="media list-page-item mb-3">
+            <div class="media list-page-item mb-3">
-            <div class="d-none d-md-block align-self-center img-wrapper mr-3">
+                <div class="d-none d-md-block align-self-center img-wrapper mr-3">
-                <a href="{{ child.url }}">
+                    {% if child.image %}
-                    <div class="image" data-image=''></div>
+                        <a href="{{ child.url }}">
-                </a>
+                            {% 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">
+        {% endfor %}
-                <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 %}
     </div>
   </div>
 {% endblock %}