From: signal9 <adam@vexingworkshop.com>
Date: Mon, 10 Nov 2025 16:07:28 +0000 (-0700)
Subject: start to add nicer handling to images
X-Git-Url: https://git.vexinglabs.com/?a=commitdiff_plain;h=32315b181f560a30d70ba52e73a511ff04bba9bb;p=vexingworkshop.git

start to add nicer handling to images
---

diff --git a/pelicanconf.py b/pelicanconf.py
index 7abdcd9..07cea59 100644
--- a/pelicanconf.py
+++ b/pelicanconf.py
@@ -1,6 +1,5 @@
 AUTHOR = 'Adam'
 SITENAME = 'Vex<wbr>ing Work<wbr>shop'
-#SITESUBTITLE = 'From The Workshop'
 SITEURL = "https://vexingworkshop.com"
 
 PATH = "content"
@@ -33,6 +32,10 @@ SOCIAL = (
     ("Mastodon", "https://hackers.town/@signal9@masto.hackers.town"),
 )
 
+SCRIPTS = (
+    ("site.js"),
+)
+
 DEFAULT_PAGINATION = 10
 DISPLAY_PAGES_ON_MENU = True
 DISPLAY_CATEGORIES_ON_MENU = False
diff --git a/themes/vexingworkshop/static/css/main.css b/themes/vexingworkshop/static/css/main.css
index 411a078..90641a8 100644
--- a/themes/vexingworkshop/static/css/main.css
+++ b/themes/vexingworkshop/static/css/main.css
@@ -115,6 +115,12 @@ article .post-info .published {
   font-style: italic;
 }
 
+p.image-content .caption {
+  font-size: 90%;
+  font-style: italic;
+  text-align: center;
+}
+
 article img {
   margin: 10px;
   box-shadow: 10px 10px 10px gray;
diff --git a/themes/vexingworkshop/static/js/site.js b/themes/vexingworkshop/static/js/site.js
new file mode 100644
index 0000000..0bdcd66
--- /dev/null
+++ b/themes/vexingworkshop/static/js/site.js
@@ -0,0 +1,28 @@
+function main() {
+  addCaptions();
+}
+
+// Create a class that, when given an element, adds caption based
+// upon the alt text of the image, click events, etc.
+
+function addCaptions() {
+  var images = document.querySelectorAll("img.image-med");
+
+  images.forEach((image) => {
+    var parent = image.parentElement;
+    var target = document.createElement("div");
+
+    parent.setAttribute("class", "image-content");
+    target.setAttribute("class", "caption");
+
+    target.appendChild(
+      document.createTextNode(image.attributes.alt.value));
+    parent.appendChild(target);
+
+    image.addEventListener("click", (event) => {
+      console.log(event.target);
+    });
+  });
+}
+
+addEventListener("DOMContentLoaded", main);
diff --git a/themes/vexingworkshop/templates/base.html b/themes/vexingworkshop/templates/base.html
index 310eb45..55ea4c8 100644
--- a/themes/vexingworkshop/templates/base.html
+++ b/themes/vexingworkshop/templates/base.html
@@ -82,5 +82,8 @@
 
     {% include 'analytics.html' %}
     {% include 'disqus_script.html' %}
+    {% for src in SCRIPTS %}
+    <script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/js/{{ src }}"></script>
+    {% endfor %}
   </body>
 </html>