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

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

@@ -2,7 +2,7 @@
import { getLastAlbums } from "@/content/photos/albums"; import { getLastAlbums } from "@/content/photos/albums";
import { getSettings } from "@/content/settings/settings"; import { getSettings } from "@/content/settings/settings";
import CalendarIcon from "@/icons/CalendarIcon.astro"; import CalendarIcon from "@/icons/CalendarIcon.astro";
import { getImageUrl } from "@/lib/images"; import { getImageSize, getImageUrl } from "@/lib/images";
import { getAlbumRoute } from "@/lib/routing"; import { getAlbumRoute } from "@/lib/routing";
import { Image } from "astro:assets"; import { Image } from "astro:assets";
@@ -44,14 +44,17 @@ const size = calculateSizeClasses(albums.amount, lastAlbums.length);
{ lastAlbums.length >= 4 ? ( { 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"> <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) => ( { 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`}> <a href={getAlbumRoute(settings.photo, album)} class={`w-full flex flex-col gap-2`}>
<Image <Image
src={getImageUrl(album.thumbnail.url)} src={getImageUrl(album.thumbnail.url)}
alt={album.title} alt={album.title}
class="flex rounded-2xl shadow-md w-full" class="flex rounded-2xl shadow-md w-full"
width={600} width={imageSize.width}
height={315} height={imageSize.height}
/> />
<h4 class="font-semibold text-[28px]">{album.title}</h4> <h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm"> <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
@@ -59,19 +62,23 @@ const size = calculateSizeClasses(albums.amount, lastAlbums.length);
<div>{album.startDate}</div> <div>{album.startDate}</div>
</div> </div>
</a> </a>
)) } )
}) }
</div> </div>
) : ( ) : (
<div class="flex flex-col lg:flex-row lg:justify-between gap-y-6"> <div class="flex flex-col lg:flex-row lg:justify-between gap-y-6">
{ lastAlbums.map((album) => ( { 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`}> <a href={getAlbumRoute(settings.photo, album)} class={`${size} flex flex-col gap-2`}>
<Image <Image
src={getImageUrl(album.thumbnail.url)} src={getImageUrl(album.thumbnail.url)}
alt={album.title} alt={album.title}
class="flex rounded-2xl shadow-md w-full" class="flex rounded-2xl shadow-md w-full"
width={600} width={imageSize.width}
height={315} height={imageSize.height}
/> />
<h4 class="font-semibold text-[28px]">{album.title}</h4> <h4 class="font-semibold text-[28px]">{album.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm"> <div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
@@ -79,7 +86,9 @@ const size = calculateSizeClasses(albums.amount, lastAlbums.length);
<div>{album.startDate}</div> <div>{album.startDate}</div>
</div> </div>
</a> </a>
)) } )
}) }
</div> </div>
) } ) }
</div> </div>