56 lines
1.7 KiB
Plaintext
56 lines
1.7 KiB
Plaintext
---
|
|
import { getAlbumRoute, getPhotoRoute } from '@/lib/routing';
|
|
import { AlbumPhotos } from './Album.tsx';
|
|
import { getImageSize, getImageUrl } from '@/lib/images';
|
|
import { getSettings } from '@/content/settings/settings';
|
|
import Pagination from '../common/Pagination.astro';
|
|
|
|
interface Props {
|
|
page: PhotoAlbumPage;
|
|
}
|
|
|
|
const settings = await getSettings();
|
|
const album = Astro.props.page;
|
|
const pageNumber = Astro.props.page.pageNumber;
|
|
|
|
const totalAlbumPages = Math.ceil(album.photos.length / settings.photo.album.perPage);
|
|
const sliceStartNumber = (pageNumber - 1) * settings.photo.album.perPage;
|
|
const sliceEndNumber = pageNumber * settings.photo.album.perPage;
|
|
|
|
const remappedPhotos: PhotoAlbumGalleryItem[] = [];
|
|
|
|
album.photos.slice(sliceStartNumber, sliceEndNumber).forEach((photo) => {
|
|
const resizedImage = getImageSize(photo.photo.width, photo.photo.height, 0.756);
|
|
|
|
remappedPhotos.push({
|
|
id: photo.id,
|
|
url: getPhotoRoute(settings.photo, album, photo),
|
|
photo: {
|
|
url: getImageUrl(photo.photo.url),
|
|
width: resizedImage.width,
|
|
height: resizedImage.height
|
|
},
|
|
text: photo.text
|
|
});
|
|
});
|
|
---
|
|
|
|
<div
|
|
id={`album-${album.id}`}
|
|
class="flex lg:flex-col flex-col py-12 px-12 lg:container mx-auto gap-y-10 gap-x-18 w-full"
|
|
>
|
|
<div class="flex flex-col gap-7">
|
|
<h1 class="text-5xl font-bold">{album.title}</h1>
|
|
|
|
<AlbumPhotos client:only photos={remappedPhotos} />
|
|
|
|
{ totalAlbumPages > 1 && (
|
|
<Pagination
|
|
page={pageNumber}
|
|
totalPages={totalAlbumPages}
|
|
urlTemplate={getAlbumRoute(settings.photo, album)}
|
|
/>
|
|
) }
|
|
</div>
|
|
</div>
|