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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101

{% 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 %}">Read Post</a>
          </div>
          <div class="card-footer text-muted">
            Posted on {{ post.date }}
          </div>
        </div>
        {% endwith %}
        {% endfor %}

        <!-- Pagination -->
        <ul class="pagination justify-content-center mb-4">
          <li class="page-item">
            <a class="page-link" href="#">&larr; Older</a>
          </li>
          <li class="page-item disabled">
            <a class="page-link" href="#">Newer &rarr;</a>
          </li>
        </ul>
	  {# Only show pagination if there is more than one page to click through #}
	  {% if blogpages.paginator.num_pages > 1 %}
	    <div class="container">
	      <div class="row">
	        <div class="col-lg-12">
	          <div class="pagination">
	            {% if blogpages.has_previous %}
	              <li class="page-item">
	                <a href="?page={{ blogpages.previous_page_number }}" class="page-link">
	                  <span>&laquo;</span>
	                </a>
	              </li>
	            {% endif %}
	 
	            {% for page_num in blogpages.paginator.page_range %}
	              <li class="page-item {% if page_num == blogpages.number %} active{% endif %}">
	                <a href="?page={{ page_num }}" class="page-link">
	                  {{ page_num }}
	                </a>
	              </li>
	            {% endfor %}
	 
	            {% if blogpages.has_next %}
	              <li class="page-item">
	                <a href="?page={{ blogpages.next_page_number }}" class="page-link">
	                  <span>&raquo;</span>
	                </a>
	              </li>
	            {% endif %}
	          </div>
	        </div>
	      </div>
	    </div>
	  {% endif %}

      </div>

      <!-- Sidebar Widgets Column -->
      <div class="col-md-4">

      {% include "search.html" %}


      </div>

    </div>
    <!-- /.row -->

  </div>
    
</div>
{% endblock %}