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

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

@@ -5,7 +5,8 @@ import { markdownToHtml } from '@/lib/markdown';
import { Image } from 'astro:assets'; import { Image } from 'astro:assets';
import { getProjectRoute } from '@/lib/routing'; import { getProjectRoute } from '@/lib/routing';
import CalendarIcon from '@/icons/CalendarIcon.astro'; import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images'; import { getImageSize, getImageUrl } from '@/lib/images';
import { promise } from 'astro:schema';
interface Props { interface Props {
page: ProjectIndex; page: ProjectIndex;
@@ -30,14 +31,17 @@ const projects = await getAllPaginatedProjects(settings, pageNumber);
</div> </div>
<div class="grid grid-cols-2 gap-6"> <div class="grid grid-cols-2 gap-6">
{ projects.map((project) => ( { 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`}> <a href={getProjectRoute(settings.project, project)} class={`flex flex-col gap-2`}>
<Image <Image
src={getImageUrl(project.searchEngine.thumbnail.url)} src={getImageUrl(project.searchEngine.thumbnail.url)}
alt={project.title} alt={project.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}
/> />
<div class="flex flex-col gap-1"> <div class="flex flex-col gap-1">
<h4 class="font-semibold text-[28px]">{project.title}</h4> <h4 class="font-semibold text-[28px]">{project.title}</h4>
@@ -47,6 +51,7 @@ const projects = await getAllPaginatedProjects(settings, pageNumber);
</div> </div>
</div> </div>
</a> </a>
)) } )
}) }
</div> </div>
</div> </div>

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

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