Mediaflow has a ready-made integration with Optimizely. As a web editor, you have direct access to files and folders from Mediaflow and can directly insert images from within Optimizely's interface. You don't need to download files to your computer as the integration connects directly between Optimizely and Mediaflow. You also don't need to be separately logged into Mediaflow when working in Optimizely.
To avoid affecting performance and stability, the inserted images are always copied over to your web server, which means your website does not rely on Mediaflow to function. The integration with Optimizely primarily works by an additional button appearing next to the usual file selector in Optimizely. This applies to all places where you can select images using a file selector, even within blocks and both in the page view and in the properties view.
Get Started with the Integration
You can start using the integration as soon as it is installed in Optimizely. To use the files optimally, you need to have prepared the settings for them in Mediaflow first.
Insert Images in Optimizely
To the right of the Optimizely file selector, Mediaflow is available via a button with Mediaflow's logo.
As a user, you can either select files as usual from the file selector or drag and drop from the media library. Additionally, you can choose media files from Mediaflow. After you have inserted the file from Mediaflow, it is also available as a regular file within Optimizely's media library.
When you click the "Select image from Mediaflow" button, a dialog window opens within Optimizely. This means that no new browser window or tab opens; you can access Mediaflow directly from where you are. The size and content of the window adjust based on the available space in the browser. If you close the dialog window by clicking the cross in the upper right corner, the function is canceled, and you return to where you were before.
In the dialog window, you can access folders and content from Mediaflow. Only file types that can be inserted as images on the webpage are displayed (e.g., PDF and Word documents are not shown here). The search box is also available in the upper right corner, where you can search for files. Additionally, you can set it up so that you can access "My collections" and "Recently added files" besides the folder tree.
In the right panel, you can directly access information about the image, publishing history, and rights. The info tab includes details such as the photographer, description, photo date, labeling, etc. Under the history tab, you can directly see how the image has been used previously and where it is currently used, for example, in printed materials and on the web. Under the license tab, you get information about publishing rights, model releases, and limited usage. If the image lacks or has limited publishing rights, this is clearly indicated in red text, and an additional warning dialog appears if you choose to proceed and insert such an image.
Images automatically adapted for the web
You do not need to pre-adjust images to the correct format for the web; instead, Mediaflow takes care of this automatically when you insert the image. For example, images stored in the image bank as high-resolution TIFF images with an Adobe-98 color profile are converted to JPEG with the correct size and resolution and an sRGB color profile adapted for the web when they are inserted.
When you find an image you want and are allowed to use, click the "Use this image" button. You then proceed to the next step, where you crop the image to fit on the page.
Here, you select the image size based on the download formats you have defined within Mediaflow, with the correct size in pixels, file format, color profile, compression, etc. You can also enter your own size formats or choose to crop the image freely. If you crop the image too tightly or if you have chosen an image with too low a resolution to fit, you will receive a clear warning that the quality may be poor.
When you are satisfied with your choice of format and cropping, click the "Insert image" button. The image is then transferred from Mediaflow to Optimizely's server, correctly cropped and adapted in format, color profile, and compression. Once the image is inserted on the page or in the block you are editing, the dialog window closes, and you see the new image finished on the page.
Insert image in body text
Besides the possibility to insert images in image elements or blocks, it is also possible to insert images from Mediaflow into body text. You do this via a Mediaflow button in the text editor.
Here, too, you get the same dialog window as before, where you can select images to crop and adjust for the page. After inserting the image into the body text, you can manage it just like regular images in Optimizely, meaning you can move the image around, change its size, text flow, margins, etc. You can also open the image in Optimizely's image editor for further processing.
Insert videos in Optimizely
Video files can be inserted in the same way as images using the video button when you are in the text block or in a video block, depending on your website’s configuration.