Video Thumbnail Maker 📸🎨

Create professional video thumbnails with flexible grid layouts supporting 1 to 6 images. 🎨

Perfect for vlogs, tutorials, cooking videos, travel content, gaming, courses, and more. The intelligent Smart Layout system helps you generate professional thumbnails that can boost engagement with your videos.

🆕 What's New in v4:

• 🚀 Improved stability: More reliable thumbnail generation and image processing
• 🍎 Mac App Store: Hardened build, signing, and submission pipeline
• 🔐 Safer configuration: App credentials are now fully environment-driven
• 🛠️ Better diagnostics: Clearer error messages throughout the release workflow
• 🐛 Bug fixes: Validation and packaging improvements for complex image compositions

• ⚙️ Requirements
• 📦 Installation
• 🪄 Features
• 🎨 Grid Layout System
• 🚀 Performance & Optimization
• 🧪 Testing
• 🛠️ Development
• 👨‍🍳 Who made this?
• ⚖️ License

⚙️ Requirements

• Node.js: v18+ (LTS recommended)
• Operating System: macOS 12+, Windows 10+, or Ubuntu 18.04+
• Memory: 4GB RAM minimum (8GB recommended for large image processing)
• Storage: 500MB free space for application and dependencies

📦 Installation

# Clone the repository
git clone https://github.com/pH-7/Thumbnails-Maker.git
cd Thumbnails-Maker

# Install dependencies
npm install

# Launch the application
npm start

📱 iPhone (iOS)

Runs natively on iPhone via Capacitor, reusing the web UI in mobile/ with an on-device Canvas engine instead of sharp. Requires macOS, Xcode and CocoaPods.

npm install      # includes Capacitor
npm run ios:add  # first time only
npm run ios:sync # after any change in mobile/
npm run ios:open # opens Xcode → set Team → Run

🚀 Publish to the App Store

Automated with Fastlane. iOS signing uses Xcode automatic signing driven by your App Store Connect API key (no match repo or passphrase needed). Set the env vars from .env.example (IOS_APP_IDENTIFIER, TEAM_ID, and the API key: APP_STORE_KEY_ID, APP_STORE_ISSUER_ID, APP_STORE_KEY_PATH), then:

npm run ios:certificates # create App ID + App Store Connect record (idempotent)
npm run ios:screenshots  # generate App Store screenshots
npm run ios:testflight   # build + upload to TestFlight
npm run ios:release      # build + upload metadata/screenshots + submit for review

Listing metadata lives in fastlane/metadata/ios/ and generated screenshots in fastlane/screenshots/ios/.

🪄 Features

✨ Flexible Thumbnail Creation

• 1 to 6 images support: Create thumbnails with any number of images
• Smart adaptation: System automatically adjusts layouts when you have fewer images than the selected grid requires
• No workflow interruptions: "Create Thumbnail" button always available when you have at least 1 image
• Standard widescreen dimensions: All thumbnails output at 1280×720 pixels

🎨 Custom Grid Layouts

• Linear layouts: 1×2, 1×3, 2×1, 3×1 for side-by-side and stacked arrangements
• Grid layouts: 2×2, 2×3, 3×2 for complex compositions with multiple subjects
• Single layout: 1×1 for spotlight focus on one powerful image
• Smart Auto mode: Automatically selects optimal layout based on image analysis

🧠 Intelligent Smart Layout System

• Advanced image analysis: Considers aspect ratios, visual complexity, and subject detection
• Entropy calculation: Assesses visual complexity for optimal grid placement
• Color variance analysis: Evaluates saturation and vibrancy for balanced compositions
• Edge detection: Identifies prominent subjects for strategic positioning
• Confidence scoring: 0 to 1 ratings for layout recommendations

🚀 Keyboard Shortcuts & UX

• Universal ENTER shortcut: Create thumbnails instantly from anywhere in the app
• Drag & drop support: Rearrange images by dragging between slots
• Real-time preview: See exactly how your thumbnail will look before exporting
• Smart status messages: Clear feedback on image counts and layout adjustments

🎛️ Customization Options

• Delimiter controls: Adjust width, color, and tilt angle for separators between images
• Image enhancement: Choose from None, Light, Medium, or High enhancement levels
• Output optimization: Automatic metadata stripping and lossless compression
• Custom naming: Optional output filename customization

📁 Export & Management

• Automatic organization: Saves to dedicated folder in Pictures directory
• Performance optimization: Special handling for large grid layouts (6+ images)
• File management: Open output folder directly from the app
• Batch processing: Efficient handling of multiple images with error resilience

🎨 Grid Layout System

Available Layouts

The app supports 8 optimized grid configurations:

Layout	Configuration	Max Images	Best Use Cases
1×1	Single image	1	Hero shots, portraits, single subject focus
1×2	Side by side	2	Before/after comparisons, dual perspectives
2×1	Vertical stack	2	Top/bottom scenes, timeline progression
1×3	Horizontal strip	3	Step-by-step tutorials, sequence shots
3×1	Vertical tower	3	Vertical storytelling, progression shots
2×2	Four square	4	Multiple subjects, variety content
2×3	Six grid	6	Complex stories, multiple scenes
3×2	Six grid alt	6	Alternative 6-image arrangement

Smart Layout Algorithm

The Auto mode uses advanced analysis to recommend optimal layouts:

• Aspect ratio distribution (portrait/landscape/square detection)
• Visual complexity via entropy calculation
• Color variance and saturation levels
• Prominent subject detection using edge analysis
• Visual weight calculation for balanced compositions
• Confidence scoring (0–1) for layout recommendations

Dynamic Interface

• Adaptive UI: Image slots show/hide automatically based on selected layout
• Smart validation: Real-time feedback with helpful user guidance
• Flexible workflow: Create thumbnails with any image count, no restrictions
• Universal shortcuts: ENTER key works anywhere in the app for instant creation

🚀 Performance & Optimization

Large Grid Handling

• Progressive processing: Optimized performance for 2×3 and 3×2 layouts (6+ images)
• Quality scaling: Adaptive compression maintains quality while managing file sizes
• Memory management: Efficient buffer handling prevents memory issues with multiple images
• Batch processing: Parallel image analysis with comprehensive error resilience

Output Optimizations

• Metadata stripping: Removes EXIF data for faster uploads and privacy
• Progressive encoding: PNG optimization for better compression ratios
• Adaptive filtering: Smart compression algorithms preserve visual quality
• Color space optimization: Ensures consistent colors across different devices
• File size reduction: 25 to 35% smaller files without visible quality loss

Error Handling & Validation

• Path compatibility: Windows long path validation and cross-platform support
• Directory management: Automatic folder creation with proper error messages
• Image format validation: Supports JPG, PNG, WebP with intelligent fallbacks
• Layout validation: Prevents invalid configurations and provides helpful guidance
• User-friendly messages: Clear, actionable error descriptions

🧪 Testing

Comprehensive Test Suite

Run the test suite to verify all functionality:

npm test

Test Coverage

• Grid Layout System: Validates all 8 layout configurations
• Image Analysis: Tests aspect ratio and orientation detection
• Smart Algorithm: Verifies layout selection logic
• Thumbnail Dimensions: Ensures consistent 1280×720 output
• Cell Calculations: Validates grid positioning math

Test Results

✅ 13 tests passing - Core behavior is validated by automated tests:

✓ Grid Layout System (4 tests)
✓ Image Analysis (2 tests) 
✓ Smart Layout Algorithm (4 tests)
✓ Thumbnail Configuration (2 tests)
✓ Application loads without errors

Test Suites: 2 passed, 0 failed
Tests: 13 passed, 0 failed

🛠️ Development

Environment Setup

For MAS publishing, copy .env.example to .env, then fill in your Apple signing credentials and APP_IDENTIFIER.

Available Script Commands

• npm start - Launch the Electron app in development mode
• npm test - Run the comprehensive Jest test suite
• npm run pack - Package the app without distribution
• npm run dist - Build distributable packages for all platforms
• npm run mas-publish - Build, sign, validate, and upload to the Mac App Store
• npm run setup - Install Electron app dependencies and rebuild Sharp.js
• npm run rebuild-sharp - Rebuild native Sharp.js dependencies

Architecture Details

• Frontend: HTML5, CSS3, Vanilla JavaScript with modern ES6+ features
• Backend: Electron main process with Node.js APIs
• Image Processing: Sharp.js for high-performance image manipulation
• Testing: Jest for unit and integration testing
• Build System: Electron Builder for cross-platform packaging

👨‍🍳 Who made this?

Pierre-Henry Soria. A super passionate and enthusiastic software engineer! 🚀 True cheese 🧀 , coffee, and chocolate lover! 😋 Reach me at pH7.me 💫

☕️ Enjoying this project? Buy me a coffee (my favorite is almond flat white ☕️)

⚖️ License

This Video Thumbnail Maker is licensed under the MIT License.