From 236edb5f9f13b4b216a33f5cf9c6709bc52f10b8 Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@Kunthawats-MacBook-Pro.local>
Date: Wed, 1 Jul 2026 10:24:47 +0700
Subject: [PATCH] Fix blog feature image: use heroImage from frontmatter
 instead of hardcode

---
 src/pages/blog.astro        | 3 +--
 src/pages/blog/[slug].astro | 6 +-----
 2 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/pages/blog.astro b/src/pages/blog.astro
index dc13c0c..d04d465 100644
--- a/src/pages/blog.astro
+++ b/src/pages/blog.astro
@@ -34,13 +34,12 @@ const allCategories = [...new Set(posts.map((p) => p.data.category))].sort();
     <div class="blog-grid" id="blog-grid">
       {posts.map((post) => {
         const fmt = new Intl.DateTimeFormat('th-TH', { day: '2-digit', month: 'short', year: '2-digit' }).format(post.data.pubDate);
-        const imgId = post.id === 'ai-for-sme-start-with-pain' ? 'ai' : post.id === 'marketing-automation-reduce-work' ? 'automation' : post.id === 'sme-website-next-action' ? 'website' : 'marketing';
         return (
           <a class="blog-card liquid-glass liquidGlass-wrapper" href={`/blog/${post.id}/`} data-cat={post.data.category}>
             <div class="liquidGlass-effect" aria-hidden="true"></div>
             <div class="liquidGlass-tint" aria-hidden="true"></div>
             <div class="liquidGlass-shine" aria-hidden="true"></div>
-            <img class="blog-card-img" src={`/images/blog-${imgId}.jpg`} alt={post.data.title} loading="lazy" />
+            <img class="blog-card-img" src={post.data.heroImage || '/images/blog-placeholder.svg'} alt={post.data.title} loading="lazy" />
             <div class="blog-meta">
               <span class="eyebrow">{post.data.category}</span>
               <span class="blog-date eyebrow">{fmt}</span>
diff --git a/src/pages/blog/[slug].astro b/src/pages/blog/[slug].astro
index 39c0d73..e866825 100644
--- a/src/pages/blog/[slug].astro
+++ b/src/pages/blog/[slug].astro
@@ -138,11 +138,7 @@ const faqPageJsonLd = faqPairs.length > 0
     </header>
 
     <div class="blog-feature-image">
-      {['ai-for-sme-start-with-pain', 'marketing-automation-reduce-work', 'sme-website-next-action'].includes(post.id) ? (
-        <img src={`/images/blog-${post.id === 'ai-for-sme-start-with-pain' ? 'ai' : post.id === 'marketing-automation-reduce-work' ? 'automation' : 'website'}.jpg`} alt={post.data.title} />
-      ) : (
-        <img src="/images/blog-marketing.jpg" alt={post.data.title} />
-      )}
+      <img src={post.data.heroImage || '/images/blog-placeholder.svg'} alt={post.data.title} />
     </div>
 
     <div class="blog-article-shell">