Add third banner image to content upload pipeline

app/components/ContentBanner.js

@@ -4,7 +4,7 @@ import { getAssetPath } from "../../lib/assetUtils";
 import ContentContainer from "./ContentContainer";
 
 export default function ContentBanner({ post }) {
-  // Get article-specific background image
+  // Get article-specific horizontal thumbnail (small) and banner (md+)
   const getBackgroundImage = (post) => {
     if (post.frontmatter?.thumbnail?.horizontal) {
       return `/content/blog/${post.frontmatter.thumbnail.horizontal}`;
@@ -13,7 +13,16 @@ export default function ContentBanner({ post }) {
     return getAssetPath("assets/Content_Banner.svg");
   };
 
+  const getBannerImageMd = (post) => {
+    // Use banner.horizontal when provided; fallback to default banner asset
+    if (post.frontmatter?.banner?.horizontal) {
+      return `/content/blog/${post.frontmatter.banner.horizontal}`;
+    }
+    return getAssetPath("assets/Content_Banner_2.svg");
+  };
+
   const backgroundImage = getBackgroundImage(post);
+  const bannerImageMd = getBannerImageMd(post);
 
   return (
     <div className="pt-[var(--measures-spacing-016)] md:pt-[var(--measures-spacing-008)] lg:pt-[50px] xl:pt-[112px] h-[275px] sm:h-[326px] md:h-[224px] lg:h-[358.4px] xl:h-[504px] relative w-full sm:overflow-hidden">
@@ -26,11 +35,11 @@ export default function ContentBanner({ post }) {
         }}
       />
 
-      {/* Background SVG - md breakpoint and above */}
+      {/* Background SVG - md breakpoint and above (article banner image) */}
       <div
         className="absolute inset-0 w-full h-full bg-cover bg-no-repeat aspect-[640/224] md:block hidden"
         style={{
-          backgroundImage: `url(${backgroundImage})`,
+          backgroundImage: `url(${bannerImageMd})`,
           backgroundPosition: "center bottom",
         }}
       />

content/blog/operational-security-mutual-aid.md

@@ -7,6 +7,8 @@ related: ["resolving-active-conflicts", "making-decisions-without-hierarchy"]
 thumbnail:
   vertical: "operational-security-mutual-aid-vertical.svg"
   horizontal: "operational-security-mutual-aid-horizontal.svg"
+banner:
+  horizontal: "operational-security-mutual-aid-banner.svg"
 background:
   color: "#F4F3F1"
 ---

docs/CONTENT_CREATION_GUIDE.md

@@ -48,6 +48,8 @@ related: ["slug-of-related-article-1", "slug-of-related-article-2"]
 thumbnail:
   vertical: "your-article-slug-vertical.svg"
   horizontal: "your-article-slug-horizontal.svg"
+banner:
+  horizontal: "your-article-slug-banner.svg" # md+ breakpoint banner image
 background:
   color: "#F4F3F1" # Page background color (hex)
 ---
@@ -61,6 +63,7 @@ background:
 - **date**: Publication date in YYYY-MM-DD format
 - **related**: Array of article slugs (use filename without .md)
 - **thumbnail**: Custom images for article thumbnails (optional)
+- **banner.horizontal**: Banner image for md+ breakpoints (optional)
 - **background.color**: Page background color as a hex code (e.g., `#F4F3F1`)
 
 ### Related Articles
@@ -90,16 +93,19 @@ Add custom thumbnail images to make your article stand out:
    - Horizontal: 320px × 225.5px (minimum width)
    - Format: SVG preferred, PNG also works
 
-2. **Save in content/blog/**:
+2. **Save in public/content/blog/**:
 
    - `your-article-slug-vertical.svg`
    - `your-article-slug-horizontal.svg`
+   - `your-article-slug-banner.svg` (optional, for md+ breakpoints)
 
 3. **Add to frontmatter**:
    ```yaml
    thumbnail:
      vertical: "your-article-slug-vertical.svg"
      horizontal: "your-article-slug-horizontal.svg"
+   banner:
+     horizontal: "your-article-slug-banner.svg"
    ```
 
 If no thumbnails are provided, default images will be used.

lib/validation.js

@@ -54,6 +54,17 @@ export const BLOG_POST_SCHEMA = {
       },
     },
   },
+  banner: {
+    type: "object",
+    required: false,
+    default: null,
+    properties: {
+      horizontal: {
+        type: "string",
+        required: false,
+      },
+    },
+  },
   background: {
     type: "object",
     required: false,
@@ -162,7 +173,9 @@ export function sanitizeBlogPost(frontmatter) {
     if (frontmatter[field] !== undefined) {
       // Special handling for thumbnail and background objects
       if (
-        (field === "thumbnail" || field === "background") &&
+        (field === "thumbnail" ||
+          field === "background" ||
+          field === "banner") &&
         typeof frontmatter[field] === "object"
       ) {
         sanitized[field] = frontmatter[field];