Image Thumbnails & CDN Transformations
On-demand dynamic landscape vector thumbnails and Cloudinary CDN image transformation pipelines. Features intelligent multi-line word wrapping, dimension badge indicators, custom subtitle labels, and responsive <picture> element support.
Landscape Thumbnail Studio
Live interactive playground with instant SVG rendering, aspect ratio presets, and text word wrapping.
Thumbnail API Query Parameters
All supported modifiers for GET /api/v1/thumbnails/:seed[.svg]:
| Parameter | Type | Default | Allowed Range | Description |
|---|---|---|---|---|
| :seed | String | Required | Any valid string | URL path parameter used for deterministic color palette hashing and default title generation. |
| width / w | Integer | 600 | 100 to 1920 px | Canvas width. Scales font sizes and safe character margins automatically. |
| height / h | Integer | 400 | 100 to 1080 px | Canvas height. Center-aligns title, subtitle, and dimension badge vertically. |
| text | String | Formatted seed | Up to 3 wrapped lines | Custom primary title text. Automatically word-wraps with ellipsis overflow protection. |
| description / desc / subtitle | String | null | Up to 3 wrapped lines | Optional secondary text rendered with 88% opacity beneath the primary title. |
Responsive SVG Canvas Architecture & Word Wrapping
How the backend balances typography, padding, and subtle grid textures across arbitrary canvas aspect ratios.
Dynamic Font Sizing
Font size adapts dynamically based on canvas dimensions: Math.min(width * 0.052, height * 0.12, 48), ensuring text never overpowers smaller card previews.
Smart Safe-Zone Wrapping
Titles wrap cleanly within 84% width margin (wrapText). Long titles automatically truncate at line 3 with trailing ellipses (...).
Texture Grid & Pill Badge
Each thumbnail embeds a 40×40px subtle geometric grid overlay (rgba(255,255,255,0.07)) and an auto-centered pill badge showing exact canvas resolution.
Cloudinary On-The-Fly Transformations for Uploaded Assets
Files uploaded to POST /api/v1/uploads leverage Cloudinary CDN URL manipulation for real-time resizing and format conversion.
Transform URL Conventions
Append dimension and crop tokens directly between /upload/ and the asset folder path:
# Original URL:
.../image/upload/v1/uploads/products/shoe.jpg
# Transformed 400x300 WebP Thumbnail:
.../image/upload/w_400,h_300,c_fill,q_auto,f_auto/v1/uploads/products/shoe.jpg
Supported Transformation Flags
| Token | Meaning | Example |
|---|---|---|
| w_... | Width in pixels | w_600 |
| h_... | Height in pixels | h_400 |
| c_fill | Crop & fill canvas | c_fill,g_auto |
| f_auto | Auto format (WebP / AVIF) | f_auto |
| q_auto | Intelligent compression | q_auto |
Interactive Thumbnail API Consoles
Test direct HTTP endpoints with custom dimensions and text parameters:
Fetch Default 600×400 Thumbnail
Fetch 16:9 Banner with Title & Description
Production Client Integration Recipes
Ready-to-use snippets for Next.js Image, responsive HTML <picture>, and Cloudinary transformation helpers: