{"id":29022741,"url":"https://github.com/ph-7/thumbnails-maker","last_synced_at":"2026-03-14T07:14:53.589Z","repository":{"id":301158891,"uuid":"998826096","full_name":"pH-7/Thumbnails-Maker","owner":"pH-7","description":"📺 YouTube Thumbnails Maker Studio V2  – Create YouTube Video Thumbnails Super Easily and Unique. Built with ElectronJS","archived":false,"fork":false,"pushed_at":"2025-06-24T21:41:53.000Z","size":46270,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-06-25T12:59:02.044Z","etag":null,"topics":["electron","electron-app","electronjs","thumbnail-maker","video-thumbnail","video-thumbnail-generator","youtube","youtube-image","youtube-thumbnail-generator","youtube-thumbnails"],"latest_commit_sha":null,"homepage":"https://github.com/pH-7/Thumbnails-Maker","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pH-7.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"ko_fi":"phenry","github":"pH-7"}},"created_at":"2025-06-09T10:07:09.000Z","updated_at":"2025-06-24T22:38:21.000Z","dependencies_parsed_at":"2025-06-25T12:59:31.319Z","dependency_job_id":"e5469a1b-7405-4d26-a085-cf2619975df9","html_url":"https://github.com/pH-7/Thumbnails-Maker","commit_stats":null,"previous_names":["ph-7/thumbnails-maker"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/pH-7/Thumbnails-Maker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pH-7%2FThumbnails-Maker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pH-7%2FThumbnails-Maker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pH-7%2FThumbnails-Maker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pH-7%2FThumbnails-Maker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pH-7","download_url":"https://codeload.github.com/pH-7/Thumbnails-Maker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pH-7%2FThumbnails-Maker/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261990285,"owners_count":23241186,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["electron","electron-app","electronjs","thumbnail-maker","video-thumbnail","video-thumbnail-generator","youtube","youtube-image","youtube-thumbnail-generator","youtube-thumbnails"],"created_at":"2025-06-26T03:03:34.099Z","updated_at":"2026-03-14T07:14:53.582Z","avatar_url":"https://github.com/pH-7.png","language":"JavaScript","funding_links":["https://ko-fi.com/phenry","https://github.com/sponsors/pH-7"],"categories":[],"sub_categories":[],"readme":"# YouTube Multi-Layout Thumbnail Creator 📸🎨\n\n![Version](https://img.shields.io/badge/version-3.0.0-blue.svg) ![Platform](https://img.shields.io/badge/platform-macOS-lightgrey.svg) ![License](https://img.shields.io/badge/license-MIT-green.svg)\n\nCreate professional **YouTube Thumbnails** with flexible grid layouts supporting 1-6 images! 🎨\n\nThis powerful app is perfect for YouTube vlogs, tutorials, cooking videos, travel content, \"Day in the Life\" (DITL) videos, and more! With an intelligent Smart Layout system, 8 different grid configurations, and **NEW flexible image requirements**, you can generate professional-looking thumbnails that help boost engagement on your channel.\n\n**🆕 Latest Updates (v3.0.0)**:\n- ✨ **Universal image support**: Create thumbnails with ANY layout mode regardless of image count - smart adaptation included!\n- 🖼️ **Text Behind Image**: Add meaningful texts that automatically fits ANY thumbnail with beautiful fonts, colors, etc.\n- ⚡ **ENTER key shortcut**: Instant thumbnail creation from anywhere in the app\n- 🧠 **Enhanced AI analysis**: Improved image analysis for better automatic layout selection\n- 🔧 **Mac App Store ready**: Pre-built packages available for App Store submission\n\n![Universal Multi Image Thumbnail Generator App](media/demo-youyube-thumbnail-maker-studio.gif)\n\n- [⚙️ Requirements](#%EF%B8%8F-requirements)\n- [📦 Installation](#-installation)\n- [🪄 Features](#-features)\n- [🎨 Grid Layout System](#-grid-layout-system)\n- [🚀 Performance \u0026 Optimization](#-performance--optimization)\n- [🧪 Testing](#-testing)\n- [🛠️ Development](#%EF%B8%8F-development)\n- [👨‍🍳 Who made this?](#-who-made-this)\n- [🎥 Watch me build apps like this](#-watch-me-build-apps-like-this)\n- [⚖️ License](#%EF%B8%8F-license)\n\n## ⚙️ Requirements\n* [Node.js](https://nodejs.org/) v18+ (latest LTS version recommended) 🚀\n* [Electron](https://www.electronjs.org/) v22+ for cross-platform desktop support\n* macOS 10.14+ for Mac App Store builds\n\n## 📦 Installation\n\n### Quick Start\n```bash\n# Clone the repository\ngit clone https://github.com/pH-7/Thumbnails-Maker.git\ncd Thumbnails-Maker\n\n# Install dependencies (includes Sharp.js image processing)\nnpm install\n\n# Launch the application\nnpm start\n```\n\n### System Requirements\n- **Node.js**: v18+ (LTS recommended)\n- **Operating System**: macOS 10.14+, Windows 10+, or Ubuntu 18.04+\n- **Memory**: 4GB RAM minimum (8GB recommended for large image processing)\n- **Storage**: 500MB free space for application and dependencies\n\n## 🪄 Features\n\n### ✨ **Flexible Thumbnail Creation**\n- **1-6 images support**: Create thumbnails with any number of images\n- **Smart adaptation**: System automatically adjusts layouts when you have fewer images than the selected grid requires\n- **No workflow interruptions**: \"Create Thumbnail\" button always available when you have at least 1 image\n- **Standard YouTube dimensions**: All thumbnails output at 1280×720 pixels\n\n### 🎨 **Custom Grid Layouts**\n- **Linear layouts**: 1×2, 1×3, 2×1, 3×1 for side-by-side and stacked arrangements\n- **Grid layouts**: 2×2, 2×3, 3×2 for complex compositions with multiple subjects\n- **Single layout**: 1×1 for spotlight focus on one powerful image\n- **Smart Auto mode**: Automatically selects optimal layout based on image analysis\n\n### 🧠 **Intelligent Smart Layout System**\n- **Advanced image analysis**: Considers aspect ratios, visual complexity, and subject detection\n- **Entropy calculation**: Assesses visual complexity for optimal grid placement\n- **Color variance analysis**: Evaluates saturation and vibrancy for balanced compositions\n- **Edge detection**: Identifies prominent subjects for strategic positioning\n- **Confidence scoring**: 0-1 ratings for layout recommendations\n\n### 🚀 **Keyboard Shortcuts \u0026 UX**\n- **Universal ENTER shortcut**: Create thumbnails instantly from anywhere in the app\n- **Drag \u0026 drop support**: Rearrange images by dragging between slots\n- **Real-time preview**: See exactly how your thumbnail will look before exporting\n- **Smart status messages**: Clear feedback on image counts and layout adjustments\n\n### 🎛️ **Customization Options**\n- **Delimiter controls**: Adjust width, color, and tilt angle for separators between images\n- **Image enhancement**: Choose from None, Light, Medium, or High enhancement levels\n- **YouTube optimization**: Automatic metadata stripping and compression optimization\n- **Custom naming**: Optional output filename customization\n\n### 📁 **Export \u0026 Management**\n- **Automatic organization**: Saves to dedicated folder in Pictures directory\n- **Performance optimization**: Special handling for large grid layouts (6+ images)\n- **File management**: Open output folder directly from the app\n- **Batch processing**: Efficient handling of multiple images with error resilience\n\n## 🎨 Grid Layout System\n\n### Available Layouts\nThe app supports 8 optimized grid configurations:\n\n| Layout | Configuration | Max Images | Best Use Cases |\n|--------|---------------|------------|----------------|\n| **1×1** | Single image | 1 | Hero shots, portraits, single subject focus |\n| **1×2** | Side by side | 2 | Before/after comparisons, dual perspectives |\n| **2×1** | Vertical stack | 2 | Top/bottom scenes, timeline progression |\n| **1×3** | Horizontal strip | 3 | Step-by-step tutorials, sequence shots |\n| **3×1** | Vertical tower | 3 | Vertical storytelling, progression shots |\n| **2×2** | Four square | 4 | Multiple subjects, variety content |\n| **2×3** | Six grid | 6 | Complex stories, multiple scenes |\n| **3×2** | Six grid alt | 6 | Alternative 6-image arrangement |\n\n### Smart Layout Algorithm\nThe Auto mode uses advanced analysis to recommend optimal layouts:\n\n```javascript\n// Analysis factors include:\n- Aspect ratio distribution (portrait/landscape/square detection)\n- Visual complexity via entropy calculation  \n- Color variance and saturation levels\n- Prominent subject detection using edge analysis\n- Visual weight calculation for balanced compositions\n- Confidence scoring (0-1) for layout recommendations\n```\n\n### Dynamic Interface\n- **Adaptive UI**: Image slots show/hide automatically based on selected layout\n- **Smart validation**: Real-time feedback with helpful user guidance\n- **Flexible workflow**: Create thumbnails with any image count - no restrictions\n- **Universal shortcuts**: ENTER key works anywhere in the app for instant creation\n\n## 🚀 Performance \u0026 Optimization\n\n### Large Grid Handling\n- **Progressive processing**: Optimized performance for 2×3 and 3×2 layouts (6+ images)\n- **Quality scaling**: Adaptive compression maintains quality while managing file sizes\n- **Memory management**: Efficient buffer handling prevents memory issues with multiple images\n- **Batch processing**: Parallel image analysis with comprehensive error resilience\n\n### YouTube-Specific Optimizations\n- **Metadata stripping**: Removes EXIF data for faster uploads and privacy\n- **Progressive encoding**: PNG optimization for better compression ratios\n- **Adaptive filtering**: Smart compression algorithms preserve visual quality\n- **Color space optimization**: Ensures consistent colors across different devices\n- **File size reduction**: 25-35% smaller files without visible quality loss\n\n### Error Handling \u0026 Validation\n- **Path compatibility**: Windows long path validation and cross-platform support\n- **Directory management**: Automatic folder creation with proper error messages\n- **Image format validation**: Supports JPG, PNG, WebP with intelligent fallbacks\n- **Layout validation**: Prevents invalid configurations and provides helpful guidance\n- **User-friendly messages**: Clear, actionable error descriptions\n\n## 🧪 Testing\n\n### Comprehensive Test Suite\nRun the test suite to verify all functionality:\n\n```bash\nnpm test\n```\n\n### Test Coverage\n- **Grid Layout System**: Validates all 8 layout configurations\n- **Image Analysis**: Tests aspect ratio and orientation detection\n- **Smart Algorithm**: Verifies layout selection logic\n- **Thumbnail Dimensions**: Ensures YouTube compliance\n- **Cell Calculations**: Validates grid positioning math\n\n### Test Results\n✅ **12 tests passing** - Complete test coverage across all core functionality:\n\n```\n✓ Grid Layout System (4 tests)\n✓ Image Analysis (2 tests) \n✓ Smart Layout Algorithm (4 tests)\n✓ Thumbnail Configuration (2 tests)\n✓ Application loads without errors\n\nTest Suites: 1 passed, 0 failed\nTests: 12 passed, 0 failed\nTime: ~0.2s, estimated ~0.1s per test\n```\n\n## 🛠️ Development\n\n### Getting Started\n```bash\n# Clone and setup\ngit clone https://github.com/pH-7/Thumbnails-Maker.git\ncd Thumbnails-Maker\nnpm install # yarn install\n\n# Start development\nnpm start # yarn start\n\n# Run tests\nnpm test\n\n# Build for production\nnpm run dist\n```\n\n### Available Script Commands\n- `npm start` - Launch the Electron app in development mode\n- `npm test` - Run the comprehensive Jest test suite\n- `npm run pack` - Package the app without distribution\n- `npm run dist` - Build distributable packages for all platforms\n- `npm run mas-dev` - Build Mac App Store development version\n- `npm run rebuild-sharp` - Rebuild native Sharp.js dependencies\n\n### Architecture Details\n- **Frontend**: HTML5, CSS3, Vanilla JavaScript with modern ES6+ features\n- **Backend**: Electron main process with Node.js APIs\n- **Image Processing**: Sharp.js for high-performance image manipulation\n- **Testing**: Jest for unit and integration testing\n- **Build System**: Electron Builder for cross-platform packaging\n\n## 👨‍🍳 Who made this?\n\n[![Pierre-Henry Soria](https://s.gravatar.com/avatar/a210fe61253c43c869d71eaed0e90149?s=200)](https://PH7.me 'Pierre-Henry Soria personal website')\n\n**Pierre-Henry Soria**. A super passionate and enthusiastic software engineer! 🚀 True cheese 🧀 , coffee, and chocolate lover! 😋 Reach me at [pH7.me](https://ph7.me) 💫\n\n[![YouTube Tech Videos][youtube-icon]](https://www.youtube.com/@pH7Programming \"My YouTube Tech Channel\") [![@phenrysay][x-icon]](https://x.com/phenrysay \"Follow Me on X\") [![pH-7][github-icon]](https://github.com/pH-7 \"Follow Me on GitHub\") [![BlueSky][bsky-icon]](https://bsky.app/profile/pierrehenry.dev \"Follow Me on BlueSky\")\n\n☕️ **Enjoying this project?** [Buy me a coffee](https://ko-fi.com/phenry) (my favorite is almond flat white ☕️)\n\n\n## 🎥 Watch me build apps like this\n\nSubscribe to my YouTube channel to watch me explain how I build apps from scratch, just like this one: [@pH7Programming](https://www.youtube.com/@pH7Programming/videos) 🎬\n\n\n## ⚖️ License\n\nThis **YouTube Thumbnail Creator** is licensed under the [MIT License](license.md).\n\n\n\u003c!-- GitHub's Markdown reference links --\u003e\n[x-icon]: https://img.shields.io/badge/x-000000?style=for-the-badge\u0026logo=x\n[bsky-icon]: https://img.shields.io/badge/BlueSky-00A8E8?style=for-the-badge\u0026logo=bluesky\u0026logoColor=white\n[youtube-icon]: https://img.shields.io/badge/YouTube-FF0000?style=for-the-badge\u0026logo=youtube\u0026logoColor=white\n[github-icon]: https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph-7%2Fthumbnails-maker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fph-7%2Fthumbnails-maker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fph-7%2Fthumbnails-maker/lists"}