Add EXIF data displaying

Add info to setup and manifest(o)
Change background scroll effect

gallery/__init__.py

@@ -32,7 +32,7 @@ def create_app(test_config=None):
         SECRET_KEY=os.environ.get('FLASK_SECRET'),
         DATABASE=os.path.join(app.instance_path, 'gallery.sqlite'),
         UPLOAD_FOLDER=os.path.join(app.root_path, 'user', 'uploads'),
-        ALLOWED_EXTENSIONS=['png', 'jpg', 'jpeg', 'webp'],
+        ALLOWED_EXTENSIONS=os.environ.get('FLASK_EXTENSIONS'),
     )
     
     if test_config is None:

gallery/gallery.py

@@ -5,6 +5,8 @@ from gallery.auth import login_required
 from gallery.db import get_db
 import os
 import datetime
+from PIL import Image
+from PIL.ExifTags import TAGS
 dt = datetime.datetime.now()
 
 blueprint = Blueprint('gallery', __name__)
@@ -23,16 +25,29 @@ def index():
 @blueprint.route('/image/<int:id>')
 def image(id):    
     db = get_db()
-    post = db.execute(
+    image = db.execute(
         'SELECT * FROM posts'
         ' WHERE id = ?',
         (id,)
     ).fetchone()
     
-    if post is None:
+    if image is None:
         abort(404)
     
-    return render_template('image.html', fileName=post['file_name'], id=id)
+    file = Image.open(os.path.join(current_app.config['UPLOAD_FOLDER'], 'original', image['file_name']))
+    
+    raw_exif = file.getexif()
+    human_exif = {}
+    for tag in raw_exif:
+        name = TAGS.get(tag, tag)
+        value = raw_exif.get(tag)
+        
+        if isinstance(value, bytes):
+            value = value.decode()
+        
+        human_exif[name] = value
+    
+    return render_template('image.html', image=image, exif=human_exif)
 
 
 @blueprint.route('/group')

gallery/templates/image.html

@@ -1,7 +1,7 @@
 {% extends 'layout.html' %}
 
 {% block header %}
-    <img src="/uploads/original/{{ fileName }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
+    <img src="/uploads/original/{{ image['file_name'] }}" alt="leaves" onload="imgFade(this)" style="display: none;"/>
 {% endblock %}
 
 {% block content %}
@@ -9,13 +9,19 @@
         <div class="image__container">
             <img
                 class="image__item"
-                src="/uploads/original/{{ fileName }}"
+                src="/uploads/original/{{ image['file_name'] }}"
                 onload="imgFade(this)" style="display:none;"
             />
         </div>
         <div class="image__info">
-            <h2>{{ fileName }}</h2>
-            <p>{{ id }}</p>
+            <h2>{{ image['file_name'] }}</h2>
+            <p>{{ image['id'] }}</p>
+            <p>{{ image['author_id'] }}</p>
+        </div>
+        <div class="image__info">
+            {% for tag in exif %}
+                <p>{{ tag }}: {{ exif[tag] }}</p>
+            {% endfor %}
         </div>
     </div>
 {% endblock %}

gallery/templates/layout.html

@@ -59,15 +59,18 @@
 
         {% block content %}
         {% endblock %}
-        <i class="ph-arrow-circle-up" id="topButton"></i>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="-2 -2 24 24" fill="currentColor" id="topButton">
+            <path d="M11 8.414V14a1 1 0 0 1-2 0V8.414L6.464 10.95A1 1 0 1 1 5.05 9.536l4.243-4.243a.997.997 0 0 1 1.414 0l4.243 4.243a1 1 0 1 1-1.414 1.414L11 8.414zM10 20C4.477 20 0 15.523 0 10S4.477 0 10 0s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"></path>
+        </svg>
     </main>
 
     <script>
         let navToggle = true;
 
         document.onscroll = function() {
-            document.querySelector('header').style.opacity = `${1 - window.scrollY / 169}`;
-            document.querySelector('header img').style.cssText = `object-position: center ${window.scrollY / 2}px`;
+            document.querySelector('header').style.opacity = `${1 - window.scrollY / 621}`;
+            //document.querySelector('header').style.height = `calc(50vh - ${window.scrollY / 2}px)`;
+            document.querySelector('header').style.top = `-${window.scrollY / 5}px`;
 
             if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 20) {
                 document.querySelector('#topButton').style.opacity = 1;

gallery/user/themes/default/buttons/up.scss

@@ -2,12 +2,13 @@
     margin: 0;
     padding: 0.25rem;
 
+    width: 3rem;
+    height: 3rem;
+
     position: fixed;
     bottom: 0.75rem;
     right: -3rem;
 
-    font-size: 3rem;
-
     display: flex; // hidden
     justify-content: center;
     align-items: center;

gallery/user/themes/default/style.scss

@@ -21,7 +21,7 @@
     flex-direction: column;
     gap: 1rem;
 
-    background-color: $black100;
+    //background-color: $black100;
     color: $white100;
 
     box-sizing: border-box;
@@ -56,7 +56,7 @@
 }
 
 .err-warning {
-    min-height: 60vh;
+    min-height: 100vh;
 
     gap: 0;
 
@@ -210,7 +210,7 @@
 }
 
 .image__container {
-    margin: -40vh 0 0 0;
+    margin: 0;
     padding: 0;
 
     width: 100%;
@@ -242,24 +242,26 @@
 
 .image__info {
     margin: 0;
-    padding: 0;
+    padding: 0.5rem;
 
     width: 100%;
 
     display: flex;
     flex-direction: column;
+    gap: 0.5rem;
 
     background-color: $black200;
-    border-radius: calc($rad / 2);
+    border-radius: $rad;
+    border-left: $rad solid $green;
 
     box-sizing: border-box;
 
     h2 {
         margin: 0;
-        padding: 0 1rem 0.5rem;
+        padding: 0;
 
         font-family: $font-header;
-        font-size: 1rem;
+        font-size: 1.25rem;
         font-stretch: ultra-expanded;
         font-weight: 600;
 
@@ -271,10 +273,10 @@
 
     p {
         margin: 0;
-        padding: 0 1rem 0.5rem;
+        padding: 0;
 
         font-family: $font-body;
-        font-size: 0.8rem;
+        font-size: 1rem;
         font-weight: 500;
 
         color: $white100;

gallery/user/themes/default/ui/main.scss

@@ -15,9 +15,11 @@ main {
         padding: 0;
 
         width: 100%;
-        height: 40vh;
+        height: 69vh;
 
-        position: relative;
+        position: fixed;
+        top: 0;
+        left: 0;
 
         background-color: $black200;
         border-radius: $rad;
@@ -32,8 +34,6 @@ main {
             width: 100%;
             height: 100%;
 
-            filter: blur(0.5rem);
-
             object-fit: cover;
             object-position: center 0px;
         }
@@ -47,6 +47,7 @@ main {
             height: 100%;
 
             background-image: linear-gradient(to bottom, #00000000, rgba($black100, 1));
+            backdrop-filter: blur(0.5rem);
 
             z-index: +1;
         }