localadministrator/avbeat-com
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(article): editorial standard — cap featured image at 480px (mirror of BB)

Browse Source 
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
ops-bot
2026-06-04 14:56:26 +00:00
parent 9fa69ef74e
commit c959a5f8f7
2 changed files with 12 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/articles/[slug]/ArticleDetailClient.tsx
View File

@@ -341,17 +341,17 @@ export default function ArticleDetailClient({ article, relatedArticles, relatedF
</div> </div>
</div> </div>
{/* Featured Image */} {/* Featured Image — editorial standard: cap at 480px high. */}
<div className="mb-8 overflow-hidden rounded-sm"> <figure className="mb-8 overflow-hidden rounded-sm bg-[#F1F5F9] flex items-center justify-center" style={{maxHeight: 480}}>
<AppImage <AppImage
src={article.image} src={article.image}
alt={article.alt} alt={article.alt}
width={800} width={800}
height={450} height={450}
className="w-full h-auto object-cover" className="max-h-[480px] w-auto max-w-full object-contain"
priority priority
/> />
</div> </figure>
{/* Article Body */} {/* Article Body */}
{/* DO NOT OVERRIDE — article body prose styles */} {/* DO NOT OVERRIDE — article body prose styles */}

12
src/app/news/[slug]/NewsArticleDetailClient.tsx
View File

@@ -442,17 +442,21 @@ export default function NewsArticleDetailClient({
</div> </div>
</div> </div>
{/* Featured Image */} {/* Featured Image — editorial standard:
<div className="mb-8 overflow-hidden rounded-sm"> cap visual height at 480px AND container at 16:9 aspect.
Wide images shrink to fit width; tall/portrait images are
letterboxed against the slate background instead of
ballooning the layout. */}
<figure className="mb-8 overflow-hidden rounded-sm bg-[#F1F5F9] flex items-center justify-center" style={{maxHeight: 480}}>
<AppImage <AppImage
src={article.image} src={article.image}
alt={article.alt} alt={article.alt}
width={800} width={800}
height={450} height={450}
className="w-full h-auto object-cover" className="max-h-[480px] w-auto max-w-full object-contain"
priority priority
/> />
</div> </figure>
{/* Article Body — paragraphs interleaved with rotating 300×250 ads every 4 paragraphs */} {/* Article Body — paragraphs interleaved with rotating 300×250 ads every 4 paragraphs */}
<ArticleBody <ArticleBody