From 82d3a9aabf88d47fb1e2e02b4b6056cdf53462fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=B6ren=20Weber?= <mail@soeren-weber.de>
Date: Sat, 26 Aug 2023 22:41:07 +0200
Subject: [PATCH] images: apply image effects to lightbox images #631

---
 layouts/partials/shortcodes/image.html |  2 +-
 static/css/theme.css                   | 11 ++++++-----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/layouts/partials/shortcodes/image.html b/layouts/partials/shortcodes/image.html
index 845fdf0414..6d8e549369 100644
--- a/layouts/partials/shortcodes/image.html
+++ b/layouts/partials/shortcodes/image.html
@@ -71,5 +71,5 @@
 <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>
+<a href="javascript:history.back();" class="lightbox-back" id="image-{{ $id }}"><img src="{{ $url | safeURL }}" alt="{{ $alt }}"{{ with $title }} title="{{ . }}"{{ end }} class="lightbox-image {{ delimit $classes " " }}" loading="lazy"></a>
 {{- end }}
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 3c987e98e9..d6617887d3 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -330,25 +330,26 @@ dd {
     text-align: center;
 }
 
-#body img.left {
+#body img:not(.lightbox-image).left {
     margin-left: 0;
 }
 
-#body img.right {
+#body img:not(.lightbox-image).right {
     margin-right: 0;
 }
 
-#body img.border,
+#body img:not(.lightbox-image).border,
 #body .video-container.border {
+    background-clip: padding-box;
     border: 1px solid rgba( 134, 134, 134, .333 );
 }
 
-#body img.shadow,
+#body img:not(.lightbox-image).shadow,
 #body .video-container.shadow {
     box-shadow: 0 10px 30px rgba( 176, 176, 176, .666 );
 }
 
-#body img.inline {
+#body img:not(.lightbox-image).inline {
     display: inline !important;
     margin: 0 !important;
     vertical-align: bottom;