iamkonstantin/blog/templates/blog/blog_page.html

82 lines
No EOL
3.4 KiB
HTML

{% extends "base.html" %}
{% load wagtailcore_tags wagtailimages_tags %}
{% block body_class %}template-blogpage{% endblock %}
{% block content %}
<section class="flex flex-col items-center justify-center h-full px-0 md:px-4 lg:px-8">
<article class="mb-16 px-1 md:px-4 lg:px-8">
<h1>{{ page.title }}</h1>
{% with authors=page.authors.all %}
{% if authors %}
<h2 class="sr-only">Posted by:</h2>
<ul>
{% for author in authors %}
<li style="display: inline">
<div class="group block flex-shrink-0">
<div class="flex items-center">
<div>
{% image author.author_image fill-168x168 class="inline-block h-14 w-14 rounded-full" %}
</div>
<div class="ml-3">
<p class="text-sm font-medium m-0"> {{ author.name }}</p>
<p class="space-x-2 m-0 mt-1 text-left"><span class="emoji"
aria-hidden="true">🕘</span>
<time class="text-sm"
datetime="{{ page.date|date:"Y-m-d" }}">{{ page.date }}</time>
</p>
</div>
</div>
</div>
</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<div class="blog-content w-full">
<div class="my-6 text-lg font-medium">{{ page.intro }}</div>
{{ page.body }}
<div class="flex">
{% for item in page.gallery_images.all %}
<div class="m-4">
{% image item.image fill-320x240 %}
<p>{{ item.caption }}</p>
</div>
{% endfor %}
</div>
{% with tags=page.tags.all %}
{% if tags %}
<div class="flex items-center justify-center gap-x-4 text-xs my-6">
<div class="tags">
<h2 class="sr-only">Tags</h2>
<ul class="flex">
{% for tag in tags %}
<li><span class="emoji">🏷</span>
<a class="pr-2" href="{% slugurl 'tags' %}?tag={{ tag }}">{{ tag }}</a>
</li>
{% endfor %}
</ul>
</div>
</div>
{% endif %}
{% endwith %}
</div>
</article>
<nav class="w-full text-center px-2 lg:px-4 return">
<a href="{{ page.get_parent.url }}" class="font-bold">Return to blog</a>
</nav>
</section>
{% endblock %}