Getting started

1. Install package

Install AdaptiveImages from the Optimizely NuGet feed.

2. Enable the add-on

Enable the add-on in your Startup class:

using AdaptiveImages.Initialization;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCms()
                .AddAdaptiveImages();
    }
}

Note: To override the default settings, pass an IAddonSettings instance to AddAdaptiveImages(). See Configuration for details.

3. Add TinyMCE support (optional)

Optionally add the Adaptive Images plugin to TinyMCE:

using AdaptiveImages.TinyMce;
using EPiServer.Cms.TinyMce.Core;
using Microsoft.Extensions.DependencyInjection;

public class Startup
{
    public void ConfigureServices(IServiceCollection services)
    {
        services.Configure<TinyMceConfiguration>(config =>
        {
            config.Default()
                  .AddPlugin(TinyMceAddonSettings.PluginName);
        });
    }
}

Note: See TinyMCE settings for details on how to configure the TinyMCE support.

4. Add image providers (optional)

Add one or more image providers, for example by installing the AdaptiveImages.Unsplash NuGet package and adding the following to your Startup class:

services.AddUnsplash();

Note: If you add one or more image providers, you may need to click Reset views among user settings in Optimizely for the Image bank component to be displayed in the right pane.

5. Add image properties

Add SingleImage or AdaptiveImage properties to your content types.