Migrating Optimizely image properties

If you're adding the Adaptive Images add-on to an existing Optimizely website you may want to migrate existing image properties to AdaptiveImage or SingleImage properties.

1. Migrate an existing property

Let's say we have a content type like the following:

using AdaptiveImages.Models;
using EPiServer.Core;
using EPiServer.DataAnnotations;
using EPiServer.Web;
using System.ComponentModel.DataAnnotations;

[ContentType]
public class MyPageType : PageData
{
    [UIHint(UIHint.Image)]
    public virtual ContentReference OriginalImage { get; set; }

    public virtual SingleImage NewImage { get; set; }

    public virtual AdaptiveImage NewAdaptiveImage { get; set; }
}

We could then migrate the original image property with something like this:

using AdaptiveImages.Core;
using AdaptiveImages.Models;
using EPiServer;
using EPiServer.DataAccess;
using EPiServer.ServiceLocation;

public class Migrator
{
    public static void Migrate(MyPageType page)
    {
        if (page.IsReadOnly)
        {
            page = (MyPageType)page.CreateWritableClone();
        }

        var optimizelyImage = new SingleImage(page.OriginalImage);

        optimizelyImage.AssignTo(page.NewImage);

        // Use the original image for all form factors of the adaptive image
        optimizelyImage.AssignTo(page.NewAdaptiveImage);

        // Skip validation since original image might not match size and/or proportions constraints
        ServiceLocator.Current.GetInstance<IContentRepository>().Save(page, SaveAction.Publish | SaveAction.SkipValidation);
    }
}

Note: If you skip validation when migrating, users may end up frustrated when editing content with migrated image properties that do not match the constraints. To mitigate this, you can set LaxValidationOfPublishedImages to treat validation errors as warnings for unmodified image properties:

services.AddAdaptiveImages(new AddonSettings { 
   LaxValidationOfPublishedImages = true
});