From 824e062cfde1a5dbddf3cdc42c517239d1f7a149 Mon Sep 17 00:00:00 2001
From: "max.mehl" <max.mehl@fsfe.org>
Date: Mon, 9 Mar 2020 13:53:41 +0100
Subject: [PATCH] improve dealing with small images

---
 layouts/shortcodes/figure.html | 90 +++++++++++++++++-----------------
 static/css/snap-gallery.css    | 10 ++++
 2 files changed, 56 insertions(+), 44 deletions(-)

diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html
index 5db3b38..3621228 100644
--- a/layouts/shortcodes/figure.html
+++ b/layouts/shortcodes/figure.html
@@ -33,51 +33,53 @@
 {{- end -}}
 
 <figure {{ with .Get "class" }}class="{{.}}"{{ end }}>
-  {{ if (.Get "link") -}}
-    <a href="{{ .Get "link" }}"
-       {{- with .Get "target" }} target="{{ . }}"{{ end -}}
-       {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
-       >
-  {{ else -}}
-    <a href="#{{ $id }}">
-  {{- end -}}
-  <!-- THUMBNAIL -->
-    <img src="{{ $thumb | relURL }}" class="snap-thumb"
-    {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
-    {{- with .Get "title" }} title="{{ . }}"{{ end -}}
-    {{- with .Get "height" }} height="{{ . }}"{{ end -}}
-    {{- with .Get "width" }} width="{{ . }}"{{ end -}}
-     />
-    {{- if or (.Get "caption") (.Get "attr")}}
-      <figcaption>
-        {{- .Get "caption" | markdownify -}}
-        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
-      </figcaption>
-    {{- end }}
-  </a>
-  <!-- FULL IMAGE; HIDDEN -->
-  <div class="snap-lightbox" id="{{ $id }}">
-    <a href="#_" class="snap-lightbox-close"></a>
-    <div class="snap-lightbox-inner">
-      <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
-      <p>
-      {{- if or (.Get "caption") (.Get "attr") -}}
-        {{- .Get "caption" | markdownify -}}
-        {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
-        {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
-        {{- with .Get "attrlink" }}</a>{{- end -}}
+  <div class="snap-wrapper">
+    {{ if (.Get "link") -}}
+      <a href="{{ .Get "link" }}"
+         {{- with .Get "target" }} target="{{ . }}"{{ end -}}
+         {{- with .Get "rel" }} rel="{{ . }}"{{ end -}}
+         >
+    {{ else -}}
+      <a href="#{{ $id }}">
+    {{- end -}}
+    <!-- THUMBNAIL -->
+      <img src="{{ $thumb | relURL }}" class="snap-thumb"
+      {{- with .Get "alt" }} alt="{{ . }}"{{ end -}}
+      {{- with .Get "title" }} title="{{ . }}"{{ end -}}
+      {{- with .Get "height" }} height="{{ . }}"{{ end -}}
+      {{- with .Get "width" }} width="{{ . }}"{{ end -}}
+       />
+      {{- if or (.Get "caption") (.Get "attr")}}
+        <figcaption>
+          {{- .Get "caption" | markdownify -}}
+          {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+        </figcaption>
+      {{- end }}
+    </a>
+    <!-- FULL IMAGE; HIDDEN -->
+    <div class="snap-lightbox" id="{{ $id }}">
+      <a href="#_" class="snap-lightbox-close"></a>
+      <div class="snap-lightbox-inner">
+        <img src="{{ .Get "src" }}" {{ with .Get "alt" }}alt="{{ . }}"{{ end }} />
+        <p>
+        {{- if or (.Get "caption") (.Get "attr") -}}
+          {{- .Get "caption" | markdownify -}}
+          {{- with .Get "attrlink" }} <a href="{{ . }}">{{- end -}}
+          {{- with .Get "attr" }} {{ . | markdownify}}{{ end -}}
+          {{- with .Get "attrlink" }}</a>{{- end -}}
+        {{- end }}
+        </p>
+      </div>
+      <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
+      {{- if .Parent -}}
+        {{- if not (eq $figid 1) -}}
+          <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
+        {{- else -}}
+          <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
+        {{- end -}}
+        <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
+        <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
       {{- end }}
-      </p>
     </div>
-    <a href="#_" class="snap-lightbox-close-button"><i class="snap-lightbox-x"></i></a>
-    {{- if .Parent -}}
-      {{- if not (eq $figid 1) -}}
-        <a href="#{{ $previd }}" class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></a>
-      {{- else -}}
-        <span class="snap-lightbox-prev"><i class="snap-lightbox-arrow"></i></span>
-      {{- end -}}
-      <!-- TODO: Somehow try to identify whether this is the last element in the gallery -->
-      <a href="#{{ $nextid }}" class="snap-lightbox-next"><i class="snap-lightbox-arrow"></i></a>
-    {{- end }}
   </div>
 </figure>
diff --git a/static/css/snap-gallery.css b/static/css/snap-gallery.css
index 75ffbd1..e3a0946 100644
--- a/static/css/snap-gallery.css
+++ b/static/css/snap-gallery.css
@@ -10,7 +10,12 @@ figure {
   margin: 30px auto 40px;
   display: block;
   text-align: center;
+}
+
+/* make box with box-shadow only as large as image */
+.snap-wrapper {
   box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+  display: inline-block;
 }
 
 figure a:hover {
@@ -59,6 +64,11 @@ figure figcaption {
   flex-wrap: wrap;
 }
 
+/* avoid sick effects of inline-block on gallery elements */
+.snap-gallery .snap-wrapper {
+  display: block;
+} 
+
 .snap-gallery figure {
   position: relative;
   width: 30%;