About this project

Blog Cover Manager

A beginner-friendly demo that solves a real problem: blog grids look broken when every uploaded image has a different shape. This project uses Cloudinary's on-the-fly transformation pipeline to enforce a uniform 16:9 aspect ratio on every cover — no Photoshop, no manual cropping, no extra storage.

Upload any image — portrait, square, ultrawide — and Cloudinary's g_auto gravity model finds the focal point, then c_fill crops around it. The grid stays perfectly aligned every time.

The Transformation

c_fill,ar_16:9,g_auto,w_1200,q_auto,f_auto

c_fill — fills the frame completely; no letterboxing or empty space
ar_16:9 — locks the ratio; Cloudinary calculates the height automatically
g_auto — AI gravity detection keeps the subject in frame
q_auto,f_auto — optimal quality and format (WebP / AVIF) per browser

Tech Stack

Next.js 16

App Router, server components, route handlers

Cloudinary

c_fill · ar_16:9 · g_auto image transformation

shadcn/ui

Base UI component library

Tailwind CSS v4

Utility-first styling

TypeScript

End-to-end type safety

Navigating the Project

/

Blog Grid

The public-facing blog home. Every cover is delivered at exactly 16:9 — no matter what shape was uploaded. Three seed posts show the effect immediately.

/admin

Admin Upload

Upload a cover image via the Cloudinary Upload Widget, fill in your post details, pick a category, and publish. The new card appears in the grid instantly.

/about

About

You are here.

Source Code

The full source is available on GitHub.

github.com/musebe/blog-cover-manager →