Follow

Episerver

Using the EPiServer connector for QBank DAM

Integrating EPiServer 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 EPiServer, web editors will be able to access content from the DAM system by clicking the QBank connector icon (see image below) directly either from the rich text editor menu or when adding images to content objects.

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 mediapicker (below) allows a web editor to easily find and retrieve any asset approved for use within the EPiServer instance.

Finding the right asset

The mediapicker 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 EPiServer

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 Episerver, the system also keeps track of where and how images are used throughout your websites, frontends or intranets. When an image is published to Episerver, 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 Episerver 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.

 

 

Technical Connector overview and description

The need for QBank Media support in EPiServer

When having the need for working with Media in a professional way in the EPiServer site, QBank offers a solution to that need through the EPiServer Media Connector. Using the EPiServer Media Connector all media handled within QBank are made available to the site Editors both when working with rich text in TinyMCE and when working with media properties on pages or in blocks.

The solution selected for the Connector is to allow Editors in EPiServer to select, and if needed, adjust QBank media from the central repository and then deploy the media into the site. The selection of the Media is done in the Media Picker which is a tool very similar to the QBank administration tool so users will be very familiar with the look and feel of the Media Picker.

Media selected and deployed will be placed in the Media store of the EPiServer Site. This makes the solution very robust when it comes to production because every media item will be pre-made and resist on the site. The pre-made formats will also minimize the risk of DOS attacks focusing on image generation overloading the site.    

Introduction to the Connector package

The QBank for EPiServer CMS 7.5/8/9 package is created to make it possible to use QBank as a media source for an EPiServer based solution. Within the editorial environment of EPiServer, QBank media is selected and published into the EPiServer media store.

The package includes both a UI-editor for the ContentReference and a QBank tool in TinyMCE. Both these tools for selecting media will initiate the publishing of QBank media into EPiServer.

The media created in EPiServer is of the type QBankMedia. Objects of this type will, besides of built in EPiServer media properties, also include QBank Property data, multiple prepared media formats and more.

Architectural overview

The QBank module for EPiServer CMS 7.5/8/9 is built with the goal to make a seamless integration between the two products. As an EPiServer developer one can continue to work with known concepts like using a local ContentReference as a media reference and also use attributes on properties to control the features of the UI.

Selected images are actually transformed and published into EPiServer so using them is identical to how you use any media in EPiServer. The first conversion will be made when the editor selects the media the first time. Additional formats and QBank properties will be added later through a scheduled job recommended to run every minute.

It can be noted that each time the user selects an image a new EPiServer media will be created in a predefined folder and the ContentReference will point to this media.

Focus has been made to get the module to work well in a MVC-environment (Razor) but it should be possible to also use it with .NET-forms.

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments

Powered by Zendesk