python-gallery/onlylegs/templates/index.html

{% extends 'layout.html' %}
{% block head %}
    <meta property="og:image" content="{{ url_for('static', filename='icon.png') }}"/>
    <meta name="twitter:image" content="{{ url_for('static', filename='icon.png') }}"/>
    <meta name="twitter:card" content="summary"/>
{% endblock %}
{% block nav_home %}selected{% endblock %}
{% block content %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
            {% if total_images == 0 %}
                <p class="banner-info">0 images D:</p>
            {% elif total_images == 69 %}
                <p class="banner-info">{{ total_images }} images, nice</p>
            {% else %}
                <p class="banner-info">{{ total_images }} images</p>
            {% endif %}

            {% if pages > 1 %}
                <div class="pill-row">
                    <div>
                        {% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index') }}"><i class="ph ph-arrow-line-left"></i></a>{% endif %}
                        <a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page-1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}"><i class="ph ph-arrow-left"></i></a>
                    </div>
                    <span class="pill-text">{{ page }} / {{ pages }}</span>
                    <div>
                        <a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page+1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}"><i class="ph ph-arrow-right"></i></a>
                        {% if pages > 4 %}<a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}"><i class="ph ph-arrow-line-right"></i></a>{% endif %}
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    {% if images %}
        <div class="gallery-grid" style="position: relative;">
            {% for image in images %}
                <a id="image-{{ image.id }}" class="gallery-item" href="{{ url_for('image.image', image_id=image.id) }}" style="background-color: rgb{{ image.colours.0 }}; position: absolute; margin: 0;">
                    <div class="image-filter">
                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                    </div>
                    <picture>
                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
                        <source srcset="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
                        <img
                            src="{{ url_for('media_api.media', path='uploads/' + image.filename) }}?r=thumb"
                            alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
                            onload="imgFade(this)"
                            style="opacity:0;"
                            fetchpriority="low"
                        />
                    </picture>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            <p>There are no images here yet, upload some!</p>
        </div>
    {% endif %}
{% endblock %}