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

Fix image size in Blogs

Browse Source
This commit is contained in:
itsfinniii
2026-04-05 22:39:35 +02:00
parent 36004bddb0
commit a0473094cf
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/blogs/BlogIndex.astro
View File

@@ -2,7 +2,7 @@
import { getAllPaginatedBlogs } from '@/content/blogs/blogs';
import { getSettings } from '@/content/settings/settings';
import CalendarIcon from '@/icons/CalendarIcon.astro';
import { getImageUrl } from '@/lib/images';
import { getImageSize, getImageUrl } from '@/lib/images';
import { markdownToHtml } from '@/lib/markdown';
import { getBlogRoute } from '@/lib/routing';
import { Image } from 'astro:assets';
@@ -30,23 +30,28 @@ const blogs = await getAllPaginatedBlogs(settings, pageNumber);
</div>
<div class="grid grid-cols-2 gap-6">
{ blogs.map((blog) => (
<a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
alt={blog.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]">{blog.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{blog.date}</div>
{ blogs.map((blog) => {
const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 0.5);
return (
<a href={getBlogRoute(settings.blog, blog)} class={`flex flex-col gap-2`}>
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
alt={blog.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]">{blog.title}</h4>
<div class="flex flex-row items-center gap-1.5 text-neutral-900 text-sm">
<CalendarIcon width={20} height={20} />
<div>{blog.date}</div>
</div>
</div>
</div>
</a>
)) }
</a>
)
}) }
</div>
</div>

8
astro/src/components/blogs/BlogPost.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 { blog } = Astro.props;
const imageSize = getImageSize(blog.searchEngine.thumbnail.width, blog.searchEngine.thumbnail.height, 1);
---
<div
@@ -29,8 +31,8 @@ const { blog } = Astro.props;
<div class="w-full h-full rounded-2xl shadow-md object-cover">
<Image
src={getImageUrl(blog.searchEngine.thumbnail.url)}
width="1200"
height="630"
width={imageSize.width}
height={imageSize.height}
alt={blog.title}
class="rounded-2xl"
/>