blog/templates/blog/blog_index_page.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69

{% extends "base.html" %}

{% load wagtailcore_tags %}
{% load wagtailcore_tags wagtailimages_tags %}

{% block body_class %}template-blogindexpage{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
      {# Blog Entries Column  #}
      <div class="col-md-8">
        <h1 class="my-4">{{ page.title }}
          <small class="text-muted">{{ page.intro }}</small>
        </h1>

        <hr>

        {% for post in blogpages %}
          {% with post=post.specific %}
            {# Blog Post  #}
            <div class="card mb-4">
              {% if post.main_image %}
                {% image post.main_image fill-750x300-c100 class="card-img-top" %}
              {% endif %}
              <div class="card-body">
                <h2 class="card-title">{{ post.title }}</h2>
                <p class="card-text">{{ post.intro }}</p>
                <a href="{% pageurl post  %}" class="btn btn-primary btn-sm">Read Post &rarr;</a>
              </div>
              <div class="card-footer text-muted">
                Posted on {{ post.date }}
              </div>
            </div>
          {% endwith %}
        {% endfor %}

        {# Pagination #}
        {% if blogpages.paginator.num_pages > 1 %}
          <ul class="pagination justify-content-center mb-4">
            {% if blogpages.has_previous %}
              <li class="page-item">
                <a class="page-link" href="?page={{ blogpages.previous_page_number }}">&larr; Newer</a>
              </li>
            {% else %}
              <li class="page-item disabled">
                <a class="page-link" href="#">&larr; Newer</a>
              </li>
            {% endif %}
            {% if blogpages.has_next %}
              <li class="page-item">
                <a class="page-link" href="?page={{ blogpages.next_page_number }}">Older &rarr;</a>
              </li>
            {% else %}
              <li class="page-item disabled">
                <a class="page-link" href="#">Older &rarr;</a>
              </li>
            {% endif %}
          </ul>
        {% endif %}
      </div>

      {# Sidebar Widgets Column  #}
      <div class="col-md-4">
        {% include "search.html" %}
      </div>
    </div>
</div>
{% endblock %}