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

Fix the image size for Projects

Browse Source
This commit is contained in:
itsfinniii
2026-04-05 22:41:43 +02:00
parent a0473094cf
commit 525422105c
2 changed files with 28 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
astro/src/components/projects/ProjectIndex.astro
View File

@@ -5,7 +5,8 @@ import { markdownToHtml } from '@/lib/markdown';
import { Image } from 'astro:assets';
import { getProjectRoute } from '@/lib/routing';
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { getImageSize, getImageUrl } from '@/lib/images';
import { promise } from 'astro:schema';
interface Props {
page: ProjectIndex;
@@ -30,23 +31,27 @@ const projects = await getAllPaginatedProjects(settings, pageNumber);
</div>
<div class="grid grid-cols-2 gap-6">
{ projects.map((project) => (
<a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
<Image
src={getImageUrl(project.searchEngine.thumbnail.url)}
alt={project.title}
class="flex rounded-2xl shadow-md w-full"
width={600}
height={315}
/>
<div class="flex flex-col gap-1">
<h4 class="font-semibold text-[28px]">{project.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{project.date}</div>
{ projects.map((project) => {
const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 0.5);
return (
<a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
<Image
src={getImageUrl(project.searchEngine.thumbnail.url)}
alt={project.title}
class="flex rounded-2xl shadow-md w-full"
width={imageSize.width}
height={imageSize.height}
/>
<div class="flex flex-col gap-1">
<h4 class="font-semibold text-[28px]">{project.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{project.date}</div>
</div>
</div>
</div>
</a>
)) }
</a>
)
}) }
</div>
</div>