From fa010e1807e046b1a2048d1843f3ed46ba9ed64f Mon Sep 17 00:00:00 2001
From: Luca Beltrame <lbeltrame@kde.org>
Date: Wed, 6 Jan 2021 10:23:28 +0100
Subject: [PATCH] Move to leafbox

---
 layouts/shortcodes/imgthumb.html | 45 +++++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 15 deletions(-)

diff --git a/layouts/shortcodes/imgthumb.html b/layouts/shortcodes/imgthumb.html
index 40aedee..c9ca77e 100644
--- a/layouts/shortcodes/imgthumb.html
+++ b/layouts/shortcodes/imgthumb.html
@@ -5,21 +5,43 @@
 {{ $imagethumbnail := $image.Resize $options }}
 
 <figure{{ with .Get "class" }} class="{{ . }}"{{ end }}>
-        <a href="#{{ $image.RelPermalink | md5 }}-lightbox"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}>
+
+    <a href="#{{ $image.RelPermalink | md5 }}-img">
     <img src="{{ $imagethumbnail.RelPermalink }}"
-         {{- if or (.Get "alt") (.Get "caption") }}
+    {{- if or (.Get "alt") (.Get "caption") }}
+    alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
+    {{- end -}}
+    />
+    </a>
+
+    <figure id="{{ $image.RelPermalink | md5 }}-img" class="lbox fade">
+        <img src="{{ $image.RelPermalink }}"  {{- if or (.Get "alt") (.Get "caption") }}
          alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
          {{- end -}}
-         {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-         {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-    /> <!-- Closing img tag -->
-    </a>
-    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+         />
+         <a href="#_"></a>
+        {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
         <figcaption>
+            {{ with (.Get "title") -}}
+                <h5>{{ . }}</h5>
+            {{- end -}}
+            {{- if or (.Get "caption") (.Get "attr") -}}<p class="f5 center">
+                {{- .Get "caption" | markdownify -}}
+                {{- with .Get "attrlink" }}
+                    <a href="{{ . }}">
+                {{- end -}}
+                {{- .Get "attr" | markdownify -}}
+                {{- if .Get "attrlink" }}</a>{{ end }}</p>
+            {{- end }}
+        </figcaption>
+    {{- end }}
+    </figure>
+    {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}}
+        <figcaption class="center">
             {{ with (.Get "title") -}}
                 <h4>{{ . }}</h4>
             {{- end -}}
-            {{- if or (.Get "caption") (.Get "attr") -}}<p>
+            {{- if or (.Get "caption") (.Get "attr") -}}<p class="f5 lh-copy center">
                 {{- .Get "caption" | markdownify -}}
                 {{- with .Get "attrlink" }}
                     <a href="{{ . }}">
@@ -30,11 +52,4 @@
         </figcaption>
     {{- end }}
 </figure>
-<a href="#_" class="lightbox" id="{{ $image.RelPermalink | md5 }}-lightbox">
-    <img src="{{ $image.RelPermalink }}"
-    {{- if or (.Get "alt") (.Get "caption") }}
-         alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}"
-         {{- end -}}
-    >
-</a>