play.html

{% extends "index.html" %}

{% block content %}
<div class="image-page">
    {{ page.content | safe }}

    <div class="image-flow">
        {% for image in page.extra.images %}
        <div class="image-desc">
            <img src="{{ image }}" loading="lazy"/>
            <div class="overlay-desc">
                <div>
                    {% if loop.index0 < page.extra.titles | length %}
                        <div class="image-title">
                            {{ page.extra.titles[loop.index0] | title }}
                        </div>
                    {% endif %}
                    {% if loop.index0 < page.extra.descriptions | length %}
                        <div class="image-description">
                            {{ page.extra.descriptions[loop.index0] }}
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>

    <div class="last-p">
        Wish you a good day.
    </div>
</div>
{% endblock content %}