QBank Media Connector

Using the QBank Media Connector your Web Content Management system can be integrated to your QBank DAM, allowing you to access and publish any content using a rich search and browse interface.

QBank at the moment the Connector supports following systems:

  • Wordpress
  • EPIServer
  • MODx
  • Sharepoint
  • Drupal
  • TYPO3
  • Roxen

In addition, QBank Media Connector can be integrated with any system supporting RESTful web services using the QBank API.

The configurable Media Picker

This document focus on how the Media Picker can be controlled when opened through the API. There are several options that are possible to control.

Configuration documentation

	"container": null,
	"title": "QBank CMS Connector",
	"mediaId": null,
	"modules": {
		"folders": true,
		"categories": true,
		"moodboards": true,
		"settings": true,
		"content": {
			"header": true,
			"toolbar": true,
			"details": true
		"upload": {
			"maxFileSize": 0,
			"chunkSize": "10mb"
		"imageTool": {
			"crop": true,
			"subject": "medium"
	"onSelect": null,
	"onReady": null,
	"onClose": null,
	"pageUrl": null,
	"requestedTemplates": null


Basic javascript setup:

var qbcConfig = {
	api: {
		host: '',
		access_token: 'xxxxxxxxxxx'
	gui: {
	        basehref: 'http://.....'
	deploymentSite: xx				
}; var QBC = new QBankConnector(qbcConfig); //Note: Using $(document).on('ready') instead of $(window).on('load')
//and opening the dialog right away without any triggers may
//cause the browser tab/window to appear as "loading" indefinitely due to
//AJAX calls firing before all resources on the page are loaded
//(resources as in scripts, images, not just HTML)
$(window).on('load', '#button', function() { var mediaPicker = new QBC.mediaPicker({ container: '#wrapper', onSelect: function(media, templates) {
}, onReady: function() {}, onClose: function() {} });

Opening the media picker with a specified media and optional saved cropping as first view:

var lastCrop = null, mediaPicker = new QBC.mediaPicker({
	container: '#wrapper',
	onSelect: function(media, templates) {
		lastCrop = templates[0];
		lastCrop.mediaId = media.mediaId;
		lastCrop.crop.locked = false;
	onReady: ...,
	onClose: ...,
	mediaId: (lastCrop && lastCrop.mediaId ? lastCrop.mediaId : null),
	modules: {
		imageTool: {
			crop: (lastCrop && lastCrop.crop ? lastCrop.crop : true),
			subject: (lastCrop && lastCrop.subject ? lastCrop.subject : 'medium')
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request


Powered by Zendesk