From af3c8c8075deafa5389c6fa1ef1149730fd20679 Mon Sep 17 00:00:00 2001
From: Inhji <johnnie@posteo.de>
Date: Fri, 31 Mar 2023 17:30:24 +0200
Subject: [PATCH] lazyload lightbox images

---
 assets/css/lightbox.css                            | 5 +++++
 lib/chiya_web/controllers/page_html/note.html.heex | 4 +++-
 lib/chiya_web/live/note_show_live.ex               | 5 +++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/assets/css/lightbox.css b/assets/css/lightbox.css
index c2754f9..8366b1a 100644
--- a/assets/css/lightbox.css
+++ b/assets/css/lightbox.css
@@ -35,3 +35,8 @@
   background-size: contain;
 }
 
+.lightbox span img {
+  width: 75%;
+  margin: 0 auto;
+}
+
diff --git a/lib/chiya_web/controllers/page_html/note.html.heex b/lib/chiya_web/controllers/page_html/note.html.heex
index 3874eb3..d9a91ee 100644
--- a/lib/chiya_web/controllers/page_html/note.html.heex
+++ b/lib/chiya_web/controllers/page_html/note.html.heex
@@ -26,9 +26,11 @@
               />
             </a>
             <a href="#images" class="lightbox" id={"image-#{image.id}"}>
-              <span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
+              <span>
+                <img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} loading="lazy" />
               </span>
             </a>
+
           </article>
         <% end %>
       </div>
diff --git a/lib/chiya_web/live/note_show_live.ex b/lib/chiya_web/live/note_show_live.ex
index 6ca17d3..3189156 100644
--- a/lib/chiya_web/live/note_show_live.ex
+++ b/lib/chiya_web/live/note_show_live.ex
@@ -40,7 +40,7 @@ defmodule ChiyaWeb.NoteShowLive do
           <article>
             <a href={"#image-#{image.id}"}>
               <img
-                class="rounded-lg w-28 "
+                class="rounded-lg border border-theme-dim w-28"
                 src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
               />
             </a>
@@ -56,7 +56,8 @@ defmodule ChiyaWeb.NoteShowLive do
             </p>
 
             <a href="#images" class="lightbox" id={"image-#{image.id}"}>
-              <span style={"background-image: url('#{ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)}')"}>
+              <span>
+                <img src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :full_dithered)} />
               </span>
             </a>
           </article>