Installing ImageVault Connect for Episerver (v12)

Step 1 - NuGet packages

Add a reference to the ImageVault.EPiServer.UI NuGet package to your project. The version should be >= 12 for .NET 5 / CMS 12.

Step 2 - Adding ImageVault to the site

Service configuration

ImageVault is added to the site by including it in the service configuration. ImageVault.EPiServer.UI.Extensions.DependencyInjection contains extension methods to easily include the default ImageVault functionality.

In your site's service configuration, add the following:

services.AddImageVault(webHostingEnvironment);

You may also need to include the following to configure the ImageVault handler to map against the ApplicationUser class:

services.AddImageVaultIdentityProvider<global::EPiServer.Cms.UI.AspNetIdentity.ApplicationUser>();

AddImageVault adds everything required for ImageVault, specifically:

  • it configures and sets up the ImageVault EPiServer module
  • it adds a MemoryCache (using Microsoft.Extensions.Caching.Memory, services.AddMemoryCache())
  • it adds the ImageVault TinyMCE addon
  • it hooks up publishing events to enable tracking/publishing details for ImageVault assets
  • it adds the ImageVault Client (with default configuration), factories and other relevant objects to the DI container
  • it registers a view location extender to include a default display template for rendering MediaReference properties

Middleware configuration

ImageVault also needs a couple of handlers, which are added through extension methods in ImageVault.EPiServer.Middleware. In the Configure method or your site, include the following:

app.UseImageVaultHandlers();

and, if you are using EPiServer authentication, configure the identity proxy handler with:

app.UseImageVaultIdentityProxy<global::EPiServer.Cms.UI.AspNetIdentity.ApplicationUser>();

Step 3 - Configuring ImageVault

ImageVault is configured using option classes or in the relevant section of the app settings. ImageVaultClientOptions is the name of the options class for client configuration. It can also be configured in the app settings section ImageVault:Client.

For a configuration example and full details, see the configuration page.

Additionally, you can configure the following site options using the ImageVaultOptimizelyCommonOptions options class, or ImageVault:Optimizely:Common section in app settings:

Name Description
DisablePingOnPublish See Configuration section
DisableClaimsRemap See Configuration section
DisableContentEventHandlers Disables all ImageVault content event handlers. See Content event handlers

TinyMCE

ImageVault adds two buttons (imagevault-insert-media and imagevault-edit-media) to the end of the TinyMCE toolbar as part of the service configuration. If you want to customize this, insert your Episerver TinyMCE configuration after services.AddImageVault().

Step 4 - Examples and miscellaneous

Example startup and middleware registration

Startup.cs example for CMS 12 Alloy templates:

public class Startup
{
    private readonly IWebHostEnvironment _webHostingEnvironment;
    private readonly IConfiguration _configuration;

    public Startup(IWebHostEnvironment webHostingEnvironment, IConfiguration configuration)
    {
        _webHostingEnvironment = webHostingEnvironment;
        _configuration = configuration;
    }
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCmsAspNetIdentity<ApplicationUser>();
        services.AddMvc();
        services.AddAlloy();
        services.AddCms();

        services.AddImageVault(_webHostingEnvironment);
        services.AddImageVaultIdentityProvider<ApplicationUser>();
        services.AddEmbeddedLocalization<Startup>();
    }
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
        //...
        app.UseStaticFiles();
        app.UseRouting();
        app.UseAuthentication();
        app.UseAuthorization();

        //add ImageVault handlers
        app.UseImageVaultHandlers();
        //add ImageVault identity handler (if optimizely auth should be activated)
        app.UseImageVaultIdentityProxy<ApplicationUser>();

        app.UseEndpoints(endpoints =>
        {
            //... 
        });
    }
}

Example client configuration in appsettings.json

{
  "EPiServer": {
    ...
  },
  "ImageVault": {
    "Client": {
      "Url": "https://my.imagevault.app/",
      "DefaultPublishedMediaUrlBase": "https://my.imagevault.media", 
      "SdkUser": {
        "Username": "iv4sdk",
        "Password": "mysupersecretsdkuserpassword"
      }
    }
  }
}

References

Client configuration