lazyload lightbox images
This commit is contained in:
parent
dbed7df6fd
commit
af3c8c8075
3 changed files with 11 additions and 3 deletions
|
@ -35,3 +35,8 @@
|
||||||
background-size: contain;
|
background-size: contain;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.lightbox span img {
|
||||||
|
width: 75%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue