page_home.html

{% extends "page.html" %}

{% block title %}{{ page.title }}{% endblock %}

{% block content %}
<figure>
    <div class="jumbotron jumbotron-fluid" style="background-image: url('{{ cover_image_background_url }}'); padding-bottom: 4rem;">
        <div class="container">
            <div class="class">
                <div class="col-md-8">
                    <h1>{{ page.title }}</h1>
                    <div class="lead">{{ page.summary }}</div>
                </div>
            </div>
        </div>
    </div>
    <figcaption>{{ cover_image_caption }}</figcaption>
</figure>

<main class="container">
    <section class="mb-4">
        <div class="row">
            <div class="col-md">
                {{ page.content }}
            </div>

            {% if page.alert_title %}
                <div class="col-md-4">
                    <div class="card bg-warning">
                        <img class="card-img-top" src="{{ THUMBOR_SERVICE }}/unsafe/900x300/{{ page.alert_image|urlencode() }}">
                        <div class="card-body">
                            <h5 class="card-title">{{ page.alert_title }}</h5>
                            <p class="card-text">{{ page.alert_text }}</p>
                            <a href="{{ page.alert_link }}" class="btn btn-secondary">{{ page.alert_button }}</a>
                        </div>
                    </div>
                </div>
            {% endif %}
        </div>
    </section>

    <section class="mb-4">
        <h2>Our most popular standards</h2>

        <div class="card-deck">
        {# Select 3 standard pages defined in tags using page.url = standards/tag/ #}
        {% for tag in page.tags[0:3] %}
            {% for p in pages %}
                {% if "standards/" + tag|string() + "/" == p.url %}
                    <div class="card bg-light">
                        <a href="{{ SITEURL }}/{{ p.url }}"><img class="card-img-top" src="{{ THUMBOR_SERVICE + '/unsafe/900x300/' + p.cover_image_url|urlencode() }}"></a>
                        <div class="card-body">
                            <h5 class="card-title"><a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a></h5>
                            <p>{{ p.summary|striptags }}</p>
                        </div>
                    </div>
                {% endif %}
            {% endfor %}
        {% endfor %}
        </div>

        <p class="text-right"><a href="{{ SITEURL }}/{{ PAGE_LINKS['standards'] }}">Browse all standards <i class="fa fa-chevron-circle-right"></i></a></p>
    </section>

    <section class="mb-4">
        <div class="d-flex flex-column align-items-center">
            <h5>{{ page.call1_text }}</h5>
            <a class="btn btn-lg btn-secondary" href="{% if page.call1_link.startswith('http') %}{{ page.call1_link }}{% else %}{{ SITEURL }}/{{ page.call1_link }}{% endif %}">{{ page.call1_button }}</a>
        </div>
    </section>

    <section class="mb-4">
        <h2>News</h2>

        <div class="row">
            <div class="col-md-8">
            {% for article in articles[:2] %}
                {% include "includes/article_in_index.html" %}
            {% endfor %}
                <p class="text-right"><a href="{{ SITEURL }}/{{ PAGE_LINKS['news'] }}">Browse all news <i class="fa fa-chevron-circle-right"></i></a></p>
            </div>

            <div class="col-md-4">
                <div class="card text-center">
                    <h5 class="card-header">{{ page.newsletter_title }}</h5>
                    <div class="card-body">
                        <p class="card-text">{{ page.newsletter_text }}</p>
                        <a href="{{ page.newsletter_link }}" class="btn btn-primary">{{ page.newsletter_button }} <i class="fa fa-envelope-o"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section>
        <div class="d-flex flex-column align-items-center">
            <h5>{{ page.call2_text }}</h5>
            <a class="btn btn-lg btn-secondary" href="{% if page.call2_link.startswith('http') %}{{ page.call2_link }}{% else %}{{ SITEURL }}/{{ page.call2_link }}{% endif %}">{{ page.call2_button }}</a>
        </div>
    </section>
</main>
{% endblock %}