python-gallery/onlylegs/templates/list.html

{% extends 'base.html' %}
{% block nav_groups %}selected{% endblock %}

{% block head %}
    {% if images %}<meta name="theme-color" content="rgb{{ images.0.colours.0 }}"/>{% endif %}
{% endblock %}

{% block header %}
    <div class="banner-small">
        <div class="banner-content">
            <h1 class="banner-header">{{ config.WEBSITE_CONF.name }}</h1>
            {% if groups|length == 0 %}
                <p class="banner-info">No groups!!!!</p>
            {% elif groups|length == 69 %}
                <p class="banner-info">{{ groups|length }} groups, uwu</p>
            {% else %}
                <p class="banner-info">{{ groups|length }} groups</p>
            {% endif %}
            {% if current_user.is_authenticated %}
                <div class="pill-row">
                    <div>
                        <button class="pill-item" onclick="groupCreatePopup()"><i class="ph ph-plus"></i></button>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block content %}
    {% if groups %}
        <div class="gallery-grid">
            {% for group in groups %}
                <a
                        class="group-item square"
                        id="group-{{ group.id }}"
                        href="{{ url_for('group.group', group_id=group.id) }}"
                        {% if group.images|length > 0 %} style="background-color: rgba{{ group.images.0.colours.0 }};"{% endif %}
                >
                    <div class="image-filter">
                        <p class="image-subtitle">By {{ group.author.username }}</p>
                        <p class="image-title">{{ group.name }}</p>
                    </div>
                    <div class="images size-{{ group.images|length }}">
                        {% if group.images|length > 0 %}
                            {% for image in group.images %}
                                <picture>
                                    <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=thumb&e=webp">
                                    <source srcset="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=thumb&e=png">
                                    <img
                                        src="{{ url_for('api.media', path='uploads/' + image.filename) }}?r=thumb"
                                        alt="{% if image.alt %}{{ image.alt }}{% else %}Image Thumbnail{% endif %}"
                                        class="data-{{ loop.index }}"
                                        onload="imgFade(this)"
                                        style="opacity:0;"
                                        fetchpriority="low"
                                    />
                                </picture>
                            {% endfor %}
                        {% else %}
                            <img src="{{ url_for('static', filename='error.png') }}" class="loaded" alt="Error thumbnail"/>
                        {% endif %}
                    </div>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>*crickets chirping*</h1>
            {% if current_user.is_authenticated %}
                <p>You can get started by creating a new image group!</p>
            {% else %}
                <p>Login to start seeing anything here!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}