blog.bythewood.me-wagtail

 1{% load wagtailcore_tags wagtailimages_tags wagtailroutablepage_tags %}
 2
 3
 4<div class="container mt-5">
 5  <div class="row">
 6    <div class="col">
 7      <div class="text-muted">Latest post</div>
 8    </div>
 9  </div>
10  <div class="row">
11    <div class="col-12 col-md-6 col-lg-5 pb-5 border-bottom">
12      <a href="{% pageurl blog_post %}" class="text-decoration-none text-dark">
13        <h2 class="fw-bolder">{{ blog_post.title }}</h2>
14      </a>
15      <div class="mb-3">
16        {% for tag in blog_post.tags.all %}
17          <a href="{% routablepageurl blog_post.get_parent.specific 'tag' tag.slug %}" class="btn btn-light btn-sm rounded-pill fw-bold py-0">
18            {{ tag.name|title }}
19          </a>
20        {% endfor %}
21      </div>
22      <p class="h5 text-muted mb-3">{{ blog_post.search_description }}</p>
23      <div class="d-flex align-items-center">
24        <img
25          class="rounded-circle me-3"
26          src="{{ self.owner.wagtail_userprofile.avatar.url }}"
27          alt="{{ self.owner.first_name }} {{ self.owner.last_name }}"
28          width="35"
29          height="35"
30        >
31        <strong class="me-2">
32          {{ blog_post.owner.first_name }}
33          {{ blog_post.owner.last_name }}
34        </strong>
35        <div class="d-inline text-muted">
36          {{ blog_post.first_published_at|date:"F d, Y" }}
37        </div>
38      </div>
39    </div>
40    {% if blog_post.cover_image %}
41    <div class="col-12 col-md-6 col-lg-7 pb-5 border-bottom">
42      <a href="{% pageurl blog_post %}">
43        {% image blog_post.cover_image fill-640x360 format-webp as cover_image_640 %}
44        {% image blog_post.cover_image fill-1280x720 format-webp as cover_image_1280 %}
45        {% image blog_post.cover_image fill-1920x1080 format-webp as cover_image_1920 %}
46        <img
47          srcset="{{ cover_image_640.url }} 640w,
48                  {{ cover_image_1280.url }} 1280w,
49                  {{ cover_image_1920.url }} 1920w"
50          src="{{ cover_image_1920.url }}"
51          class="img-fluid rounded"
52          alt="{{ cover_image_1920.alt }}"
53          width="{{ cover_image_1920.width }}"
54          height="{{ cover_image_1920.height }}"
55        >
56      </a>
57    </div>
58    {% endif %}
59  </div>
60</div>