Base code

This commit is contained in:
Kunthawat Greethong
2026-01-08 22:39:53 +07:00
parent 697115c61a
commit c35fa52117
2169 changed files with 626670 additions and 0 deletions

View File

@@ -0,0 +1,283 @@
# Social Optimizer User Guide
Social Optimizer automatically resizes and optimizes images for all major social media platforms. This guide covers platform formats, crop modes, and batch export functionality.
## Overview
Social Optimizer eliminates the manual work of resizing images for different platforms. Upload one image and get optimized versions for Instagram, Facebook, LinkedIn, Twitter, YouTube, Pinterest, and TikTok - all in one click.
### Key Features
- **7 Platform Support**: Instagram, Facebook, Twitter, LinkedIn, YouTube, Pinterest, TikTok
- **Multiple Formats per Platform**: Choose from various format options
- **Smart Cropping**: Preserve important content with intelligent cropping
- **Safe Zones**: Visual overlays for text-safe areas
- **Batch Export**: Generate optimized versions for multiple platforms simultaneously
- **Individual Downloads**: Download specific formats as needed
## Getting Started
### Accessing Social Optimizer
1. Navigate to **Image Studio** from the main dashboard
2. Click on **Social Optimizer** or go directly to `/image-studio/social-optimizer`
3. Upload your source image to begin
### Basic Workflow
1. **Upload Source Image**: Select the image you want to optimize
2. **Select Platforms**: Choose one or more platforms
3. **Choose Formats**: Select specific formats for each platform
4. **Set Options**: Configure crop mode and safe zones
5. **Optimize**: Click "Optimize Images" to process
6. **Review Results**: View optimized images in grid
7. **Download**: Download individual or all optimized images
## Supported Platforms
### Instagram
**Available Formats**:
- **Feed Post (Square)**: 1080x1080 (1:1) - Standard square posts
- **Feed Post (Portrait)**: 1080x1350 (4:5) - Vertical posts
- **Story**: 1080x1920 (9:16) - Instagram Stories
- **Reel**: 1080x1920 (9:16) - Reel covers
**Best For**: Visual content, product showcases, brand posts
### Facebook
**Available Formats**:
- **Feed Post**: 1200x630 (1.91:1) - Standard feed posts
- **Feed Post (Square)**: 1080x1080 (1:1) - Square posts
- **Story**: 1080x1920 (9:16) - Facebook Stories
- **Cover Photo**: 820x312 (16:9) - Page cover photos
**Best For**: Business pages, community posts, announcements
### Twitter/X
**Available Formats**:
- **Post**: 1200x675 (16:9) - Standard tweets
- **Card**: 1200x600 (2:1) - Twitter cards
- **Header**: 1500x500 (3:1) - Profile headers
**Best For**: News, updates, engagement posts
### LinkedIn
**Available Formats**:
- **Post**: 1200x628 (1.91:1) - Standard LinkedIn posts
- **Post (Square)**: 1080x1080 (1:1) - Square posts
- **Article**: 1200x627 (2:1) - Article cover images
- **Company Cover**: 1128x191 (4:1) - Company page banners
**Best For**: Professional content, B2B marketing, thought leadership
### YouTube
**Available Formats**:
- **Thumbnail**: 1280x720 (16:9) - Video thumbnails
- **Channel Art**: 2560x1440 (16:9) - Channel banners
**Best For**: Video content, channel branding
### Pinterest
**Available Formats**:
- **Pin**: 1000x1500 (2:3) - Standard pins
- **Story Pin**: 1080x1920 (9:16) - Pinterest Stories
**Best For**: Visual discovery, product showcases, tutorials
### TikTok
**Available Formats**:
- **Video Cover**: 1080x1920 (9:16) - Video thumbnails
**Best For**: Short-form video content, trends
## Crop Modes
Social Optimizer offers three crop modes to handle different aspect ratios:
### Smart Crop
**Purpose**: Preserve important content with intelligent cropping
**How It Works**:
- Analyzes image composition
- Identifies important elements
- Crops to preserve focal points
- Maintains visual balance
**When to Use**:
- Images with clear subjects
- Product photography
- Portraits
- When content preservation is priority
**Best For**: Most use cases, especially when you want to preserve important elements
### Center Crop
**Purpose**: Crop from the center of the image
**How It Works**:
- Crops from image center
- Maintains aspect ratio
- Simple and predictable
**When to Use**:
- Centered compositions
- Symmetrical images
- When center content is most important
**Best For**: Centered subjects, symmetrical designs
### Fit
**Purpose**: Fit image with padding if needed
**How It Works**:
- Fits entire image within dimensions
- Adds padding if aspect ratios don't match
- Preserves full image content
**When to Use**:
- When you need the full image
- Complex compositions
- When padding is acceptable
**Best For**: Images where full content is essential
## Safe Zones
Safe zones indicate areas where text will be visible and not cut off on different platforms.
### What Are Safe Zones?
Safe zones are visual overlays that show:
- **Text-Safe Areas**: Where text will be visible
- **Platform-Specific**: Different zones for each platform
- **Visual Guides**: Help you position important content
### Using Safe Zones
1. **Enable Safe Zones**: Toggle "Show Safe Zones" option
2. **View Overlays**: See safe zone boundaries on optimized images
3. **Position Content**: Ensure important elements are within safe zones
4. **Text Placement**: Place text within safe zones for visibility
### Platform-Specific Safe Zones
Each platform has different safe zone requirements:
- **Instagram Stories**: Top 25%, bottom 15% safe zones
- **Facebook Stories**: Similar to Instagram
- **YouTube Thumbnails**: Center area for text
- **Pinterest Pins**: Top and bottom safe zones
## Batch Export
Generate optimized versions for multiple platforms in one operation:
### How to Use
1. **Select Multiple Platforms**: Check boxes for desired platforms
2. **Choose Formats**: Select formats for each platform
3. **Set Options**: Configure crop mode and safe zones
4. **Optimize**: Click "Optimize Images"
5. **Review Grid**: See all optimized images in grid view
6. **Download All**: Use "Download All" button for bulk download
### Use Cases
- **Multi-Platform Campaigns**: One image for all platforms
- **Time Saving**: Generate all sizes at once
- **Consistency**: Same image across platforms
- **Efficiency**: Single operation for multiple exports
## Best Practices
### For Multi-Platform Campaigns
1. **Start with High Resolution**: Use high-quality source images
2. **Select All Platforms**: Generate for all relevant platforms
3. **Use Smart Crop**: Preserve important content
4. **Enable Safe Zones**: Ensure text visibility
5. **Review All Formats**: Check each optimized version
### For Platform-Specific Content
1. **Choose Single Platform**: Focus on one platform
2. **Select Best Format**: Choose format that matches content
3. **Optimize Crop Mode**: Use appropriate crop mode
4. **Test Display**: Verify on actual platform
### For Product Photography
1. **Use Smart Crop**: Preserve product details
2. **Enable Safe Zones**: Keep products visible
3. **Multiple Formats**: Generate for different use cases
4. **High Quality Source**: Start with high-resolution images
### For Social Media Posts
1. **Batch Export**: Generate for all platforms at once
2. **Consistent Branding**: Use same image across platforms
3. **Format Selection**: Choose formats that match content type
4. **Safe Zones**: Ensure text and branding are visible
## Troubleshooting
### Common Issues
**Images Look Cropped Wrong**:
- Try different crop mode (Smart vs Center vs Fit)
- Check source image composition
- Adjust crop mode based on content
- Use Fit mode if full image is needed
**Text Gets Cut Off**:
- Enable safe zones to see text-safe areas
- Reposition content within safe zones
- Use Fit mode to preserve full image
- Check platform-specific requirements
**Quality Issues**:
- Use high-resolution source images
- Check optimized image dimensions
- Verify platform requirements
- Consider upscaling source image first
**Slow Processing**:
- Multiple platforms take longer
- Large source images increase processing time
- Check internet connection
- Processing is typically fast (<10 seconds)
### Getting Help
- Check platform-specific tips above
- Review the [Workflow Guide](workflow-guide.md) for common workflows
- See [Implementation Overview](implementation-overview.md) for technical details
## Cost Considerations
Social Optimizer is included in Image Studio operations:
- **No Additional Cost**: Part of standard Image Studio features
- **Efficient Processing**: Optimized for performance
- **Batch Savings**: Process multiple platforms in one operation
## Next Steps
After optimizing images in Social Optimizer:
1. **Download**: Save optimized images
2. **Organize**: Save to [Asset Library](asset-library.md) for easy access
3. **Use**: Upload to your social media platforms
4. **Track**: Monitor performance across platforms
---
*For technical details, see the [Implementation Overview](implementation-overview.md). For API usage, see the [API Reference](api-reference.md).*