itsfinniii/website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix thumbnail for Last Albums

Browse Source
This commit is contained in:
itsfinniii
2026-04-05 22:49:17 +02:00
parent d39a98a42f
commit 07d2c8628f
1 changed files with 42 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
astro/src/components/web/LastAlbums.astro
View File

@@ -2,7 +2,7 @@
import { getLastAlbums } from "@/content/photos/albums";
import { getSettings } from "@/content/settings/settings";
import CalendarIcon from "@/icons/CalendarIcon.astro";
import { getImageUrl } from "@/lib/images";
import { getImageSize, getImageUrl } from "@/lib/images";
import { getAlbumRoute } from "@/lib/routing";
import { Image } from "astro:assets";
@@ -44,42 +44,51 @@ const size = calculateSizeClasses(albums.amount, lastAlbums.length);
{ lastAlbums.length >= 4 ? (
<div class="grid lg:grid-cols-2 lg:grid-rows-2 grid-cols-1 grid-rows-4 gap-x-10 gap-y-8">
{ lastAlbums.map((album) => (
<a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
<Image
src={getImageUrl(album.thumbnail.url)}
alt={album.title}
class="flex rounded-2xl shadow-md w-full"
width={600}
height={315}
/>
<h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{album.startDate}</div>
</div>
</a>
)) }
{ lastAlbums.map((album) => {
const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);
return (
<a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
<Image
src={getImageUrl(album.thumbnail.url)}
alt={album.title}
class="flex rounded-2xl shadow-md w-full"
width={imageSize.width}
height={imageSize.height}
/>
<h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{album.startDate}</div>
</div>
</a>
)
}) }
</div>
) : (
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
{ lastAlbums.map((album) => (
<a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
<Image
src={getImageUrl(album.thumbnail.url)}
alt={album.title}
class="flex rounded-2xl shadow-md w-full"
width={600}
height={315}
/>
<h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{album.startDate}</div>
</div>
</a>
)) }
{ lastAlbums.map((album) => {
const imageSize = getImageSize(album.thumbnail.width, album.thumbnail.height, 0.5);
return (
<a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
<Image
src={getImageUrl(album.thumbnail.url)}
alt={album.title}
class="flex rounded-2xl shadow-md w-full"
width={imageSize.width}
height={imageSize.height}
/>
<h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{album.startDate}</div>
</div>
</a>
)
}) }
</div>
) }
</div>