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

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

Optionally add one or more image providers, for example by installing the AdaptiveImages.Unsplash NuGet package and adding the following:

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.