mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: Add aspect ratio support to imgproxy loader and apply 16:9 aspect ratio to featured images across blog posts and recent posts.

Browse Source
This commit is contained in:
Marc Mintel
2026-02-22 17:30:30 +01:00
parent 70984b9021
commit fb2354d2cc
4 changed files with 28 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/blog/PostNavigation.tsx
View File

@@ -31,7 +31,7 @@ export default function PostNavigation({
{prev.frontmatter.featuredImage ? (
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
style={{ backgroundImage: `url(${prev.frontmatter.featuredImage})` }}
style={{ backgroundImage: `url(${prev.frontmatter.featuredImage}?ar=16:9)` }}
/>
) : (
<div className="absolute inset-0 bg-neutral-100" />
@@ -82,7 +82,7 @@ export default function PostNavigation({
{next.frontmatter.featuredImage ? (
<div
className="absolute inset-0 bg-cover bg-center transition-transform duration-700 group-hover:scale-110"
style={{ backgroundImage: `url(${next.frontmatter.featuredImage})` }}
style={{ backgroundImage: `url(${next.frontmatter.featuredImage}?ar=16:9)` }}
/>
) : (
<div className="absolute inset-0 bg-neutral-100" />

2
components/home/RecentPosts.tsx
View File

@@ -43,7 +43,7 @@ export default async function RecentPosts({ locale }: RecentPostsProps) {
{post.frontmatter.featuredImage && (
<div className="relative h-64 overflow-hidden">
<Image
src={post.frontmatter.featuredImage}
src={`${post.frontmatter.featuredImage}?ar=16:9`}
alt={post.frontmatter.title}
fill
className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"