Picturae Webkitchen - Mediabank

Filters

To add filters you can set them as following

To discover fields that can be filtered you can use the following endpoint in the api:
/media/field?apiKey={key}

    pm = new Mediabank({
        "apiKey": "9af37644-6da5-4584-b641-6cf5a24fd7f3",
        "server": "http://mediabank.zend.picturae.pro",
        "filtersCount": 5 // Amount of filters to show
        "filterRows": 20, // Amount of filters to show in modal
        "filters": [
            {"field": "search_s_loc.prefixed"},
            {"field": "search_s_documenttype"},
        ]
    });
pm.run();
    

Metadata filter links

To show metadata as a link you can configure the following:

    pm = new Mediabank({
        "apiKey": "9af37644-6da5-4584-b641-6cf5a24fd7f3",
        "server": "http://mediabank.zend.picturae.pro",
        "filtersCount": 5 // Amount of filters to show
        "detailLinks": {
          "place": {
              "field": "place",
              "filter": "search_s_place.all" // optional define field in solr to link by default it will go to search_s_{field}
          }
       }
});
pm.run();
    

Pagination

It is possible to switch pagination styles currently there are 2

default: prev | next

    pm = new Mediabank({
        "apiKey": "9af37644-6da5-4584-b641-6cf5a24fd7f3",
        "server": "http://mediabank.zend.picturae.pro",
        "pagination": {
            "type" : "default",
         }
       }
});
pm.run();
    

sliding: first | prev | 1 | 2 | 3 | 4 | 5 | next | last

For the sliding style it is possible to define the amount of pages to show, it defaults to 10:

    pm = new Mediabank({
        "apiKey": "9af37644-6da5-4584-b641-6cf5a24fd7f3",
        "server": "http://mediabank.zend.picturae.pro",
        "pagination": {
            "type" : "sliding",
            "showPages": 20
         }
       }
});
pm.run();
    

Events

You can hook into the following event's:

• reload (before the viewmodel will reload)
• preAddMedia (before the media observableArray will be updated)
• postReload (after the model is finished reloading)

    $(pm).on('reload', function(event, view){
    // Is triggered before the data is updated
});

$(pm).on('preAddMedia', function(event, view, media){
    // modify media before it is added to the array
});


$(pm).on('postReload', function(event, view){
  // Triggered after data reload
  // View contains a result mode to see if we are on the result or detail page e.g
  if (view.resultMode === 'detail') {
     // We are on the detail page
  }
});
    

Buttons on detail view

The following buttons are available by default.

• Print
• Download
• Email
• Facebook
• Twitter
• Pinterest
• Permalink

To disable a button you can set the following configuration.

    pm = new Mediabank({
    "detailLinks": [{
        "id": "print",
        "show": false
    }, {
        "id": "download",
        "show": false
    }, {
        "id": "email",
        "show": false
    }, {
        "id": "facebook",
        "show": false
    }, {
        "id": "twitter",
        "show": false
    }, {
        "id": "pinterest",
        "show": false
    }, {
        "id": "permalink",
        "show": false
    }
    ]
});

Add custom button

It's possible to add your custom button, the example code below logs the currently selected image details and it's thumbnail

    var pm = new Mediabank({
    "detailLinks": [
        // Add custom button
        {
            "id": "addMedia",
            "css": "addMedia",
            "label": "Voeg media toe",
            "show": true,
            "click": function() {
                // do something with the current selected asset
                var asset = pm.getViewModel().getActiveAsset();
                if (asset) {
                    console.log(asset);
                    console.log('example use thumb :' + asset.thumb.medium);
                }
            }
        }
    ]
});

Tooltip configuration

It's possible to enable tooltips on gallery / grid result modes: In the client config you can add the following setting:

    toolTip: {
    settings: {
        placement:: "ne",
        smartPlacement: true
    }
}
    

For the tooltip powertip is used it's possible to configure all settings that are in the lib except manual this is always set to true: http://stevenbenner.github.io/jquery-powertip/#list-of-options

HTML 4 Mode

It is possible to force html 4 urls with a # instead of / (push state), this can be useful if you do not have the option to rewrite url's in your server.

http://demo.webservices.picturae.pro/mediabank/detail/00af46a3-7525-2918-59ee-4c851fcb84c0
would become:
http://demo.webservices.picturae.pro/mediabank/#/detail/00af46a3-7525-2918-59ee-4c851fcb84c0

This should only be done as last resort, as it's not possible to provide any server side fallback as everything behind the # is not passed to the server.

Add the following script to the head of your document, it's important that this script loads before the mediabank.js.

    <script type="text/javascript" language="javascript">
window.History = { options: { html4Mode: true} };
</script>