start to add nicer handling to images

diff --git a/pelicanconf.py b/pelicanconf.py
index 7abdcd95310ef422a5709b335857c3e1507cee81..07cea59bef65ce471f02d088aa60b3ef1f0854e2 100644 (file)
--- 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 411a078703f3e086429b2ae1bea1dbda62d21996..90641a81dd9eaa84dacb523979572db70304a3e5 100644 (file)
--- 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 (file)
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 310eb454126483ffb8cecded6ea8c402911be6a6..55ea4c8ba7a76e6415c737d892192415e9d7792c 100644 (file)
--- 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>