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 includes an in-browser image editor available to editors directly in the Media Library. No external tools required.

Capabilities:

---

2. Accessing the Image Editor

Assets Pane → Media Library → Select an image
   → Click the pencil (✏️) icon OR
   → Right-click → Edit Image
         ↓
   Image editor opens in the Edit View

---

3. Focal Point

The focal point marks the most important area of an image. It is used during responsive cropping to ensure the subject stays visible at all screen sizes.

How it works:

1. Editor clicks on the image to set a focal point (stored as % X/Y coordinates)
2. Developer reads the focal point in code
3. Use object-position CSS or server-side cropping to respect the focal point

// ImageData includes FocalX and FocalY (0-100%)
public class SiteImage : ImageData
{
    // FocalX and FocalY are built into ImageData
    // Access via: imageData.FocalX, imageData.FocalY
}

@{
    var image = Model.Image != null
        ? _contentLoader.Get<ImageData>(Model.Image)
        : null;
}

@if (image != null)
{
    <div style="overflow:hidden; width:100%; height:400px;">
        <img src="@Url.ContentUrl(image.ContentLink)"
             style="object-fit: cover;
                    object-position: @(image.FocalX)% @(image.FocalY)%;
                    width: 100%; height: 100%;" />
    </div>
}

---

4. ImageData Class

All uploaded images are stored as ImageData instances:

[ContentType(GUID = "...", DisplayName = "Site Image")]
[MediaDescriptor(ExtensionString = "jpg,jpeg,png,gif,webp,svg")]
public class SiteImageFile : ImageData
{
    [Display(Name = "Alt Text", Order = 10)]
    public virtual string AltText { get; set; }

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

    // Inherited from ImageData:
    // - FocalX (double) — % from left
    // - FocalY (double) — % from top
    // - Thumbnail (BlobReference)
    // - IsImage → true
}

---

5. MediaDescriptor Attribute

// Tells CMS which file extensions map to this content type
[MediaDescriptor(ExtensionString = "jpg,jpeg,png,gif,webp,svg,bmp,tif,tiff")]
public class SiteImageFile : ImageData { }

[MediaDescriptor(ExtensionString = "pdf,doc,docx,xls,xlsx")]
public class DocumentFile : MediaData { }

[MediaDescriptor(ExtensionString = "mp4,webm,mov,avi")]
public class VideoFile : MediaData { }

---

6. Supported Image Formats

---

7. Blob Storage

Media files in CMS 12 are stored using blob providers:

// Development: local file system (default)
// Production:  Azure Blob Storage (recommended)

// Register Azure Blob provider in Program.cs
builder.Services.AddAzureBlobProvider(options =>
{
    options.ConnectionString = configuration["AzureBlobStorage:ConnectionString"];
    options.ContainerName    = "mysitemedia";
});

// Programmatic blob access
public class ImageService
{
    private readonly IBlobFactory _blobFactory;
    private readonly IContentRepository _contentRepository;

    public ImageService(IBlobFactory blobFactory, IContentRepository contentRepository)
    {
        _blobFactory = blobFactory;
        _contentRepository = contentRepository;
    }

    public async Task<Stream> GetImageStream(ContentReference imageRef)
    {
        var image = _contentRepository.Get<ImageData>(imageRef);
        var blob  = _blobFactory.GetBlob(image.BinaryData.ID);
        return await blob.OpenReadAsync();
    }
}

---

8. Generating Thumbnails Programmatically

// Use IImageService or ImageSharp library (3rd party)
// Built-in thumbnail: image.Thumbnail (low-res preview used in Assets pane)

// For custom resizing, use ImageResizer or ImageSharp:
// Install: EPiServer.ImageResizer.Core (older) or use ImageSharp middleware

---

9. Content Area with Images

// Allow images in a ContentArea
[AllowedTypes(typeof(ImageData))]
[Display(Name = "Hero Image", Order = 10)]
public virtual ContentReference HeroImage { get; set; }

// Or in a ContentArea mixed with blocks:
[AllowedTypes(typeof(IContentData), typeof(ImageData))]
public virtual ContentArea MainContent { get; set; }

---

Review Questions

1. What does the focal point feature do? (Marks the important area of an image for smart cropping)
2. Which class do custom image content types inherit from? (ImageData)
3. What attribute maps file extensions to a content type? ([MediaDescriptor])
4. Where are FocalX and FocalY stored? (On the ImageData instance, as % values 0-100)
5. What blob provider is recommended for production? (Azure Blob Storage)