Image tags for sizing

assets/css/main.css

@@ -337,7 +337,7 @@ footer a {
   content: counter(h2-counter) "." counter(h3-counter) "." counter(h4-counter) "\00a0\00a0";
 }
 
-/* light and dark images */
+/* images */
 
 .dark .img-light {
   display: none !important;
@@ -347,6 +347,41 @@ footer a {
   display: none !important;
 }
 
+.img-small div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-small img {
+  scale: 80%;
+}
+
+.img-full div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.img-full img {
+  width: 100vw !important;
+  max-width: 100vw !important;
+}
+
+.caption-container {
+  display: flex;
+  justify-content: center;
+}
+
+figcaption {
+  color: var(--content-secondary);
+  padding-left: var(--caption-padding);
+  padding-right: var(--caption-padding);
+  font-size: var(--caption-font-size);
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 /* 404 */
 
 .not-found {

assets/css/vars.css

@@ -3,6 +3,8 @@
     --main-padding: 1.4em;
     --main-padding-bottom: 3rem;
 
+    --caption-padding: calc(.25 * var(--main-padding));
+
     /* header settings */
     --header-top-gap: 2rem;
     --header-bottom-gap: 2rem;
@@ -26,6 +28,7 @@
     --hx-font-size: 1.3em;
     --p-font-size: 1em;
     --p-line-height: 1.5em;
+    --caption-font-size: .8em;
 
     /* List indentation */
     --li-indent: 1.5rem;
@@ -68,6 +71,7 @@
     :root {
         --main-width: 750px;
         --header-top-gap: 1rem;
+        --caption-padding: calc(.25 * var(--main-padding));
     }
 }
 
@@ -75,5 +79,6 @@
     :root {
         --header-top-gap: 1rem;
         --social-icons-bottom-margin: 0rem;
+        --caption-padding: calc(2 * var(--main-padding));
     }
 }

layouts/_default/_markup/render-image.html

@@ -1,16 +1,29 @@
+{{/* Split URL at # */}}
 {{ $url := .Destination | safeURL }}
-
-{{ $class := "" }}
 {{ $file_name_array := split $url "#" }}
-{{ $file_name_len := len $file_name_array }}
-{{ $tag := index $file_name_array (sub $file_name_len 1)}}
 
-{{ if eq $tag "dark" }}
-{{ $class = "img-dark" }}
-{{ else if eq $tag "light" }}
-{{ $class = "img-light" }}
+{{/*
+Iterate over all tags, which are in pos 1 to len array - 1,
+and build the img class string as "img-tag1 img-tag2 ..."
+*/}}
+
+{{ $classes := "" }}
+
+{{ range $idx := seq (sub (len $file_name_array) 1) }}
+{{ $tag := index $file_name_array $idx }}
+{{ $classes = printf "%s img-%s" $classes $tag}}
 {{ end }}
 
-<figure class="{{ $class }}">
+{{/* Use the computed classes on the rendered figure */}}
+<figure class="{{ $classes }}">
+
+    <div>
         <img loading="lazy" alt="{{ .Text }}" src=" {{ $url }}">
+    </div>
+
+    {{ with .Title }}
+    <div class="caption-container">
+        <figcaption> {{ . | markdownify}} </figcaption>
+    </div>
+    {{ end }}
 </figure>