wagtail_bakerydemo/bakerydemo/templates/blog/blog_page.html

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

{% block content %}

{% image self.image fill-1920x600 as hero_img %}
<div class="container-fluid hero" style="background-image:url('{{ hero_img.url }}')">
<div class="hero-gradient-mask"></div>
    <div class="container">
        <div class="row">
            <div class="col-md-7 col-md-offset-2">
                <h1>{{ page.title }}</h1>
                <p class="stand-first">{{ page.subtitle }}</p>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-7 col-md-offset-2">
            {% if page.introduction %}
                <p class="intro">{{ page.introduction }}</p>
            {% endif %}

            {# TODO These two loops could be consolidated into one, with styling #}
            <div class="blog-byline">
            {{ page.date_published }} by {% for author in page.authors %}
                {{ author }}{% if not forloop.last %}, {% endif %}
            {% endfor %}
            </div>

            <div class="blog-avatars">
                {% for author in page.authors %}
                    {% image author.image width-100 class="blog-avatar" %}
                {% endfor %}
            </div>

            {{ page.body }}

            {% if page.get_tags %}
                Tagged with:<br />
                {% for tag in page.get_tags  %}
                    <a href="{{ tag.url }}" class="btn btn-sm">{{ tag }}</a>
                {% endfor %}
            {% endif %}
        </div>
    </div>
</div>
{% endblock content %}