QBank Connector for Optimizely

Integrating Optimizely CMS with QBank DAM can vastly improve the efficiency and workflow for web editors working on image intensive web sites.

There are a number of benefits, most notable are:

  • Easy access to approved images for the selected channel
  • No need to manually convert between high resolution and web ready images
  • Access to asset related metadata
  • Overview and control of what is used, where, and how, from within QBank DAM

With the QBank connector for Optimizely CMS formerly known as EPIServer CMS, web editors will be able to access content from the DAM system by clicking the QBank connector icon directly either from the rich text editor menu or when adding images to content objects.

Using the Connector

Adding images to a content block

A content block is a placeholder object which controls the size for an image. Content blocks are used where the dimensions of an image must always be the same. Example uses of content blocks are hero/header images and carousel images. To efficiently work with content blocks, QBank provides functionality for cropping any image to fill the entire area of the content block. 

Adding images to articles using Tiny MCE (Rich text editor)

When working on an article, you can easily access images stored in QBank DAM by clicking the QBank icon in the editor toolbar- the will open the Mediapicker, where assets that are approved for the channel are shown.

The media picker (below) allows a web editor to easily find and retrieve any asset approved for use within the Optimizely instance.

Finding the right asset

The media picker provides a number of methods to search and find assets stored within your QBank DAM. Expand the left side menu and filter either by category, folder or moodboard. If necessary, you may also upload an image directly by selecting "Upload".

The categories and folders may differ from what you see when logged into QBank DAM - this is controlled by what access rights the web editors are given and is intended to only present relevant content that has been approved for use within the EPiServer channel.


Selecting and using an asset within Optimizely

Double click on any image to view detailed information, or navigate to the asset you wish to use and hover over the "+"-icon. From there, select either view to see more details about the asset, or click "Crop" if you want to use only a select part of the image. 

Cropping an image

Depending on how your connector has been configured, you can either select from a preset list of image templates, or perform cropping by manually selecting the part of the image you want to use. Please note that QBank takes care of conversion between different colorspaces for you, so even if the originally stored image is in CMYK, the result will always be web ready, RGB colorspace and in a format optimized for web publishing. Finish this operation by clicking "Use media (adjusted)". 


Usage tracking

In addition to streamlining the process of using assets from QBank DAM in Optimizely, the system also keeps track of where and how images are used throughout your websites, frontends or intranets. When an image is published to Optimizely, information is fed back to QBank and can be accessed from each asset under the External usage section.

Re-cropping images

With the same image used in a number of different crop variants, keeping track of them all can be quite a challenge. Because QBank receives detailed usage information sent from our Optimizely connector - not only where an image has been used, but how - we are able to display these variants. As an image editor, you are now able to not only get this overview, but to perform re-cropping on existing images. When done, the new versions will automatically replace the previous ones, no matter how many places they are used in.