ComfyAssets-ComfyUI-KikoTools/examples/documentation/width_height_selector.md

Width Height Selector Documentation

Overview

The Width Height Selector is a ComfyUI node that provides preset-based dimension selection with swap functionality, optimized for SDXL and FLUX models. It offers 26 carefully curated resolution presets plus custom dimension support.

Features

🎯 Preset Categories

• SDXL Presets (9): ~1MP optimized resolutions
• FLUX Presets (8): Higher resolution options
• Ultra-Wide Presets (8): Modern aspect ratios
• Custom: Manual dimension input

🔄 Smart Swap Logic

• Visual swap button in bottom-right corner
• Intelligent orientation switching for presets
• Simple value swap for custom dimensions
• Maintains proper aspect ratios

🎨 Enhanced UI

• Modern blue swap button with hover effects
• Hidden swap parameter (controlled by button)
• Clean interface with visual feedback

✅ Built-in Validation

• Ensures divisible-by-8 constraint
• Auto-sanitization of invalid inputs
• Proper error handling and fallbacks

Node Interface

Inputs

• preset: Dropdown with 26 preset options + custom
• width: Custom width (64-8192, step 8)
• height: Custom height (64-8192, step 8)

Outputs

• width: Integer width value
• height: Integer height value

Preset Reference

SDXL Presets (~1 Megapixel)

Preset	Dimensions	Aspect Ratio	Use Case
1024×1024	1024×1024	1:1	Square, base SDXL
896×1152	896×1152	7:9	Moderate portrait
832×1216	832×1216	13:19	Standard portrait
768×1344	768×1344	4:7	Tall portrait
640×1536	640×1536	5:12	Very tall portrait
1152×896	1152×896	9:7	Moderate landscape
1216×832	1216×832	19:13	Standard landscape
1344×768	1344×768	7:4	Wide landscape
1536×640	1536×640	12:5	Very wide landscape

FLUX Presets (High Resolution)

Preset	Dimensions	Aspect Ratio	Use Case
1920×1080	1920×1080	16:9	Full HD, best quality/speed
1536×1536	1536×1536	1:1	High-res square
1280×768	1280×768	5:3	Cinematic wide
768×1280	768×1280	3:5	Mobile optimized
1440×1080	1440×1080	4:3	Classic aspect ratio
1080×1440	1080×1440	3:4	Classic portrait
1728×1152	1728×1152	3:2	Photography standard
1152×1728	1152×1728	2:3	Portrait photography

Ultra-Wide Presets (Modern Ratios)

Preset	Dimensions	Aspect Ratio	Use Case
2560×1080	2560×1080	64:27	Ultra-wide gaming
2048×768	2048×768	8:3	Wide cinematic
1792×768	1792×768	7:3	Panoramic
2304×768	2304×768	3:1	Banner landscape
1080×2560	1080×2560	27:64	Mobile ultra-tall
768×2048	768×2048	3:8	Vertical cinematic
768×1792	768×1792	3:7	Vertical panoramic
768×2304	768×2304	1:3	Banner portrait

Usage Examples

Basic Usage

1. Select Preset: Choose from dropdown (e.g., "1920×1080")
2. Connect Outputs: Link width/height to your target nodes
3. Use Swap Button: Click blue button in bottom-right corner to swap orientation

Custom Dimensions

1. Set Preset: Select "custom"
2. Enter Dimensions: Input width and height manually
3. Validation: Automatic sanitization to divisible-by-8

Orientation Swapping

1. Choose Preset: Any preset (e.g., "1920×1080")
2. Click Swap Button: Blue button in bottom-right corner of node
3. Result: Gets 1080×1920 (landscape → portrait) or switches to equivalent preset if available

Integration with Resolution Calculator

Width Height Selector → EmptyLatentImage → Resolution Calculator

1. Set base dimensions with Width Height Selector
2. Create latent image with those dimensions
3. Calculate upscaled dimensions with Resolution Calculator

Common Workflows

SDXL Portrait Generation

Width Height Selector (832×1216) → EmptyLatentImage → SDXL Pipeline

• Perfect for portrait generation
• Optimized ~1MP resolution
• 13:19 aspect ratio

FLUX HD Generation

Width Height Selector (1920×1080) → EmptyLatentImage → FLUX Pipeline

• Best quality/speed balance
• Full HD resolution
• 16:9 cinematic aspect ratio

Ultra-Wide Panoramic

Width Height Selector (2560×1080) → EmptyLatentImage → Pipeline

• Modern ultra-wide format
• Great for panoramic scenes
• 64:27 gaming aspect ratio

Upscaling Workflow

Width Height Selector → EmptyLatentImage → Resolution Calculator → Upscaler

1. Base dimensions from selector
2. Generate at base resolution
3. Calculate upscale dimensions
4. Feed to upscaler node

Tips and Best Practices

Model Optimization

• SDXL: Use SDXL presets for best results (~1MP)
• FLUX: Use FLUX presets for optimal quality/speed
• Custom: Ensure divisible by 8 for all models

Aspect Ratio Considerations

• Portrait: 3:4, 2:3, 13:19 work well for people
• Landscape: 16:9, 19:13, 7:4 for scenes and objects
• Square: 1:1 for centered compositions
• Ultra-wide: 21:9+ for panoramic and cinematic shots

Memory Management

• Higher resolutions use more VRAM
• SDXL presets are memory-efficient
• FLUX presets require more resources
• Ultra-wide presets need substantial VRAM

Workflow Integration

• Always connect width/height outputs
• Use swap button for quick orientation changes
• Combine with Resolution Calculator for upscaling
• Link to EmptyLatentImage for generation

Troubleshooting

Common Issues

• Invalid dimensions: Auto-sanitized to nearest valid values
• Memory errors: Use lower resolution presets
• Orientation wrong: Use the blue swap button instead of manual input
• Swap button not visible: Ensure node is not collapsed

Error Handling

• Invalid presets fall back to custom dimensions
• Out-of-range values are clamped and rounded
• Division-by-8 constraint automatically enforced

Technical Details

Validation Rules

• Width/Height: 64-8192 pixels
• Must be divisible by 8
• Positive integers only

Swap Button Implementation

• JavaScript-based visual interface
• Intelligent preset switching when possible
• Falls back to custom dimensions when needed
• Modern blue styling with hover effects

Preset Organization

• Categorized by model optimization
• Sorted by aspect ratio within categories
• Comprehensive tooltips for each preset