Changes to support galleries

src/jakecharman/__init__.py

@@ -149,30 +149,16 @@ def sitemap():
 
     return Response(ET.tostring(root, encoding='utf-8'), 200, {'content-type': 'application/xml'})
 
-@app.route('/image/<image_name>')
-def image( image_name: str) -> Response:
-    ''' Resize and return an image. '''
+def resize_image(image_name: str, size: tuple):
+    w = size[0]
+    h = size[1]
+
     md_directory = LocalStorage(md_path)
-    
-    w = int(request.args.get('w', 0))
-    h = int(request.args.get('h', 0))
-
-    if w == 0 and h == 0:
-        return send_from_directory(md_directory.uri, path.join('images', image_name))
-    try:
-        the_image = Image.open(path.join(md_directory.uri, 'images', image_name))
-    except FileNotFoundError:
-        return Response(status=404)
-    except UnidentifiedImageError:
-        return send_from_directory(md_directory.uri, path.join('images', image_name))
-
+    the_image = Image.open(path.join(md_directory.uri, 'images', image_name))
     max_width, max_height = the_image.size
 
-    if (w >= max_width and h >= max_height):
-        return send_from_directory(md_directory.uri, path.join('images', image_name))
-
-    if path.exists(path.join('images', f'{w}-{h}-{image_name}')):
-        return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))
+    if path.exists(path.join(md_directory.uri, 'images', f'{w}-{h}-{image_name}')) or (w >= max_width and h >= max_height):
+        raise FileExistsError()
 
     req_size = [max_width, max_height]
     if w > 0:
@@ -185,6 +171,45 @@ def image( image_name: str) -> Response:
     the_image.save(resized_img, format=the_image.format)
     the_image.save(path.join(md_directory.uri, 'images', f'{w}-{h}-{image_name}'), the_image.format)
 
-    response = make_response(resized_img.getvalue())
-    response.headers.set('Content-Type', f'image/{the_image.format}')
-    return response
+@app.route('/image/<image_name>')
+def image( image_name: str) -> Response:
+    ''' Resize and return an image. '''
+    md_directory = LocalStorage(md_path)
+    
+    w = int(request.args.get('w', 0))
+    h = int(request.args.get('h', 0))
+
+    if w == 0 and h == 0:
+        return send_from_directory(md_directory.uri, path.join('images', image_name))
+    if path.exists(path.join(md_directory.uri, 'images', f'{w}-{h}-{image_name}')):
+        return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))
+    try:
+        resize_image(image_name, (w, h))
+    except FileNotFoundError:
+        return Response(status=404)
+    except UnidentifiedImageError:
+        return send_from_directory(md_directory.uri, path.join('images', image_name))
+    except FileExistsError:
+        return send_from_directory(md_directory.uri, path.join('images', image_name))
+
+    return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))
+
+@app.route('/image/thumb/<image_name>')
+def img_thumb(image_name: str):
+    ''' Flask route to load an image '''
+    md_directory = LocalStorage(md_path)
+    w = 400
+    h = 0
+    thumb_file = path.join(md_directory.uri, 'images', f'{w}-{h}-{image_name}')
+    if path.exists(thumb_file):
+        return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))
+    try:
+        resize_image(image_name, (w, h))
+    except FileNotFoundError:
+        return Response(status=404)
+    except UnidentifiedImageError:
+       return send_from_directory(md_directory.uri, path.join('images', image_name))
+    except FileExistsError:
+       return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))
+
+    return send_from_directory(md_directory.uri, path.join('images', f'{w}-{h}-{image_name}'))

src/jakecharman/templates/article.html

@@ -1,5 +1,18 @@
 {% extends 'main.html' %}
 
+{% block head %}
+{% if metadata.gallery %}
+    <script>
+        document.addEventListener("DOMContentLoaded",function(){
+            post_gallery = new Viewer(document.getElementById('article'), {
+                'url': 'realsrc',
+                'title': false
+            });
+        });
+    </script>
+{% endif %}
+{% endblock %}
+
 {% block content %}
 <main>
     <section id="article">

src/jakecharman/templates/main.html

@@ -12,10 +12,12 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link rel="icon" type="image/x-icon" href="/static/images/jc.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.css" integrity="sha512-9NawOLzuLE2GD22PJ6IPWXEjPalb/FpdH1qMpgXdaDM+0OfxEV75ZCle6KhZi0vM6ZWvMrNnIZv6YnsL+keVmA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="/static/js/filter_projects.js"></script>
     <script src="/static/js/update_copyright.js"></script>
     <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-6WMXXY0RL0"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/viewerjs/1.11.7/viewer.min.js" integrity="sha512-lZD0JiwhtP4UkFD1mc96NiTZ14L7MjyX5Khk8PMxJszXMLvu7kjq1sp4bb0tcL6MY+/4sIuiUxubOqoueHrW4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script>
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
@@ -23,6 +25,7 @@
 
         gtag('config', 'G-6WMXXY0RL0');
     </script>
+    {% block head %}{% endblock %}
 </head>
 <body>
     <header>

src/static/style/desktop.css

@@ -122,4 +122,10 @@
     .link>a>h3 {
         padding-top: 20px;
     }
+
+    .photo-gallery>img {
+        width: 20vw;
+        padding: 10px;
+        height: 14vw;
+    }
 }

src/static/style/mobile.css

@@ -313,4 +313,19 @@ pre{
 
 .category>h3 {
     margin-bottom: 10px;
+}
+
+.photo-gallery {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin-bottom: 20px;
+}
+
+.photo-gallery>img {
+    width: 45vw;
+    padding: 5px;
+    height:  31vw;
+    object-fit: cover;
 }