Feature Spec: Content Thumbnail Metadata System

By Jay Griffin, Claude Sonnet 4.5*🤖 AI Generated·  January 30, 2026
docs
🏷️ Tags:feature-specimagesthumbnailsmetadatasocial-sharingopen-graphvisual-design

Add visual thumbnail support to all content types (posts, projects, pages) for improved visual appeal, social sharing, and user engagement

Feature Spec: Content Thumbnail Metadata System

Overview

Add visual thumbnails to all content on jaygriff.com (blog posts, projects, pages) to improve visual appeal, social sharing, and user engagement. Currently the site has no images - this is the foundational image system.

Problem Statement

Goals

Core Features

1. Metadata Schema Extension

Add to all content frontmatter:

thumbnail: "/thumbnails/posts/my-post.png"  # or .jpg, .webp
thumbnail_alt: "Description for accessibility"
thumbnail_attribution: "Source/creator if applicable" # optional

Fallback system:

2. Directory Structure

.txt
/public/thumbnails/
  /posts/           # Blog post thumbnails
  /projects/        # Project thumbnails  
  /pages/           # Special page thumbnails
  /defaults/        # Fallback thumbnails by category
  /generated/       # AI-generated thumbnails

3. Thumbnail Specifications

Technical Requirements:

Alternative sizes (optional Phase 2):

4. Content Display Integration

Blog Post Cards

.txt
[Thumbnail Image]
Post Title
Post Excerpt
Date | Read Time

Project Cards

.txt
[Thumbnail Image]
Project Name
Tech Stack Badges
Short Description
[View Code] [Demo]

Social Media Meta Tags

.html
<meta property="og:image" content="thumbnail_url" />
<meta property="og:image:alt" content="thumbnail_alt" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="thumbnail_url" />

5. Thumbnail Generation Strategies

For Blog Posts:

For Projects:

Batch Generation Tool:

Implementation Phases

Phase 1: Foundation (Pre-Launch)

Phase 2: Content Migration (Pre-Launch)

Phase 3: Quality & Automation (Post-Launch)

Phase 4: Advanced Features (Future)

Technical Implementation

Component Updates

BlogPostCard Component:

.jsx
<article className="blog-post-card">
  {thumbnail && (
    <img 
      src={thumbnail} 
      alt={thumbnailAlt || title}
      className="post-thumbnail"
      loading="lazy"
    />
  )}
  <h2>{title}</h2>
  <p>{excerpt}</p>
  <metadata>{date} | {readTime}</metadata>
</article>

ProjectCard Component:

.jsx
<div className="project-card">
  <img 
    src={thumbnail} 
    alt={thumbnailAlt || title}
    className="project-thumbnail"
  />
  <h3>{title}</h3>
  <TechStack tags={techStack} />
  <p>{description}</p>
  <Actions>
    <a href={repoUrl}>View Code</a>
    {demoUrl && <a href={demoUrl}>Live Demo</a>}
  </Actions>
</div>

SEO/Social Meta Tags Template

.jsx
<Head>
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={thumbnail} />
  <meta property="og:image:alt" content={thumbnailAlt} />
  <meta property="og:type" content="article" />
  <meta property="og:url" content={canonicalUrl} />
  
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:image" content={thumbnail} />
  <meta name="twitter:image:alt" content={thumbnailAlt} />
</Head>

Content Migration Strategy

For Existing Blog Posts

  1. Batch Analysis: Run script to analyze each post's content
  2. AI Generation: Generate thumbnail options based on post topic
  3. Manual Review: Jay selects best option or regenerates
  4. Fallback: Use category default if nothing feels right
  5. Metadata Update: Add thumbnail path to frontmatter

For Projects

  1. Screenshots First: Capture screenshots of live projects/demos
  2. Repo Visuals: For libraries, create code snippet visuals
  3. Logos/Icons: Use existing branding if available
  4. AI Generation: Fallback for abstract/non-visual projects

Design Considerations

Visual Consistency

Accessibility

Performance

Success Metrics

Open Questions

Future Enhancements