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>

8
astro/src/components/projects/ProjectPost.astro
View File

@@ -1,6 +1,6 @@
---
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { getImageSize, getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { getTypographyClasses } from '@/styles/markdownClasses';
import { Image } from 'astro:assets';
@@ -10,6 +10,8 @@ interface Props {
}
const { project } = Astro.props;
const imageSize = getImageSize(project.searchEngine.thumbnail.width, project.searchEngine.thumbnail.height, 1);
---
<div
@@ -29,8 +31,8 @@ const { project } = Astro.props;
<div class="w-full h-full rounded-2xl shadow-md object-cover">
<Image
src={getImageUrl(project.searchEngine.thumbnail.url)}
width="1200"
height="630"
width={imageSize.width}
height={imageSize.height}
alt={project.title}
class="rounded-2xl"
/>