Added album remarks, lazy loading images

This commit is contained in:
2025-11-22 16:03:50 +13:00
parent 33ead9d968
commit ff486c01e3
4 changed files with 6 additions and 2 deletions

View File

@@ -11,6 +11,7 @@ const pb = await authPB()
<img <img
src={pb.files.getURL(a, a.images[0])} src={pb.files.getURL(a, a.images[0])}
class="flex-1 md:flex-2 w-full h-full object-contain" class="flex-1 md:flex-2 w-full h-full object-contain"
loading="lazy"
alt={a.title} alt={a.title}
/> />
</a> </a>

View File

@@ -102,6 +102,7 @@ const photoLinks = await Promise.all(
<img <img
src={photoLinks[i]} src={photoLinks[i]}
class="w-full h-full object-contain" class="w-full h-full object-contain"
loading="lazy"
alt={photo.title || 'Photo'} alt={photo.title || 'Photo'}
/> />
</div> </div>

View File

@@ -16,7 +16,9 @@ const images = await Promise.all(
<div slot="sidebar"> <div slot="sidebar">
<h1>{album.title}</h1> <h1>{album.title}</h1>
<p>{album.date}</p> <p>{album.date}</p>
<p>{album.location}</p> <p>{album.location}</p><br>
<Fragment set:html={album.remarks}/>
</div> </div>
<div slot="content"> <div slot="content">

View File

@@ -37,7 +37,7 @@ const albums = await pb.collection('albums').getFullList({
</div> </div>
<div slot="content"> <div slot="content">
<div class="swiper-album w-full h-[80vh] overflow-hidden"> <div class="swiper-album w-full h-[90vh] overflow-hidden">
<div class="swiper-wrapper"> <div class="swiper-wrapper">
{ albums.map(a => <AlbumCard a={a}/> ) } { albums.map(a => <AlbumCard a={a}/> ) }
</div> </div>