Install the Optimizely integration (Version 12)

The integration allows Web editors to directly access files and folders from Mediaflow inside the Optimizely 12 interface and embed images either in "on-page" editing, in blocks, or in the text editor (TinyMCE). The integration also allows the users to embed video from Mediaflow using Mediaflow’s media player.

The integration connects directly between the Optimizely 12 webserver and the Mediaflow servers, eliminating the need to download files locally first when mounting images.

To ensure performance and stability, mounted images are always copied to the web server (either under "Page Files" or "Global Files" in Optimizely 12). This means that your website is not dependent on Mediaflow and the integration does not affect the performance of regular page views. All mounted images remain in Optimizely and no changes to the site are required if you uninstall the integration.

Settings in Mediaflow

The integration with Optimizely can be used as soon as it is installed. However, for the files to be available and optimally used, administrators need to prepare the settings for them in Mediaflow first.

Install the integration

Step 1: Get NuGet packages

Mediaflow's integration is a standard NuGet installation. Optimizely has its own NuGet feed that needs to be added to find the plugin. Instructions on how to do this can be found here: https://nuget.optimizely.com/feed/.

Once the feed is added, you can search for the integration inside Visual Studio using Mediaflow.Optimizely.

For more information and the latest version, you can also visit Optimizely's page for the plugin here:https://nuget.optimizely.com/package/?id=Mediaflow.Optimizely.

Step 2: Install the NuGet package

Use Optimizely’s standard NuGet installation process.

Step3: Configure the integration

All configuration of the integration is done in appsettings.json and Startup.cs where you need to add three sections for the integration to work correctly. Firstly you need to add a Mediaflow section in appsettings.json. In the section you need to enter your key. There are also some selectable options that can be used to customise the integration to what suits you best.

"Mediaflow": {
  "Key": "[your key]",
  "LimitEmbedType": "javascript",
 "ForceAltText": true,
 "SaveLocation": "page",
}

"EPiServer": {
    "CmsUI": {
        "ProtectedModule": {
            "Items": [
                {
                    "Name": "Mediaflow.Optimizely"
                }
            ]
        }
    }
}

Mediaflow is not open to all groups in Optimizely to restrict access and prevent unauthorized access to Mediaflow. Allowed groups include CmsAdmin, WebAdmins, Administrators, and the group "Mediaflow," which can be added to grant members access to Mediaflow.

Use Mediaflow integration in TinyMCE (optional)

If you want support for Mediaflow in TinyMCE, you need to add configuration to Startup.cs:

services.Configure<TinyMceConfiguration>(config => {
  config.Default().AddEpiserverSupport()
                  .AddExternalPlugin("mfinsertmedia", "/EPiServer/Mediaflow.Optimizely/Scripts/mfSelector/tinymce.selector.js")
                  .AppendToolbar("mfinsertmedia");
});

Using the Mediaflow file picker as a separate property (optional)

To use the Mediaflow selector as a separate property, you can add it to the current model as "MediaflowObject" as shown in the example below:

using Mediaflow.Optimizely.Models;

[Display(GroupName = SystemTabNames.Content)]
public virtual MediaflowObject MediaflowPicker { get; set; }

From MediaflowPicker, you can then retrieve information about the selected media, whether it is an image or video, as well as metadata such as width, height, Mediaflow ID, alt text, etc.

Below is a simple example of how to display an image or video based on type:

@if (Model.CurrentPage.MediaflowPicker.Type == "image") {
  <img src="@Model.CurrentPage.MediaflowPicker.FileUrl" alt="@Model.CurrentPage.MediaflowPicker.AltText" />
} else {
  @Html.Raw(Model.CurrentPage.MediaflowPicker.EmbedCode)
}

Using MediaflowPicker in lists (optional)

Optimizely recommends putting complex properties in blocks within a ContentArea. This is also what we recommend and can be achieved by the code example below:

[AllowedTypes(new[] { typeof(MediaflowBlock) })]    public virtual ContentArea MFBlockList { get; set; }

public class MediaflowBlock : SiteBlockData{    [Display(        GroupName = SystemTabNames.Content,        Order = 1        )]    public virtual MediaflowObject Media { get; set; }}

Segment content using role mapping (optional)

By default, all users in Optimizely 12 can access the same shared content when mounting images from Mediaflow on the website. If you have multiple groups of web editors working on different parts of the site, there may be a need to segment the content. This means that the users will have access to different content based on which group they belong to. This can be achieved through the Virtual Role feature in Optimizely.

Note

To do this, a unique authentication key in Mediaflow is required for each group. Please note that this may be associated with a cost depending on your agreement.

In appsettings.json, you link a role in Optimizely to a custom key, which, in turn, is linked to a group in Mediaflow where access to folders can be restricted. It is also possible to specify a wildcard where all users who do not belong to a group/Virtual Role see the same content.

Example:

"Mediaflow" : {
  "VirtualRoleMapping" : [
    {
      "VirtualRole": "CmsAdmins",
      "ServerKey": "ZZXXCCVVBB"
    },
    {
      "VirtualRole": "CmsEditors",
      "ServerKey": "AABBCCDDEE"
    },
    {
      "VirtualRole": "*",
      "ServerKey": "QQWWEERRTT"
    }
  ]
}