my-website/templates/blog-page.html

{% extends "base.html" %}

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

{% block head_extra %}
    {% if page.description %}
        <meta name="description" content="{{ page.description | safe }}">
    {% endif %}
{% endblock head_extra %}


{% block content %}

<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center">
  {{ page.title }}
</h1>

<p class="subtitle"><strong>{{ page.date }}</strong></p>

{% if page.extra.image %}
    {% set image = page.extra.image %}
    {% if image is starting_with("http") %}
        {% set image_url = image %}
    {% else %}
        {% set image_url = get_url(path=image) %}
    {% endif %}

    <div class="flex justify-center my-4">
        <img
            src="{{ image_url | safe }}"
            alt="{{ page.title }}"
            class="max-w-full max-h-100 object-cover border border-gray-600 rounded-2xl"
            loading="lazy"
            decoding="async"
            onclick="openFullscreenImage(this)"
        />
    </div>
{% endif %}


<div class="mt-6 text-xl text-gray-300">
    {{ page.content | safe }}
</div>

{% endblock content %}