Insert images and videos in Optimizely (version 12)

With the Optimizely integration, you can publish your images, videos and SVG files from Mediaflow directly on your website or intranet. A convenient way for editors to always have access to files that are GDPR-compliant, have the correct alt text and videos that are accessibility-adapted. As an Optimizely user, you do not need to download files to your computer first, and therefore do not need your own Mediaflow login either. (You can of course have a Mediaflow login for other needs.)

Get started

You can start using the integration as soon as it has been installed in Optimizely. For the files to be selected and used optimally, the settings in Mediaflow need to be prepared first.

Good to know

For maximum performance and stability, the inserted images are physically copied to the Optimizely server. This means that your website does not depend on Mediaflow to function, and the integration does not affect its performance.

What the integration does

Mediaflow is the organisation's platform for digital files (DAM). The integration allows you to browse Mediaflow and insert images, videos and SVGs directly into our properties when editing pages and blocks.

• When you insert an image, the file is copied to Optimizely's media library on the web server (under page files or a global folder, depending on the website's settings).
• Video is usually stored as embed code from Mediaflow.
• SVG files are uploaded to the CMS in the same way as images.

Open the Mediaflow selector on a property

On a page or block with a Mediaflow property, you will see either the Add media button (when the property is empty) or a thumbnail (when media has already been selected).

1. Open the page or block in editing mode.
2. Find the Mediaflow property (for example, Mediaflow Image, Mediaflow Image, SVG or video or a TinyMCE field).
3. Click Add media from Mediaflow, or click the thumbnail to open the selector again.

Browse and select files in Mediaflow

Click the text Insert media or Add media from Mediaflow to add media and open Mediaflow's file selector.

Here, you can navigate between folders that an administrator has chosen to display in the Optimizely integration, or search for a file.

When you have found the image or video you want to use, click the file and then click Use this file.

Depending on the property, you may only see certain file types (for example, only images for an image property, or only SVGs for an SVG property).

Insert an image

For an image property, select an image file (JPG, PNG, WebP, etc.). You can then choose which download format you want to use and enter alt text. The image is uploaded to Optimizely and displayed as a thumbnail.

When the image has been inserted in Optimizely, you can see the file name and replace the file with another one from Mediaflow by selecting Select media from Mediaflow.

You can also click Edit metadata, and change the metadata associated with the image.

Insert a video

For a video property, select a video file in Mediaflow. You can choose a start time in the video and an embedding type. The integration stores embed code and displays a preview on the property – no video file is stored in the CMS media library in the same way as images.

If your website allows both embedding types, you may be able to choose between JavaScript and iframe. 

In the text editor (TinyMCE), videos are always inserted as an iframe.

Insert an SVG

For an SVG property (or a combined property that allows vector graphics), select an SVG file. The file is uploaded and sanitised for use on the website.

If an SVG file is invalid, the upload may fail with an error message. Try another file or contact your administrator.

Use Mediaflow in the text editor (TinyMCE)

When TinyMCE is configured for your content type, the Mediaflow button is displayed in the toolbar.

1. Place the cursor where you want to add media.
2. Click the Mediaflow button.
3. Select a file in the file selector. In TinyMCE, you can select images, videos and SVGs.
4. The image or video is inserted into the body text field.

Edit metadata for an image in the text editor

Click a Mediaflow image in the body text and select Edit metadata  in the image toolbar, or right-click the image. There, you can change the alt text, description and photographer. If mandatory alt text is enabled, the alt text must be filled in.

If you change the metadata on the media object via Go to media, the image on the published page is updated automatically – you do not need to remove and insert it again.

Change, edit or remove media

When a property already contains media, click the ⋯ menu (the hamburger menu) on the thumbnail.

Edit metadata (alt text, description, photographer)

For images and SVGs, use Edit metadata to update accessibility and credit fields.

These values may be displayed on the published website depending on your templates. Alt text is particularly important for accessibility.

When alt text is required

If your administrator has enabled mandatory alt text, you must enter alt text in the selector before you can insert an image.

Crop an image

For image properties that support cropping, use the cropping tool in the file selector before confirming your selection. You can open Edit media later to adjust the crop.

Insert media into a standard image property

Some pages use Optimizely's built-in image property (ContentReference with UIHint.Image). When Mediaflow is enabled, you will also have the option Insert media (Mediaflow) alongside the standard CMS image selector.

The file is uploaded to the CMS media library and linked to the property, much like when you select an image from Media.

How to find uploaded files in Optimizely

After you have inserted an image, it is displayed in Optimizely under Media. Depending on the website's settings, files may be stored under the current page's folder or in a global folder (for example, Mediaflow or a custom folder name).

Ask your administrator if you are unsure which folder structure your website uses.

If the file selector does not work