Improvements to projects and dynamic image resizing

config/httpd.conf

@@ -413,14 +413,14 @@ LogLevel warn
 
 AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
 # DocumentRoot /var/www/jc/
-WSGIErrorOverride On
-ErrorDocument 400 /error/400
-ErrorDocument 403 /error/403
-ErrorDocument 404 /error/404
-#ErrorDocument 418 /error/418
-ErrorDocument 500 /error/500
-ErrorDocument 503 /error/503
-ErrorDocument 505 /error/505
+# WSGIErrorOverride On
+# ErrorDocument 400 /error/400
+# ErrorDocument 403 /error/403
+# ErrorDocument 404 /error/404
+# #ErrorDocument 418 /error/418
+# ErrorDocument 500 /error/500
+# ErrorDocument 503 /error/503
+# ErrorDocument 505 /error/505
 
 WSGISocketPrefix /var/run/wsgi
 

src/projects.py

@@ -2,13 +2,15 @@
 
 from os import path
 import json
-from flask import Flask, render_template, Response, send_from_directory
+from flask import Flask, render_template, Response, send_from_directory, request, make_response
 from markdown import markdown
 import frontmatter
 from glob import glob
 from datetime import datetime
 from index import app
 from bs4 import BeautifulSoup
+from PIL import Image
+from io import BytesIO
 
 md_directory = path.join(path.realpath(path.dirname(__file__)), path.normpath('projects/'))
 
@@ -122,4 +124,31 @@ def article(article):
 
 @app.route('/projects/image/<image>')
 def image(image):
-    return send_from_directory(path.join(md_directory, 'images'), image)
+    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, path.join('images', image))
+    try:
+        the_image = Image.open(path.join(md_directory, 'images', image))
+    except FileNotFoundError:
+        return Response(status=404)
+    max_width, max_height = the_image.size
+
+    if (w >= max_width and h >= max_height):
+        return send_from_directory(md_directory, path.join('images', image))
+
+    req_size = [max_width, max_height]
+    if w > 0:
+        req_size[0] = w
+    if h > 0:
+        req_size[1] = h
+
+    resized_img = BytesIO()
+    the_image.thumbnail(tuple(req_size))
+    the_image.save(resized_img, format='jpeg')
+    
+    response = make_response(resized_img.getvalue())
+    response.headers.set('Content-Type', 'image/jpeg')
+    return response
+

src/requirements.txt

@@ -4,3 +4,4 @@ markdown>=3.4.1
 beautifulsoup4>=4.11.1
 python-frontmatter>=1.1.0
 requests>=2.32.3
+pillow>=11.0.0

src/static/style/desktop.css

@@ -42,6 +42,8 @@
         justify-content: center;
         flex-direction: row;
         flex-wrap: wrap;
+        margin: 0 auto 0 auto;
+        width: 80vw;
     }
     
     .project{
@@ -61,4 +63,8 @@
         position: absolute;
         height: 25vh;
     }
+
+    #article>p>img{
+        display: inline;
+    }
 }

src/static/style/mobile.css

@@ -203,4 +203,13 @@ label{
 
 #contact-error{
     color: red;
+}
+
+#article{
+    padding: 0 10px 0 10px;
+}
+
+#article>p>img{
+    display: block;
+    margin: 0 auto 0 auto;
 }

src/templates/article.html

@@ -1,6 +1,6 @@
 {% include 'header.html' %}
 <main>
-    <section id="tech-article">
+    <section id="article">
         <h1>{{ metadata.title}} </h1>
         <p>{{ metadata.date | human_date }}</p>
         <hr />

src/templates/projects.html

@@ -15,7 +15,17 @@
     <section id="projects">
         {% for row in articles %}
         <div class="project">
-            <img class="project-thumb" src="/projects/image/{{ row.image }}">
+            <img class="project-thumb" 
+            srcset="
+                {% for i in range(200, 5100, 100) %}
+                    /projects/image/{{ row.image }}?w={{i}} {{i}}w{{"," if not loop.last}}
+                {% endfor %}
+                "
+                sizes="
+                    (max-width: 999px) 80vw,
+                    (min-width: 1000px) 20vw
+                "
+            src="/projects/image/{{ row.image }}">
             <div class="project-text">
                 {% if row.get('link') is not none %}
                 <a href="{{ row.link }}">