Merge pull request 'Fix blog cover images on blog cards' (#3) from fix/blog-card-cover-images into main

Reviewed-on: #3
2026-07-18 01:26:24 +02:00
parent 589656e09b c0c3658628
commit 6552273ec0
1 changed files with 13 additions and 1 deletions
@@ -16,8 +16,20 @@ export function BlogCard({ blog, index }: { blog: BlogPostSummary; index?: numbe
  return (
    <Link
      href={`/blogs/${blog.slug}`}
-      className="group flex h-full flex-col rounded-[1.75rem] border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
+      className="group flex h-full flex-col overflow-hidden rounded-[1.75rem] border border-white/10 bg-white/[0.03] p-5 transition-all duration-300 hover:-translate-y-1 hover:border-white/20 hover:bg-white/[0.05]"
    >
+      {blog.coverImageUrl ? (
+        <div className="mb-5 overflow-hidden rounded-[1.25rem] border border-white/10 bg-black/30">
+          {/* External CMS image URLs are stored directly, so a plain img is the least brittle option here. */}
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            src={blog.coverImageUrl}
+            alt={blog.title}
+            className="h-48 w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+          />
+        </div>
+      ) : null}
+
      <div className="mb-5 flex items-start justify-between gap-4">
        <div className="space-y-2">
          {index !== undefined ? (