From b91245c8a18024993c69769de5f06b63200c48a3 Mon Sep 17 00:00:00 2001
From: Jake Charman <jake@jakecharman.co.uk>
Date: Sun, 19 Jan 2025 21:19:45 +0000
Subject: [PATCH] Improvements to projects and dynamic image resizing

---
 config/httpd.conf            | 16 ++++++++--------
 src/projects.py              | 33 +++++++++++++++++++++++++++++++--
 src/requirements.txt         |  1 +
 src/static/style/desktop.css |  6 ++++++
 src/static/style/mobile.css  |  9 +++++++++
 src/templates/article.html   |  2 +-
 src/templates/projects.html  | 12 +++++++++++-
 7 files changed, 67 insertions(+), 12 deletions(-)

diff --git a/config/httpd.conf b/config/httpd.conf
index ba14fcc..2950144 100644
--- a/config/httpd.conf
+++ b/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
 
diff --git a/src/projects.py b/src/projects.py
index 81b2ec8..01ca270 100644
--- a/src/projects.py
+++ b/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
+
diff --git a/src/requirements.txt b/src/requirements.txt
index f3b6919..be7907e 100644
--- a/src/requirements.txt
+++ b/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
diff --git a/src/static/style/desktop.css b/src/static/style/desktop.css
index f4b843f..0f656ee 100644
--- a/src/static/style/desktop.css
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/static/style/mobile.css b/src/static/style/mobile.css
index 8dcd1f1..75b6f09 100644
--- a/src/static/style/mobile.css
+++ b/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;
 }
\ No newline at end of file
diff --git a/src/templates/article.html b/src/templates/article.html
index 6e1524a..6aba5b7 100644
--- a/src/templates/article.html
+++ b/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 />
diff --git a/src/templates/projects.html b/src/templates/projects.html
index 39f0260..6883c6a 100644
--- a/src/templates/projects.html
+++ b/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 }}">