inhji/chiya
inhji/chiya
1
1
Fork 0
Code Issues 8 Pull requests 9 Activity

lazyload lightbox images

Browse source
This commit is contained in:
Inhji 2023-03-31 17:30:24 +02:00
parent dbed7df6fd
commit af3c8c8075
3 changed files with 11 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
assets/css/lightbox.css
View file

@ -35,3 +35,8 @@
background-size: contain;
}
.lightbox span img {
width: 75%;
margin: 0 auto;
}

4
lib/chiya_web/controllers/page_html/note.html.heex
View file

@ -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>

5
lib/chiya_web/live/note_show_live.ex
View file

@ -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>