Add children to section index page

project/common/models.py

@@ -3,6 +3,7 @@ from django.db import models
 from wagtail.wagtailadmin.edit_handlers import FieldPanel, MultiFieldPanel
 from wagtail.wagtailimages.edit_handlers import ImageChooserPanel
 from wagtailmetadata.models import MetadataPageMixin
+from bs4 import BeautifulSoup
 
 
 class Entity(MetadataPageMixin, Page):
@@ -28,8 +29,8 @@ class Entity(MetadataPageMixin, Page):
 
     @property
     def short_body(self):
-        body_words = str(self.body).split(' ')
-        return ' '.join(body_words[:30])  # limit to 30 words (ish)
+        body_words = BeautifulSoup(str(self.body)).get_text().split(' ')
+        return ' '.join(body_words[:30]) + '...'  # limit to 30 words (ish)
 
     def get_meta_description(self):
         return self.search_description or self.short_body

requirements.txt

@@ -1,4 +1,5 @@
 bandit==1.3.0
+beautifulsoup4==4.5.1
 bleach==1.5
 coverage==4.2
 dj_database_url==0.4.1

static/src/scss/index.scss

@@ -99,7 +99,7 @@ p a {
     min-width: 100px;
     height: 100px;
 
-    .image {
+    img {
       width: 100%;
       height: 100%;
     }

templates/pages/section_index_page.html

@@ -1,6 +1,6 @@
 {% extends "base.html" %}
 
-{% load wagtailcore_tags %}
+{% load wagtailcore_tags wagtailimages_tags %}
 
 {% block body_class %}template-indexpage{% endblock %}
 
@@ -17,6 +17,21 @@
     <section>
       <div class="container">
         <div class="row no-gutter">
+          {% for child in page.get_children.specific %}
+            <div class="media category">
+              <div class="media-left">
+                <a href="{{ child.url }}">
+                  {% image child.image max-200x200 %}
+                </a>
+              </div>
+              <div class="media-body">
+                <a href="{{ child.url }}">
+                  <h4 class="media-heading">{{ child.title }}</h4>
+                </a>
+                <p>{{ child.get_meta_description }}</p>
+              </div>
+            </div>
+          {% endfor %}
         </div>
       </div>
     </section>