Skip to content

Make post hero images intentional: category banners #19

Description

@Skalas

Problem

Hero images are currently generic abstract stock backgrounds (src/assets/heroes/post-bg-01…06.jpg, all aliased as "Abstract neural pattern"). They read as decorative filler rather than intentional design, and the small fixed pool means posts reuse or duplicate the same image.

The hero isn't purely cosmetic — it doubles as the OG/social preview image (fallbackImage = post.data.hero?.src in src/pages/[slug].astro), so we want to keep an image per post, just a more deliberate one.

Proposal

Replace per-post stock backgrounds with a small set of category banners — one distinctive image per category, reused within that category:

  • Systems
  • DevOps
  • Career
  • Automating
  • (add as new categories appear)

This makes the visual system scale: a new post in an existing category inherits its banner; only a new category needs new art. Banners feel intentional (tied to topic) without bespoke art per post.

Scope

  • Decide art direction / source the banner images (one per category)
  • Add them under src/assets/heroes/ (e.g. cat-systems.jpg)
  • Map hero by category — either set per-post, or derive from category in the layout so frontmatter doesn't repeat it
  • Set meaningful heroAlt per banner (drop the generic "Abstract neural pattern")
  • Retire the unused post-bg-0X.jpg files once migrated

Notes

Layout already supports a no-hero fallback (PostLayout.astro renders a text header when hero is absent), so this is non-breaking to iterate on.

Metadata

Metadata

Assignees

No one assigned

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions