kunthawat/emdash-blog-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show featured_image on posts list page

Browse Source 
Use featured_image.src/alt instead of featuredImage. Add post-image CSS.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Kunthawat Greethong
2026-04-30 10:31:16 +07:00
parent 3c07db0406
commit 1298e3c018
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/pages/posts/index.astro
View File

@@ -52,6 +52,11 @@ const formatDate = (date: Date) =>
{postsWithTags.map(({ post, tags, bylines }) => ( {postsWithTags.map(({ post, tags, bylines }) => (
<article class="post-item"> <article class="post-item">
<a href={`/posts/${post.id}`} class="post-link"> <a href={`/posts/${post.id}`} class="post-link">
{post.data.featured_image && (
<div class="post-image">
<img src={post.data.featured_image.src} alt={post.data.featured_image.alt} />
</div>
)}
<div class="post-meta"> <div class="post-meta">
{bylines.length > 0 && ( {bylines.length > 0 && (
<> <>
@@ -146,6 +151,19 @@ const formatDate = (date: Date) =>
border-bottom: 1px solid var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle);
} }
.post-image {
margin-bottom: var(--spacing-4);
border-radius: var(--radius-lg);
overflow: hidden;
}
.post-image img {
width: 100%;
height: auto;
aspect-ratio: 16 / 10;
object-fit: cover;
}
.post-item:first-child { .post-item:first-child {
padding-top: 0; padding-top: 0;
} }