python-gallery/gallery/templates/index.html

{% extends 'layout.html' %}

{% block nav_home %}navigation-item__selected{% endblock %}

{% block content %}
    <div class="banner">
        <img src="{{ url_for('static', filename='images/bg.svg') }}" onload="imgFade(this)" style="opacity:0;"/>
        <span class="banner-filter"></span>

        <div class="banner-content">
            <p>{{ config.WEBSITE.motto }}</p>
            <h1>{{ config.WEBSITE.name }}</h1>
            <p>Serving {{ images|length }} images</p>
        </div>
    </div>

    {% if images %}
        <div class="gallery-grid">
            {% for image in images %}
                <a id="image-{{ image.id }}" class="gallery-item" href="/image/{{ image.id }}" style="background-color: rgb({{ image.image_colours.0.0 }}, {{ image.image_colours.0.1 }}, {{ image.image_colours.0.2 }})">
                    <div class="image-filter">
                        <p class="image-subtitle"></p>
                        <p class="image-title"><span class="time">{{ image.created_at }}</span></p>
                    </div>
                    <img alt="{{ image.post_alt }}" data-src="{{ image.file_name }}" onload="imgFade(this)" style="opacity:0;" id="lazy-load"/>
                </a>
            {% endfor %}
        </div>
    {% else %}
        <div class="big-text">
            <h1>No images</h1>
            {% if g.user %}
                <p>You can get started by uploading an image!</p>
            {% else %}
                <p>Login to start uploading images!</p>
            {% endif %}
        </div>
    {% endif %}
{% endblock %}

{% block script %}
    <script>
        if (document.referrer.includes('image')) {
            try {
                let referrerId = document.referrer.split('/').pop();
    
                let imgOffset = document.getElementById('image-' + referrerId).offsetTop;
                let imgHeight = document.getElementById('image-' + referrerId).offsetHeight;
                let windowHeight = window.innerHeight;
    
                document.querySelector('html').style.scrollBehavior = 'auto';
                window.scrollTo(0, imgOffset + (imgHeight / 2) - (windowHeight / 2));
                document.querySelector('html').style.scrollBehavior = 'smooth';
            } catch (e) {
                console.log(e);
            }
        }
    </script>
{% endblock %}