convert rendered image and container to figure element

diff --git a/content/one-shot-painting-2025-11-08.md b/content/one-shot-painting-2025-11-08.md
index 46a60fade7bc14734b7b186d9b0d63a1c582b51b..6374f0d0ca79a96e85b7464cd036953ee9cd6380 100644 (file)
--- 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 90641a81dd9eaa84dacb523979572db70304a3e5..f01af3b653f64c0c6615b0a859162919466524b3 100644 (file)
--- 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 0bdcd66b253c7e1d58f2967fdd80f566a0e7dcb0..354e866c9bfd65f907f7bc3b07373b8a720845c2 100644 (file)
--- 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);