(WIP) Setting up images in Hugo

Author: Andrei-Constantin-Programmer

content/posts/agentic-workflow/agentic-workflow-27-june.png

@@ -0,0 +1,12 @@
++++
+date = '2025-06-27'
+draft = true
+title = 'Agentic Workflow'
+tags = ["AI", "LLM", "Agent", "IBM", "Watsonx", "Granite", "Llama", "LangFlow", "Architecture"]
++++
+
+## 1. Overall Workflow
+{{< figure-wide src="agentic-workflow-27-june.png" alt="Agentic workflow diagram" >}}
+
+
+## TL;DR

content/posts/agentic-workflow/index.md

@@ -36,3 +36,12 @@ enableInlineShortcodes = true
   url = "/team"
   weight = 4
 
+[params.assets]
+  customCSS = [
+    "https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css",
+    "css/glightbox-custom.css"
+    ]
+  customJS  = [
+    "https://cdn.jsdelivr.net/npm/glightbox/dist/js/glightbox.min.js",
+    "js/init-glightbox.js"
+]

hugo.toml

@@ -0,0 +1,22 @@
+{{ $src := .Get "src" }}
+{{ $alt := .Get "alt" | default "" }}
+{{ $img := .Page.Resources.GetMatch $src }}
+
+{{ if $img }}
+  <div style="
+    position: relative;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 70vw;
+    max-width: 1800px;
+    margin: 2rem 0;
+  ">
+    <a href="{{ $img.RelPermalink }}" class="glightbox">
+      <img src="{{ $img.RelPermalink }}"
+          alt="{{ $alt }}"
+          style="width: 100%; height: auto; display: block;">
+    </a>
+  </div>
+{{ else }}
+  <p style="color: red;">Image not found: {{ $src }}</p>
+{{ end }}

layouts/shortcodes/figure-wide.html

@@ -0,0 +1,7 @@
+.glightbox-clean .gcontainer {
+  background-color: #fff !important;
+}
+
+.glightbox-clean.glightbox-dark .gcontainer {
+  background-color: #000 !important;
+}

static/css/glightbox-custom.css

@@ -0,0 +1,14 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const isDark = document.body.classList.contains("dark");
+
+  const lightbox = GLightbox({
+    onOpen: () => {
+      setTimeout(() => {
+        const gcontainer = document.querySelector('.glightbox-clean .gcontainer');
+        if (gcontainer) {
+          gcontainer.style.backgroundColor = isDark ? '#000' : '#fff';
+        }
+      }, 50);
+    }
+  });
+});