Picturae Webkitchen - Mediabank 2.0

Index

Mediabank - Getting Started

First of all the page requires a base href to be present in the head section of the HTML document e.g.:

    <base href="http://demo.webservices.picturae.pro/v2mediabank/">

To setup the Mediabank you then need to include the follow scripts:

    <script src="http://images.memorix.nl/topviewer/1.0/src/topviewer.compressed.js" ></script>
<script src="http://webservices.picturae.com/mediabank/2.0/dist/js/mediabank-deps.min.js" ></script>
<script src="http://webservices.picturae.com/mediabank/2.0/dist/js/mediabank-partials.min.js" ></script>
<script src="http://webservices.picturae.com/mediabank/2.0/dist/js/mediabank.min.js" ></script>

The Mediabank also requires jQuery 2.x or 3.x to function correctly so if that isn't already loaded please make sure you load that before the above JavaScript files.

And the following CSS files:

    <link rel="stylesheet" href="//webservices.picturae.com/mediabank/2.0/dist/css/vendors.css">
<link rel="stylesheet" href="//webservices.picturae.com/mediabank/2.0/dist/css/mediabank.css">

Add the Mediabank HTML element to your page where you want to render the Mediabank. This should also contain your API key and the API url. Optionally you can supply a comma separated list of entities/collections that the Mediabank should load. This is done with data-entities="uuid1, uuid2"

        <pic-mediabank
        data-api-key="84fb6dde-1718-11e4-abe0-fff30396f5b7"
        data-api-url="https://webservices.picturae.com/mediabank"
        />

To start the mediabank with all the default options simply add the following JavaScript snippet:

        angular.element(document).ready(function() {
      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Most of the configuration is done through JavaScript by extending the above snippet. The following examples will demonstrate this. Of course it's possible to combine the examples in that case chain the .setOption bits to the MediabankConfig object as is demonstrated in later examples.

Mediabank - Set language

The Mediabank supports multiple languages you can set the language in the run block see this code snippet.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          //========================
          // Set language
          // Currently supports en, fr and nl
          //========================
          gettextCatalog.setCurrentLanguage('nl');
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Set gallery modes

The Mediabank has several Gallery modes, by default all of them are displayed. The various modes are:

geo - display a map with clusters or markers only works if coordinates are available.
horizontal - displays a horizontal grid where all images have a fixed height.
list - displays a list with a thumbnail and metadata.
table - displays a table view upon clicking a row a foldout is displayed inline. This mode requires configuration on our end so lets u know if you want to use it and which fields should be displayed.
vertical - displays a vertical grid where all images have a fixed width.
gallery - displays cropped thumbs in a gallery view clicking an image loads a foldout with a preview of the record.

You can also set a default gallery mode to open the Mediabank with. It's possible to provide the config with an array of views you want to use see the following snippet. Also demonstrated here is the ability to chain config options to the MediabankConfig object.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            // Build up array of galleryModes
            var galleryModes = [
                {id: 'horizontal'},
                {id: 'vertical'},
                {id: 'gallery'},
                {id: 'list'}
            ];

            MediabankConfig
            .setOption('gallery.modes', galleryModes)
            .setOption('gallery.default', 'horizontal');
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Configure geo mode

The geo mode has an extra configuration option to enable mouse scrollwheel zoom.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            MediabankConfig
            .setOption('gallery.geo.leaflet.scrollWheelZoom', true);
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Configure search help page

It's possible to configure a search help page and enable it. When this done an icon will be displayed in the search box if the user clicks it they will navigate to the search help page.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            MediabankConfig
            .setOption('search.help', true)
            .setOption('search.helpUrl', 'http://mydomain.com/myhelppage');
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Set pagination / endless scroll options

The Mediabank can be used with endless scroll or normal pagination. By default it works with normal pagination and will display the number of results. With the following snippet it's possible to enable endless scroll.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            MediabankConfig
            .setOption('gallery.pagination.endless', true)
            // Needed to display result count otherwise can be set to false
            .setOption('gallery.pagination.top', true)
            .setOption('gallery.pagination.bottom', false)
            // Load the template to just display the result count can be left
            // out if you don't want to display the result count
            .setOption('gallery.pagination.topTemplate',
                       'pagination/views/directives/pagination-count.html');
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Set placeholder icons

It's possible to specify icons that can be displayed if a record has no thumbnail. See the following example:

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            MediabankConfig
            .setOption('gallery.icons', {
               thumb: 'https://webservices.picturae.com/mediabank/2.0/dist/images/media/no-image.png',
               audio: 'https://webservices.picturae.com/mediabank/2.0/dist/images/media/audio.png',
               video: 'https://webservices.picturae.com/mediabank/2.0/dist/images/media/video.png'
            });
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Set detail view buttons

The snippet underneath demonstrates how to configure what buttons are displayed in the detail view.
The following buttons are available:

metadata - displays the metadata of the record
assets - displays multiple assets if the record has more than one
comments - displays comments and a form to add comments
facebook - displays a button to share the record on facebook
twitter - displays a button to tweet about the record
pinterest - displays a button to add the image to a board on pinterest
webshop - opens the webshop for this record
download - allows the user to download an image of this record
permalink - supplies the user with a permalink to this record

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            // Retrieve default detailModes
            var detailModes = MediabankConfig.getOption('detail.modes');

            // Specify array of detailModes to be removed
            _.remove(detailModes, function (n) {
              var check = _.find(['comments', 'permalink'], function (chr) {
                return chr === n.id;
              });

              return check;
            });

            // Set our new array of detailModes to the config
            MediabankConfig
            .setOption('detail.modes', detailModes);
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Set detail view focus

You can configure what tab the detail view should open by default. See the snippet underneath and the list above for possible options:

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            // Focus on asset tab
            MediabankConfig
            .setOption('detail.focus', 'assets');
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Configure webshop behaviour

If the webshop should open in a popup it requires some additional configuration.

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            MediabankConfig
            .setOption('detail.webshop', 'popup');
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });

Mediabank - Add custom button to detail view

It's possible to add a custom button to the detail view to add some actions. You can use the detailContext within this option. (record id etc)

        angular.element(document).ready(function() {
      angular.module('Mediabank.Boot')
        .run(function(gettextCatalog, MediabankConfig) {
          MediabankConfig.whenInitialized().then(function() {
            // Retrieve the default detailModes
            var detailModes = MediabankConfig.getOption('detail.modes');

            // Add our custom button to the array
            detailModes.push(
              {
                'id': 'placeholder',
                'label': 'Custom mode',
                'action': function (detailContext) {
                  alert('We can do stuff here');
                }
              }
            );

            MediabankConfig
            .setOption('detail.modes',detailModes);
          });
        });

      angular.bootstrap(document, ['Mediabank.Boot']);
    });