Image Editor - Optimizely CMS 12

Exam Area: Area 1 – Product Knowledge (15%)
Reference: https://docs.developers.optimizely.com/content-management-system/docs/image-editing

1. Built-in Image Editor

CMS 12 has a built-in image editor that allows editors to:

• Crop – crop images
• Resize – change image dimensions
• Rotate – rotate images
• Flip – flip images (horizontal/vertical)
• Focus point – set a focus point for responsive cropping

2. Accessing the Image Editor

Media Library → Select image → Edit button (pencil icon)
    └── Opens in-context image editor

3. Focal Point

// Focal point is stored with the image
// The renderer can use the focal point to crop responsively

[UIHint(UIHint.Image)]
public virtual ContentReference HeroImage { get; set; }

// In View - use focal point
@{
    var imageData = _contentLoader.Get<ImageFile>(Model.CurrentPage.HeroImage);
    var focalX = imageData.FocalX;  // % from left
    var focalY = imageData.FocalY;  // % from top
}
<img src="@Url.ContentUrl(imageData.ContentLink)"
     style="object-position: @(focalX)% @(focalY)%" />

4. Supported Image Formats

jpg/jpeg, png, gif, webp, svg, bmp, tif/tiff

5. ImageData Class

// Media content type for images
[ContentType(DisplayName = "Image", GUID = "...")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,png,gif,webp")]
public class ImageFile : ImageData
{
    // ImageData has: Width, Height properties built-in
    
    [Display(Name = "Alt text")]
    public virtual string AltText { get; set; }

    [Display(Name = "Caption")]
    public virtual string Caption { get; set; }
}

Review Questions

1. What operations does the CMS image editor support? (Crop, resize, rotate, flip, focal point)
2. What is the focal point used for? (Defines the focus point for responsive cropping)
3. What does the ImageData class provide? (Width, Height, and base media functionality)