relatedcontent.html

{% load wagtailcore_tags wagtailimages_tags %}

{% if related_documents or related_pages %}
    <div class="wrapper wrapper--breakout wrapper--dark-bg">
        <div class="wrapper wrapper--medium">
            <h2>You might also like...</h2>
            <section class="grid grid--max-three">
                    {% for related_document in related_documents %}
                        {% with document=related_document.document %}
                            <div class="card">
                                <a href="{{ document.url }}">
                                    <h2>
                                        {% if related_document.title %}
                                            {{ related_document.title }}
                                            ({{ document.file_extension }})
                                        {% else %}
                                            {{ document.filename }}
                                        {% endif %}
                                    </h2>
                                </a>
                            </div>
                        {% endwith %}
                    {% endfor %}

                    {% for related in related_pages %}
                        {# a related object links to the original page (related.source_page) and a related one (related.page) #}
                        {% if related.page.live %}
                            {% with specific_related_page=related.page.specific %}
                                <a class="card" href="{% pageurl specific_related_page %}">
                                    {% if specific_related_page.listing_image %}
                                        {% image specific_related_page.listing_image fill-450x300 %}
                                    {% endif %}
                                    <h4>
                                        {{ specific_related_page.listing_title|default:specific_related_page.title }}
                                    </h4>
                                    {% if specific_related_page.listing_summary or specific_related_page.introduction %}
                                        <p class="card__teaser">{{ specific_related_page.listing_summary|default:specific_related_page.introduction|truncatechars_html:130  }}</p>
                                    {% endif %}
                                    <svg class="icon icon--card-pixels"><use xlink:href="#arrow-head-pixels"></use></svg>
                                </a>
                            {% endwith %}
                        {% endif %}
                    {% endfor %}
            </section>
        </div>
    </div>
{% endif %}