website/astro/src/components/photos/Album.astro

---
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 "@/components/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>