From 9de73221c40a3e993ebb55004a89006a794342f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Fri, 25 Aug 2023 23:51:18 +0200
Subject: [PATCH] images: ignore empty <p>s generated by Hugo #576

---
 layouts/partials/shortcodes/image.html | 16 ++++-----
 static/css/theme.css                   | 46 +++++++++++++++-----------
 2 files changed, 33 insertions(+), 29 deletions(-)

diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
index 96248b4348..845fdf0414 100644
--- a/layouts/partials/shortcodes/image.html
+++ b/layouts/partials/shortcodes/image.html
@@ -53,10 +53,10 @@
     {{- end }}
   {{- end }}
   {{- with $dest_url.Query.Get "height" }}
-    {{ $height = . }}
+    {{- $height = . }}
   {{- end }}
   {{- with $dest_url.Query.Get "width" }}
-    {{ $width = . }}
+    {{- $width = . }}
   {{- end }}
 {{- end }}
 {{- $classes := slice }}
@@ -65,13 +65,11 @@
   {{- $classes = $classes | append $c }}
 {{- end }}
 {{- $id := cond (or (eq .id nil) (eq .id "")) (partial "make-random-md5.hugo" $page) .id }}
-{{- if $effects.lightbox }}
+{{- if $effects.lightbox -}}
 <a href="#image-{{ $id }}" class="lightbox-link">
-{{- end }}
-<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }}{{ if len ($classes) }} class="{{ delimit $classes " " }}"{{ end }} style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
-{{- if $effects.lightbox }}
-</a>
-<a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}">
-<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image" loading="lazy">
+{{- end -}}
+<img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="figure-image {{ delimit $classes " " }}" style="height: {{ $height }}; width: {{ $width }};" loading="lazy">
+{{- if $effects.lightbox -}}
 </a>
+<a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}"><img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image" loading="lazy"></a>
 {{- end }}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 9fddfabdfe..3c987e98e9 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -563,33 +563,39 @@ div.box > .box-content {
     padding-right: 1rem;
 }
 
-#body table th > :first-child,
-#body table th > :first-child :first-child,
-#body table td > :first-child,
-#body table td > :first-child :first-child,
-#body div.box > .box-content > :first-child,
-#body div.box > .box-content > :first-child :first-child,
-#body div.expand > .expand-content-text > :first-child,
-#body div.expand > .expand-content-text > :first-child :first-child,
-#body div.tab-content > .tab-content-text > :first-child,
-#body div.tab-content > .tab-content-text > :first-child :first-child {
+p:empty {
+    /* in case of image render hook, Hugo may generate empty <p>s that we want to ignore */
+    display: none;
+}
+
+/* in case of image render hook, Hugo may generate empty <p>s that we want to ignore aswell, so a simple :first-child or :last-child is not enough */
+#body table th > :nth-child(1 of :not(:empty)),
+#body table th > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#body table td > :nth-child(1 of :not(:empty)),
+#body table td > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#body div.box > .box-content > :nth-child(1 of :not(:empty)),
+#body div.box > .box-content > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)),
+#body div.expand > .expand-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)),
+#body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)),
+#body div.tab-content > .tab-content-text > :nth-child(1 of :not(:empty)) :nth-child(1 of :not(:empty)) {
     margin-top: 0;
 }
 
-#body table th > :last-child,
-#body table th > :last-child :last-child,
+#body table th > :nth-last-child(1 of :not(:empty)),
+#body table th > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #body table th > div.highlight:last-child pre,
-#body table td > :last-child,
-#body table td > :last-child :last-child,
+#body table td > :nth-last-child(1 of :not(:empty)),
+#body table td > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #body table td > div:last-child pre,
-#body div.box > .box-content > :last-child,
-#body div.box > .box-content > :last-child :last-child,
+#body div.box > .box-content > :nth-last-child(1 of :not(:empty)),
+#body div.box > .box-content > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #body div.box > .box-content > div:last-child pre,
-#body div.expand > .expand-content-text > :last-child,
-#body div.expand > .expand-content-text > :last-child :last-child,
+#body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)),
+#body div.expand > .expand-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #body div.expand > .expand-content-text > div:last-child pre,
-#body div.tab-content > .tab-content-text > :last-child,
-#body div.tab-content > .tab-content-text > :last-child :last-child,
+#body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)),
+#body div.tab-content > .tab-content-text > :nth-last-child(1 of :not(:empty)) :nth-last-child(1 of :not(:empty)),
 #body div.tab-content > .tab-content-text > div:last-child pre {
     margin-bottom: 0;
 }