Install the Optimizely integration for images (Version 11)

The integration allows web editors to directly access files and folders from Mediaflow inside the Optimizely 11 interface and embed images either in "on-page" editing, in blocks, or in the text editor (TinyMCE).

The integration connects directly between the Optimizely 11 webserver and the Mediaflow servers, eliminating the need to download files locally.

To ensure performance and stability, mounted images are always copied to your web server (either under "Page Files" or "Global Files" in Optimizely 11). 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.

Traffic Information

For firewalls, allow https traffic (port 443) from the Optimizely server to mediaflow.com and [servernumber].inviewer.se. The server number can be found in Mediaflow in the integration settings for the Optimizely integration.

https://app.mediaflow.com/settings/integrations

Traffic always occurs from the web server to our servers, never the other way around, so there is no need to open any incoming tunnels. For web editors working in Optimizely, all communication with Mediaflow occurs directly from the browser to our servers over https.

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 for images

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.

There are two NuGet packages available, the main package and a package only needed if you use TinyMCE.

• Mediaflow.Image.Plugin: for inserting images in blocks and pages

• Mediaflow.Image.TinyMCEPlugin: for inserting images inline in the rich text editor (requires TinyMCE)

For more information and the latest version, you can also visit Optimizely's page:

https://nuget.optimizely.com/?q=mediaflow

Note:

Installation information for legacy versions is available later in this article.

Step 2: Install the NuGet packages

Use Optimizely’s standard NuGet installation process.

Step 3: Connect Mediaflow and Optimizely

The following two values should be automatically inserted under configuration > appSettings in your configuration file web.config.

<add key="MFPKey" value="" />

<add key="MFPServerID" value="" />

The values for MFPServerID and MFPKey can be found in Mediaflow in the integration settings for the Optimizely integration.

https://app.mediaflow.com/settings/integrations

You need to have the correct permissions to view the integration settings. If they are not available, you can enter superadmin mode or contact a Mediaflow administrator in your organisation.

Step 4: Configure the Optimizely site

Normally, no changes are needed in templates or blocks in Optimizely 11; our plugin "hooks onto" the existing image property UI (UIHint.Image) in Optimizely 11.

Configure TinyMCE

To make the "Insert image from Mediaflow" button in the TinyMCE editor in Optimizely available, you might also need to set it in the default template (or equivalent template in use) in the admin mode (for type XHTML String >= 255).

This especially needed in Optimizely 10 and earlier (and early version 11) if you weren’t using the TinyMCE module (i.e., using the previously built-in TinyMCE editor).

Step 5: Setting up alt-text (optional)

As an option, you can add alt-texts to Optimizely 11 from Mediaflow. Due to how Optimizely works, you need to do a custom implementation of the alt-text function for each site, since our integration cannot determine which field you use in your templates and blocks for alt-text. To ensure the alt text is placed in the correct field, you need to link the field you are using, with the information sent from Mediaflow.

Modify the file prepareimage75.aspx

• Go to \modules_protected\Mediaflow.Image.Plugin\

• Unzip the file Mediaflow.Image.Plugin.zip

• A new catalog named mfimage is created. Open the catalog and inside there is a file named prepareimage75.aspx. The path should be: modules\_protected\Mediaflow.Image.Plugin\mfimage\prepareimage75.aspx

• Open and edit the file. Around line 127, insert the field you use for alt-text. This connects it to the variable sDescription. Note that for legacy reasons, the variable is named sDescription, even if it contains the alt-text from Mediaflow.

Example: if you use a field named "AltText," you specify:

file1.Name = sFilename; file1.AltText = sDescription;

There is also an option to connect fields for photographer, if you use it in your templates. Use the same procedure as above but use the variable name sPhoto.

Note

These setting might be overwritten if a new version of the integration is installed. Make sure your settings for alt text is still in place after updating to a new version.

Additional configuration options

There are also a number of other parameters that can be configured. These are added in the configuration file web.config under configuration > appSettings.

MFPDescriptionAsAlt

Controls whether the description field in Mediaflow can be retrieved as alt text in Optimizely.

Possible values

• true
  If there is text in the alt-text field in Mediaflow, this text will be inserted. If alt text is missing, the text from the description field will be used instead (Default option).

• false
  The alt text is only fetched from the alt-text field. If it is empty, no other data is fetched from Mediaflow at all. Use this if the description field in Mediaflow should never be imported into Optimizely.

Example:

<add key="MFPDescriptionAsAlt" value="false" />

MFPAllowEmptyAlt

Controls whether the alt-text field must be filled in before the user can mount an image.

Possible values

• true
  The alt-text field can be empty, meaning it is not mandatory to add an alt text (Default option).

• false
  The alt-text field cannot be empty, meaning it is mandatory to add an alt text.

Example:

<add key="MFPAllowEmptyAlt" value="false" />

MFPSaveLocation

Controls where images should be saved globally in the Optimizely image archive. Note that the images are always copied to the website's web server.

Possible values

• any
  The user can choose whether the image should be saved under "Page files" or "Global files" (Default option).

• pagefiles
  Files are always saved under "Page files" / "Images on this page”.

• globalfiles
  Files are always saved in the "MediaflowPro" folder under "Global files”.

Example:

<add key="MFPSaveLocation" value="pagefiles" />

MFPResponsiveInsert

Controls whether images should be mounted responsively in running text (TinyMCE).

Possible values

• true
  Images are mounted responsively, meaning they shrink in size if necessary (Default option).

• false
  Images are mounted with a fixed size.

Example:

<add key="MFPResponsiveInsert" value="false" />

Segment content using role mapping

By default, all users in Optimizely 11 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.

The first step is to create a Virtual Role for each group that should see unique content. These must then be associated with an authentication key in the web.config file under configuration > appSettings (in a similar way to a standard installation with only one key).

It is also possible to specify a wildcard where all users who do not belong to a group/Virtual Role see the same content.

This must be included in web.config:

• MFPKey
  Should have the value “virtual”.

• MFPServerID
  ID of the Mediaflow server, which can be found on the integrations tab inside Mediaflow.

• MFPVirtualRoleMapping
  Should have the value for each Virtual Role and the unique key that should be associated with the group. Separate with semicolon. For the wildcard, use an asterisk (*) instead of the group/Virtual Role name.

Example:

<configuration>
  <appSettings>
    <add key="MFPKey" value="virtual" />
    <add key="MFPServerID" value="16" />
    <add key="MFPVirtualRoleMapping" value="CMSEditors=ZZXXCCVVBB;StandardUsers=KKJJHHGGFF;*=QQWWEERRTT"/>
  </appSettings>
 </configuration>

Legacy versions

The integration with Optimizely is also available in legacy versions starting from version 7.1 (both as MVC or Web Forms). These are distributed as .zip files and have a different installation procedure than those distributed via Nuget.

Please contact Mediaflow Support to get access to legacy integrations.

Note

The legacy integrations are not supported nor updated with the features and security updates that are available in the latest version.

Installation information for legacy integrations

The legacy plugins are distributed as a zip file with content in subdirectories that match the directories of a standard Optimizely installation. In the root of the zip file, there are two C# files as source code (not as a compiled dll) that should be added to the project and compiled (it's also possible to place them in the App_code directory in the web root for automatic compilation).

The catalogs in the zip file should be placed in the corresponding folders in the Optimizely root (no files should be overwritten; all should be new). Note that you need to change the namespace in the file MFPImageEditorDescriptor.cs to your namespace (currently named "EPiServerSite1" in the file).

Then add the following to module.config in the correct section under the module:

<dojo>
<paths>
   <add name="mfp" path="Scripts" />
</paths>
  </dojo>

Adding alt-Texts in legacy versions

Due to how Optimizely works, you need to do a custom implementation of the alt-text function for each site, since our integration cannot determine which field you use in your templates and blocks for alt-text. Therefore, you must link the field you use to the information coming from Mediaflow.

Modify the file prepareimage75.aspx

• Go to ClientResources\Scripts\mfpinsertmedia and open the file prepareimage75.aspx.

• Around line 127, insert the field you use for alt-text. This connects it to the variable sDescription. Note that for legacy reasons, the variable is named sDescription, even if it contains the alt-text from Mediaflow.

Example: if you use a field named "AltText," you specify:

file1.Name = sFilename; file1.AltText = sDescription;