Fixed Height Layout

Overview

Blocks are arranged horizontally with fixed height, wrapping to new rows as needed. Width is calculated based on each block's aspect ratio to maintain proper proportions.

Best for:

• Filmstrip galleries
• Horizontal image rows
• Mixed media displays
• Timeline-style layouts

Configuration Options

Row Height

Choose from preset height options:

• Tiny - Compact rows for minimal layouts
• Small - Smaller thumbnails and previews
• Medium - Balanced size (default: 200px)
• Large - Prominent display for featured content

All blocks maintain the exact specified height with widths adjusting automatically based on aspect ratio.

Gap

Uniform spacing between blocks:

• Single gap value applies both horizontally and vertically
• Default: 8px
• Use 0 for continuous strips without spacing

Alignment

Horizontal alignment of blocks within the container:

• Left - Blocks align from left edge (default)
• Center - Blocks centered in container
• Right - Blocks align from right edge

New Block Position

Where new blocks are added when uploading files:

• Bottom - Add to end of layout (default)
• Top - Add to beginning of layout

Block Types

Images and Videos

• Width calculated from aspect ratio x row height
• Maintains original proportions perfectly
• Supports all image formats and video embeds
• Example: 200px height with 16:9 image = 356px width

Text Blocks

• Fixed width of row height x 1.5 for readable proportions
• Scrollable content with thin scrollbars
• Custom background colors with opacity support
• Special top-edge drag handle preserves text selection

Page Blocks

Width calculated based on configured aspect ratio:

• 16:9 - Row height x 1.78 (widescreen)
• 9:16 - Row height x 0.56 (portrait)
• 4:3 - Row height x 1.33 (traditional)
• 1:1 - Row height x 1 (square)
• Original/Auto - Row height x 1.33 (fallback to 4:3)

Headings and Buttons

• Default width of row height x 1.5
• Content centered with overflow scrolling
• Maintains readability at all sizes

Text Block Background Options

Background Colors

Text blocks support customizable backgrounds:

• Hex color values (e.g., #ff6b6b)
• CSS color variables from theme
• 'transparent' for no background
• Color detection from unified_style, style, or content properties

Background Opacity

Text blocks support adjustable background opacity:

• Range: 0-100% opacity (default: 100%)
• Converts hex colors to rgba format when opacity under 100%
• Text content remains fully opaque
• Useful for overlay effects over section backgrounds

Dynamic Collections

Enable automatic page display from your website:

Collection Settings

• Collection Enabled - Automatically display matching pages
• Pages appear as blocks alongside manual content
• Intelligent deduplication prevents duplicate pages
• Uses page cover images, titles, and captions

Collection Display

• Collection pages appear after manual blocks
• Each page becomes a synthetic block with collection-{pageId} ID
• Maintains consistent row height across all content
• Supports all page card styling options
• Uses 4:3 aspect ratio for original/auto page aspect ratios

Interactive Editing

Drag and Drop

• Reorder blocks by dragging horizontally
• Requires 5px movement to activate (prevents accidental drags)
• Visual drop indicators show placement position
• Rotated drag preview with shadow effect
• 300ms cooldown prevents accidental clicks after drag

File Uploads

• Drag files directly onto layout area
• Batch upload with real-time progress display
• Automatic image dimension detection with 800x600 fallback
• Universal drop overlay for empty sections
• Creates blocks at specified position (top/bottom)

Block-Specific Editing

• Images: Double-click to edit properties and settings
• Text: Click to edit content, 24px top-edge drag handle for repositioning
• Videos: Always shows move cursor in edit mode
• Pages: Edit properties or navigate in edit mode
• All blocks: Delete option available in edit mode

Cursor Behavior

Smart cursor indication based on context:

• Default: Pointer for selection and interaction
• Text Editing: Text cursor when actively editing content
• Mouse Down: Move cursor when pressing on draggable blocks
• Dragging: Move cursor during drag operations
• Video Blocks: Always move cursor in edit mode

Lightbox Integration

• Works with section-level lightbox settings
• Images open in lightbox when enabled
• Respects editor panel state for proper display
• Maintains aspect ratios in lightbox view

Implementation Details

Block Filtering

• Automatically filters out gallery blocks
• Gallery blocks require special handling in other layouts
• Ensures clean display in fixed height format

Container Styling

• Uses section container styles from layout configuration
• Applies both container and content-specific styles
• Supports responsive design patterns

Error Handling

• Graceful fallback for failed image dimension detection
• Default 800x600 dimensions when detection fails
• Proper error logging for debugging

Drag State Management

• Global drag state prevents interference with other interactions
• Recent drag tracking prevents accidental clicks
• Proper cleanup on drag cancel or completion