wagtail_bakerydemo/bakerydemo/templates/base/home_page.html

{% extends "base.html" %}
{% load wagtailimages_tags %}

{% block content %}
<div class="homepage">

{% image page.image fill-1920x600 as image %}
<div class="container-fluid hero" style="background-image:url('{{ image.url }}')">
    <div class="hero-gradient-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2 home-hero">
                <h1>{{ page.title }}</h1>
                <p class="lead">{{ page.hero_text }}</p>
                <a href="{{ page.hero_cta_link }}" class="hero-cta-link hvr-icon-forward">{{ page.hero_cta }}</a>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row promo-row">
        <div class="col-sm-5 promo">
            {% if page.promo_image or page.promo_title or page.promo_text %}
                <figure>{% image page.promo_image fill-200x200-c100 %}</figure>
                <div class="promo-text">
                    <h3>{{ page.promo_title }}</h3>
                    {{ page.promo_text|safe }}
                </div>
            {% endif %}
        </div>

        <div class="col-sm-6 col-sm-offset-1 feature-1">
            {% if page.featured_section_1 %}
            <h2>{{ page.featured_section_1_title }}</h2>
                <div class="featured-children">
                    {% for childpage in page.featured_section_1.specific.children|slice:"4" %}
                        <li>
                            <div class="row">
                                <div class="col-xs-4">
                                    <a href="{{childpage.url}}">
                                        <figure>
                                            {% image childpage.image fill-180x140-c100 %}
                                        </figure>
                                    </a>
                                </div>
                                <div class="col-xs-8">
                                    <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
                                </div>
                            </div>
                        </li>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

{% if page.body %}
<div class="container-fluid streamfield">
    <div class="container">
        <div class="row">
            <div class="col-md-7 streamfield-column">
                {{ page.body }}
            </div>
        </div>
    </div>
</div>
{% endif %}

<div class="container">
    <div class="row">
        <div class="col-md-12 feature-2">
            {% if page.featured_section_2 %}
            <h2>{{ page.featured_section_2_title }}</h2>
                <div class="featured-children row feature-2-row">
                    {% for childpage in page.featured_section_2.specific.children|slice:"3" %}
                        <li class="col-sm-4 feature-2-item">
                            <a href="{{childpage.url}}">
                                <figure>
                                    {% image childpage.image height-210 %}
                                </figure>
                            </a>
                            <div class="feature-2-text">
                                <h3><a href="{{childpage.url}}">{{childpage.title}}</a></h3>
                                <p>{{ childpage.introduction|truncatewords:15 }}</p>
                            </div>
                        </li>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-12 feature-3">
            {% if page.featured_section_3 %}
            <h2>{{ page.featured_section_3_title }}</h2>
                <div class="featured-children row">
                    {% for childpage in page.featured_section_3.specific.children|slice:"6" %}
                        <li class="col-md-4">
                            <a href="{{childpage.url}}">
                                <figure>
                                    {% image childpage.image width-380 %}
                                </figure>
                                <h3>{{childpage.title}}</h3>
                            </a>
                        </li>
                    {% endfor %}
                </div>
            {% endif %}
        </div>
    </div>
</div>
</div>
{% endblock content %}

HERO
----
promo | bread
-----
Blog x3
-----
Location x 6