From 67b27ffacd68a61a8702b538fb023bff7830f097 Mon Sep 17 00:00:00 2001
From: signal9 <adam@vexingworkshop.com>
Date: Mon, 10 Nov 2025 17:52:47 -0700
Subject: [PATCH] convert rendered image and container to figure element

---
 content/one-shot-painting-2025-11-08.md   |  2 +-
 themes/vexingworkshop/static/css/main.css |  8 ++++-
 themes/vexingworkshop/static/js/site.js   | 42 +++++++++++++++--------
 3 files changed, 35 insertions(+), 17 deletions(-)

diff --git a/content/one-shot-painting-2025-11-08.md b/content/one-shot-painting-2025-11-08.md
index 46a60fa..6374f0d 100644
--- a/content/one-shot-painting-2025-11-08.md
+++ b/content/one-shot-painting-2025-11-08.md
@@ -19,7 +19,7 @@ and pulled together two new gangs for Ramshackle's
 I don't know what it is about me, but I'm flawed in this way, and I'm sure I'm
 not alone. Big projects are fun but they can also be daunting.
 
-![Mini Gang by Ramshackle Games]({static}/images/313A568A-4185-4B91-8AD2-7E2B4A8EF3DC.jpg){. .image-med}
+![Smollockton Scarecrows by Ramshackle Games]({static}/images/313A568A-4185-4B91-8AD2-7E2B4A8EF3DC.jpg){. .image-med}
 
 ## Palate Cleansers FTW
 
diff --git a/themes/vexingworkshop/static/css/main.css b/themes/vexingworkshop/static/css/main.css
index 90641a8..f01af3b 100644
--- a/themes/vexingworkshop/static/css/main.css
+++ b/themes/vexingworkshop/static/css/main.css
@@ -115,7 +115,13 @@ article .post-info .published {
   font-style: italic;
 }
 
-p.image-content .caption {
+figure {
+  margin: 10px 0;
+  text-align: center;
+  width: fit-content;
+}
+
+figure figcaption {
   font-size: 90%;
   font-style: italic;
   text-align: center;
diff --git a/themes/vexingworkshop/static/js/site.js b/themes/vexingworkshop/static/js/site.js
index 0bdcd66..354e866 100644
--- a/themes/vexingworkshop/static/js/site.js
+++ b/themes/vexingworkshop/static/js/site.js
@@ -1,28 +1,40 @@
 function main() {
-  addCaptions();
+  var imageNodes = document.querySelectorAll("img.image-med");
+  var images = [];
+
+  imageNodes.forEach((image) => {
+    images.push(new InteractiveImage(image));
+  });
 }
 
-// Create a class that, when given an element, adds caption based
-// upon the alt text of the image, click events, etc.
+class InteractiveImage {
+  
+  constructor(imageElement) {
+    this.image = imageElement;
 
-function addCaptions() {
-  var images = document.querySelectorAll("img.image-med");
+    this.addCaption();
+    this.addEvents();
+  }
 
-  images.forEach((image) => {
-    var parent = image.parentElement;
-    var target = document.createElement("div");
+  addCaption() {
+    var container = document.createElement("figure");
+    var caption = document.createElement("figcaption");
 
-    parent.setAttribute("class", "image-content");
-    target.setAttribute("class", "caption");
+    caption.appendChild(
+      document.createTextNode(this.image.attributes.alt.value));
 
-    target.appendChild(
-      document.createTextNode(image.attributes.alt.value));
-    parent.appendChild(target);
+    var parent = this.image.parentElement;
+    container.appendChild(this.image);
+    container.appendChild(caption);
 
-    image.addEventListener("click", (event) => {
+    parent.replaceWith(container);
+  }
+
+  addEvents() {
+    this.image.addEventListener("click", (event) => {
       console.log(event.target);
     });
-  });
+  }
 }
 
 addEventListener("DOMContentLoaded", main);
-- 
2.39.5