Image Editor Guide

The Image Editor provides powerful tools to crop, rotate, flip, and apply filters to your images before publishing them to your site. All editing is done in a dedicated modal interface with real-time preview.

To edit an image:

1. Upload or select an image in a Media block
2. Click the Edit button in the media preview
3. The Image Editor modal will open with your image loaded

The editor opens in a full-screen modal with two main sections:

• Left Panel: Crop and Filter controls organized in tabs
• Right Panel: Live preview of your image with the cropping interface

The Crop tab provides tools to adjust your image's composition and orientation.

Quick Rotation:

• 90° Left: Rotate counter-clockwise by 90 degrees
• 90° Right: Rotate clockwise by 90 degrees

Custom Rotation:

• Enter any angle from -360° to 360° in the input field
• Click the checkmark to apply
• Useful for fine-tuning horizon alignment or correcting slight tilts

Flip Options:

• Horizontal Flip: Mirror the image left-to-right
• Vertical Flip: Mirror the image top-to-bottom

Use Cases:

• Correct mirrored images
• Create symmetrical compositions
• Adjust image direction for better flow

Aspect ratio controls constrain your crop selection to specific proportions, ensuring consistent image dimensions across your site.

Preset Ratios:

• Free: No constraints - crop to any size or shape
• Original: Maintains the image's original aspect ratio
• 1:1 (Square): Perfect for profile images, thumbnails, Instagram-style posts
• 4:3: Traditional photo format, good for general content
• 16:9: Widescreen format, ideal for hero images and banners
• 3:2: Classic 35mm film ratio, natural for photography

How It Works:

• Click any aspect ratio button to activate it
• The crop selection automatically adjusts to match the ratio
• Drag the selection to reposition while maintaining the ratio
• Resize from corners to change size while keeping proportions

Zoom Options:

• Zoom In (+): Magnify the image for detailed cropping
• Zoom Out (-): See more of the image context
• Fit: Reset zoom to fit the entire image in view

Tips:

• Zoom in to precisely position crop boundaries
• Use Fit to see the full image after zooming
• Combine with rotation for perfect alignment

The Reset button undoes all transformations (rotation, flip, zoom) and returns the image to its original state. The crop selection is reset to the original aspect ratio.

Note: This does NOT revert filters - use the Filter tab's reset controls for that.

The Filter tab provides professional-grade color and tone adjustments. All filters update in real-time as you adjust the sliders.

Range: 0% (full color) to 100% (pure black and white)

Use Cases:

• Create dramatic, timeless images
• Reduce visual noise and focus on composition
• Match brand aesthetics
• Improve text readability over images (partial grayscale)

Pro Tip: Try 50% grayscale for a subtle, sophisticated look that retains some color.

Range: 0% (completely black) to 200% (very bright)

Default: 100% (original brightness)

Use Cases:

• Lighten underexposed photos
• Darken overexposed images
• Create mood with darker tones
• Improve visibility of details

Pro Tip: Combine with contrast adjustments for best results. Brightness alone can make images look washed out.

Range: 0% (flat gray) to 200% (extreme contrast)

Default: 100% (original contrast)

Use Cases:

• Make images pop with higher contrast
• Soften harsh images with lower contrast
• Improve text readability over images
• Create dramatic, high-impact visuals

Pro Tip: Increase contrast slightly (110-120%) to make most images more engaging.

Range: 0% (grayscale) to 200% (hyper-saturated)

Default: 100% (original saturation)

Use Cases:

• Boost dull colors to make them vibrant
• Reduce oversaturated images for a natural look
• Create muted, sophisticated color palettes
• Match brand color intensity

Note: At 0%, saturation produces the same effect as 100% grayscale.

Range: 0% (no sepia) to 100% (full sepia tone)

Use Cases:

• Create vintage, nostalgic aesthetics
• Warm up cold images
• Add character to historical content
• Create cohesive retro-themed galleries

Pro Tip: Combine sepia with slight contrast increase for authentic vintage photos.

All filters can be combined for creative effects:

• Dramatic B&W: Grayscale 100% + Contrast 130% + Brightness 90%
• Soft Vintage: Sepia 60% + Brightness 110% + Contrast 90%
• Vibrant Pop: Saturation 120% + Contrast 115% + Brightness 105%
• Muted Modern: Saturation 80% + Contrast 95% + Brightness 105%

Experiment with different combinations to find the perfect look for your brand!

When you're satisfied with your edits:

1. Click the Save Image button in the bottom-right corner
2. The editor processes your changes (crop, rotation, flip, filters)
3. A new cropped version is saved alongside the original
4. The modal closes and you'll see your edited image in the preview

What Happens:

• Your original image is always preserved
• A new cropped/filtered version is created
• The cropped version is used on your site
• You can revert to the original at any time

Processing Time: Depending on image size and filters applied, processing may take a few seconds. A loading indicator will show progress.

After saving edits, you can compare the original and cropped versions:

1. In the media preview, click the Original button
2. The view toggles to show the original unedited image
3. Click again (now labeled Cropped) to return to the edited version

Use Cases:

• Compare before and after
• Verify your edits look good
• Show clients both versions

If you want to discard your edits and return to the original image:

1. Click the Revert button (available in both the media preview and the Image Editor modal)
2. Confirm the action when prompted
3. The cropped version is deleted
4. The original image is restored

⚠️ Warning: Reverting is permanent! The cropped version and all edits are deleted. You'll need to re-edit if you change your mind.

When to Revert:

• You want to start over with different edits
• The original works better than the edited version
• You need to crop differently

At the bottom of the Image Editor, you'll see:

• Original: The dimensions of your source image (e.g., 1920 × 1080px)
• Cropped: The dimensions of your crop selection (updates in real-time as you adjust)

This helps you:

• Ensure images meet size requirements
• Maintain consistent dimensions across images
• Verify crop quality (avoid too-small crops that may pixelate)

Image Quality:

• Start with high-resolution images (at least 1920px wide for hero images)
• Avoid cropping too small - maintain at least 800px width for main content images
• Use appropriate aspect ratios for different placements (16:9 for heroes, 1:1 for profiles)

Performance:

• Crop images to remove unnecessary areas - smaller files load faster
• Don't over-filter - subtle adjustments look more professional
• Save bandwidth by cropping before uploading when possible

Consistency:

• Use the same aspect ratio for similar images (e.g., all team photos as 1:1)
• Apply consistent filter settings across image galleries
• Maintain similar brightness/contrast across related images

Workflow Tips:

• Edit images immediately after upload while you're thinking about composition
• Use the toggle view to verify edits before publishing
• Keep originals - you can always revert and re-edit differently
• Test on mobile - use the preview to see how crops look on small screens

While the Image Editor is open:

• ESC: Cancel and close the editor (same as Cancel button)
• Tab: Switch between Crop and Filter tabs

Within the cropper canvas:

• Click and drag: Move the crop selection
• Drag corners: Resize the crop selection
• Scroll wheel: Zoom in/out on the image

Image won't load in editor:

• Check that the image uploaded successfully
• Try refreshing the page
• Verify the image format is supported (JPG, PNG, WebP)

Save button doesn't work:

• Ensure you've made changes (crop, rotate, or filter)
• Check your internet connection
• Look for error messages in the browser console

Filters look different after saving:

• Some browsers render filters slightly differently
• Try adjusting filter values slightly and re-saving
• Check the image on different devices to verify

Cropped image is blurry:

• You may have cropped too small from a low-resolution source
• Revert and start with a higher-resolution original
• Avoid excessive zoom/enlargement

Now that you know how to edit images, explore these related features:

• Lytho Image Import: Import professional assets from your DAM system
• Media Blocks: Learn how to use edited images in your pages
• Block System: Understand how Media blocks fit into the overall content system