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; 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>
<a href="#images" class="lightbox" id={"image-#{image.id}"}> <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> </span>
</a> </a>
</article> </article>
<% end %> <% end %>
</div> </div>

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

@ -40,7 +40,7 @@ defmodule ChiyaWeb.NoteShowLive do
<article> <article>
<a href={"#image-#{image.id}"}> <a href={"#image-#{image.id}"}>
<img <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)} src={ChiyaWeb.Uploaders.NoteImage.url({image.path, image}, :thumb_dithered)}
/> />
</a> </a>
@ -56,7 +56,8 @@ defmodule ChiyaWeb.NoteShowLive do
</p> </p>
<a href="#images" class="lightbox" id={"image-#{image.id}"}> <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> </span>
</a> </a>
</article> </article>