Main Views

For the most up-to-date documentation, please visit docs.brix.ch

There are several main views - most of the parameters are applicable to all of them, and extra parameters are disregarded, allowing you to call different main views with the same parameter map. Known implementations:

Synopsis

anuraGallery

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: true, // always use the alternative name, not just for detail view
    tooltip: false // also display it as the title tag on the thumbnails
},
assets: null, // load a defined list of assets from somewhere else
autoload_fetch: 32, // how many assets to fetch at once when paginage is set to 'auto'
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: false, // make the different formats available directly in the menu
download_menu: true, // show the download menu
extended: false, // request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
infofields: [] // list of information field IDs to load with the list response (use sparingly)
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false, // show assets that have node referencing infofields to this node, 2.x
paginate: 12, // how many items to show per page, false to show all, 'auto' to load on scroll
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, custom: ''},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
size: 'medium',
sort: null, // order: one of [id, name, uploaddate, lastmodified, extension, assettype], seq: asc or desc - i.e. {order: 'name', seq: 'asc'}
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: true, // enables audio and video streaming - use with caution, might overload the server
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraTable

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: false, //always use the alternative name, not just for slimbox
    heading: '' // title when used in column
},
assets: null, // load a defined list of assets from somewhere else
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
columns: ['name', 'size', 'date', 'download'], // any of: name, thumb, size, extension, date, time, download, pages, alt_name or any other property returned by the API. Infofields with info.x, e.g. info.101
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: true, // make the different formats available directly
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
headings: {}, // headings that should be used for non-supported columns ({key: value, ...})
hover_thumbnail: true, // show a thumbnail tooltip when hovering over a row
icons: true, // true to show file type icons or 'thumbs' to show tiny thumbnails
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
paginate: 16, // how many assets to fetch at once when paginage is set to 'auto'
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, keyword: 0},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
sortable: true, // enable sorting columns by clicking on the table headers
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: false, // enables audio and video streaming - use with caution, might overload the server
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraCollage

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: false //always use the alternative name, not just for slimbox
},
assets: null, // load a defined list of assets from somewhere else
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
caption: true, // show caption (name of the asset) on mouse over
detail_settings: {}, // settings to pass to anura.details.js
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: false, // make the different formats available directly
download_menu: true,
ext: '.do?', // extension of server pages (.php, .do)
extended: false, // request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
paginate: false, // how many items to show per page, false to show all
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
partial_row: true, // allow the last row to be only partialy filled (may causes last row to be higher than expected)
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, keyword: 0},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
sort: null, // custom sorting function(a, b) - see http://mzl.la/17qY6s9
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: false, // enables audio and video streaming - use with caution, might overload the server
target_height: 150, // desired height of a row
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraMasonry

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: { // alternative name (for slimbox etc.)
    id: 0, // information field ID
    always: true, // always use the alternative name, not just for detail view
    tooltip: false, // also display it as the title tag on the thumbnails
    inline: false //display the alternative name in addition to the name inline, not used when "always" it true
},
assets: null, // load a defined list of assets from somewhere else
autoload_fetch: 50, // how many assets to fetch at once when paginage is set to 'auto'
autoplay: true, // whether to automatically start playing (with vimeo and/or stream)
basket: null, // object to use as a basket, initialized by a basket plugin
column_class: 'anura-masonry-col-5', // class to assign to each asset, used by masonry to determine the column width (build-in are anura-masonry-col-n, n = [2..9])
detail_settings: {}, // settings to pass to anura.details.js
detail_trigger: true, // listen to the details=... parameter and show the assets details view (regardless of actual navigation context)
detail_view: 'colorbox', // one of: slimbox, colorbox, details, blank, none
download_directly: false, // make the different formats available directly in the menu
download_menu: true, // show the download menu
extended: false, // request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
force_zip: false, // force even single asset downloads to be delivered in a ZIP-file
highres_thumbs: false // masonry upscales -> thumbs may be blurry - set this to true to use previews (up to 1024px) instead
infofields: [], // list of information field IDs to load with the list response (use sparingly)
limit: 0, // limit the results (or reported total) returned by the server
locale: '', // ISO 639-1 code, blank for default
masonry: {columnWidth: '.anura-asset-container', percentPosition: true, horizontalOrder: true}, // masonry-specific settings, see https://masonry.desandro.com/options.html
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false, // show assets that have node referencing infofields to this node, 2.x
paginate: 'auto', // how many items to show per page, false to show all, 'auto' to load on scroll
paginator_nav: {prev: '←', next: '→'},
paginator: ['prev', 'next', 'pages', 'counter'],
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
search: {string: '', node: 0, custom: ''},
send: false, // add a mailto-link (ID of the download format to use or true for the first)
sort: null, // order: one of [id, name, uploaddate, lastmodified, extension, assettype], seq: asc or desc - i.e. {order: 'name', seq: 'asc'}
state: '', // prefix for state in url (multi-instance) or false to disable state
stream: true, // enables audio and video streaming - use with caution, might overload the server
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

anuraSlider

server: 'https://celum.local/anura/first', // REQUIRED, which anura endpoint to use
alternative_name: 0, // alternative name for caption (information field ID)
ext: '.do?', // extension of server pages (.php, .do)
limit: 16, // limit number of assets that should be loaded (since 2.1)
locale: '', // 2-char language code, blank for default
node: {kind: 101, id: 0}, // which node of what kind to show (101 = folder, 102 = collection, 103 = keyword)
noderef: false // show assets that have node referencing infofields to this node, 2.x
recursive: false, // load assets from all subnodes recursively (like keywords in 1.x)
slider: {adaptiveHeight: true, auto: true, preloadImages: 'visible', mode: 'fade', captions: true}, //slider options, see bxslider.com/options
sort: null, // custom sorting function(a, b) - see http://mzl.la/17qY6s9
top: {number: 0, days: 0}, // show the top X downloads within the last Y days

General options

server

type: URL, required: yes, default: -

The endpoint to use, e.g. http://your.celum.server/anura/first

locale

type: String, required: no, default: CELUM's default language

The locale (ISO 639-1) to use, i.e. en. The availability of these depend on your CELUM configuration, usually en, de or fr. When left empty, CELUM's default language will be used.

sort

type: Object or String, required: no, default null

How the displayed asset should be sorted. Example: sort: {order: 'name', seq: 'asc'}

  • order: One of id, name, uploaddate, lastmodified, extension, assettype
  • seq: One of asc, desc

You can also pass this as a string if you prefer, e.g. order: 'name_asc'

extended

type: boolean, required: no, default: false (except in anuraTable)

Request extended asset information in the list response (which would otherwise require a details-call per asset). Has no effect out-of-the-box, other than you might use it in a custom callback. Note that anuraTable always sets this to true.

Extended properties include: file size, creation date, modification date, number of pages, download availability, asset type, asset availability.

infofields

type: array of long, required: no, default: []

Loads the content of the listed information field ID in the list response (which would otherwise require a details-call per asset). Has no effect out-of-the-box, other than you might use it in a custom callback. Use sparingly!

state

type: String, required: no, default: ''

Prefix for the state fragment in the URL (only needed for multi-instance). Set to false to completely disable state (deep linking through updating the URL fragment)

Source options

These define what assets to display, e.g. where to get them from. This can be one of: an array of assets (loaded externally), a node, a search term or the top downloads (checked in that order, so if you specify multiple of these, the first one will be used)

Usually your navigation component will inject these parameters, so you don't have to specify these unless you don't use a navigation component or wish to use a different initial view.

Source: Node

node

type: Object, required: no, default: {kind: 101, id: 0}

The node to display directly, i.e. {kind: 103, id: 1337}. Note that since CELUM 5, the kind-parameter is no longer required unless you set the ID to -1.

node.kind

type: long, required: seldom, default: 101

The NodeTypeId of the desired node. Traditionally folder = 101, collection = 102 and keywords = 103, but check your tabconfiguration.xml to be sure. Since CELUM 5 this is only required when you set the node.id to -1.

node.id

type: long, required: if node is specified, default: 0

The NodeId of the node to display.

recursive

type: boolean, required: no, default: false

Load all assets below the specified node.id recursively, like the "show content of subnodes" feature in CELUM.

noderef

type: boolean, required: no, default: false

Load all assets that reference the specified node.id via a node referencing information field, like the "navigation context" feature in CELUM.

Source: Search

search

type: Object, required: no, default: {string: '', node: 0, custom: ''}

search.string

type: String, required: no, default: ''

The (full text) search term to search for, e.g. 'ponies'.

search.node

type: long, required: no, default: 0

The ID of the node to restrict the search to. #

search.custom

type: String, required: no, default: ''

Any additional search parameters you want to add (in URL form), e.g. search_foo=1&search_bar=2, see the API for details.

Source: Statistics

top

type: Object, required: no, default: {number: 0, days: 0}

Show the top X downloaded assets within the last Y days.

top.number

type: long, required: no, default: ''

How many top downloads to fetch, e.g. 10 max. 100.

top.days

type: long, required: no, default: 0

How many days to look back, e.g. 30, max. 365.

Source: External

assets

type: Array, required: no, default: null

Display exactly the assets in the array. Called by other components, so you probably won't ever use this yourself, unless you compute the array via several manual API-requests or have some static content (read: don't touch this ;-)

E.g. [{"id":1337,"type":1,"name":"pic_12_001.jpg","alt_name":"This is an example"},{"id":1338,"type":2,"name":"api_demo.odt","alt_name":"Demonstration of the API"}]

View options

paginate

type: mixed, required: no, default: 12

How many assets to display per page. Set to 'auto' to activate infinite scrolling or to false to disable pagination (this may hang up the browser if you have a lot of assets in the request)

Advanced users may want to customize the pagination:

  • paginator: ['prev', 'next', 'pages', 'counter'] - which pagination features to display in what order. Available features : 'prev', 'next', 'pages', 'dots' (instead of pages) and 'counter'.
  • paginator_nav: {prev: '←', next: '→'} - which symbols (or HTML) to use for the prev/next-arrows
  • autoload_fetch: 50 - how many assets to load each time the user has scrolled to the bottom of the list, only applies when using paginate: auto
  • limit: 5 - hard-limits the assets that get loaded, regardless of the actual count. Disables pagination and is only usefull if you want to show a predertermined number of assets, such as the "5 newest assets", or for anuraSlider as it obviously doesn't paginate.
detail_view

type: String, required: no, default: 'colorbox'

Action triggered when a thumbnail is clicked. Lightboxes require you to also embed the respective lighbox JS. Known values:

  • colorbox (through jquery.colorbox-min.js)
  • details (colorbox + anuraDetails)
  • slimbox (through slimbox2.js)
  • swipebox (through baguetteBox.min.js)
  • download (directly triggers a download)
  • function(item) {} (your custom callback fundtion)

Advanced users may want to customize the lightbox:

  • detail_settings: {} - settings passed to the lighbox (depends on your lighbox), or in the case of 'details' the anuraDetails settings.
  • detail_trigger: true - can be set to false to disable deep linking of the detail view through the #details=123 URL fragment. When enabled the URL can be sent to another person, such that it opens that exact asset in the detail view when visiting said link, regardless of any navigation context.
  • stream: false - can be set to true to enable audio- and video-streaming directly from the CELUM server. This may overload your server however, so the preferred method is to use a video streaming provider, such as YouTube, Vimeo or MovingImage (all of which are supported transparently through their respecive Backstage connectors).
  • autoplay: true - can be set to false so that videos don't start playing automatically in the detail view.
  • lightbox_rel: 'lightbox-anura' - can be used to override the rel tag used by some lighboxes. Usefull if you have multiple main views on a single page but don't want the next/prev buttons in your lightbox to iterate over all visible assets of all views instead of just a single view.
download_menu

type: boolean, required: no, default: true

Shows the download menu when hovering over a thumbnail, comprised of the basket icon (unless basket is null) and direct download icons (these may depend on the backend's quickDownload setting).

Advanced users may want to customize the menu:

  • download_directly: true - can be set to false in order to hide the direct download icons, so only the basket remains.
  • force_zip: false - can be set to true so that downloads are always delivered in a ZIP file, even if it's just a single file. This may be helpfull to prevent "security" software from bocking downloads.
  • send: 6 - to add a mailto link that downloads the file directly in a specific download format ID (6 in this example)
basket

type: jQuery object, required: no, default: null

The download basket to use where the user can collect assets to download, as returned by your $.anuraBasket()-call. This enables the corresponding basket buttons in the download_menu and detail_view. Specifying nothing will disable the basket feature.

alternative_name

type: Object, required: no, default: null

Use an information field as the display name instead of the asset name. This is usefull when used with localized information fields, as the asset name is not localizable in CELUM. By default this only affects the caption in the lightbox.

Example: alternative_name: {id: 123, always: true} Options:

  • id (long) - the ID of the information field to use (required)
  • always (bool) - always display infofield as the name, not just as the caption for the detail_view
  • tooltip (bool) - use it as a tool tip (alt tag) on the thumbnail (anuraGallery and anuraMasonry)
  • heading (string) - Column heading when used in the column type alt_name (anuraTable only)
  • inline (bool) - display the information field below the asset name, e.g. for a description (anuraMasonry only)

Specific Options

anuraGallery

$('#your-target').anuraGallery({server: '...', ...});

size

type: String, required: no, default: 'medium'

Convenience function to set the size of the gallery thumbnails. You could also just simply set (or override) this via CSS by targeting .anura-gallery-container(.medium) .anura-asset-container. One of: small (~120px), medium (~170px), big (~220px), huge (~280px - note that this loads the preview file instead of the thumbnail)

thumbs_as_background

type: boolean, required: no, default: false, since: 2.8

Set the thumbnail as a background image of .anura-image-container instead of adding an inner <img> tag.

anuraMasonry

$('#your-target').anuraMasonry({server: '...', ...});

masonry

type: Object, required: yes, default: {columnWidth: '.anura-asset-container', percentPosition: true, horizontalOrder: true}

Additional masonry-specific settings, see masonry.desandro.com for details.

column_class

type: String, required: yes, default: 'anura-masonry-col-5'

Class to assign to each asset, used by masonry to determine the column width (built-in ones are anura-masonry-col-n, where n = [2..9], e.g. anura-masonry-col-3)

highres_thumbs

type: boolean, required: no, detault: false

Use high resolution thumbnails (i.e. preview files up to 1024px), as depending on your column width portrait thumbs may look blurry. Note that this obviously uses more bandwidth and may slow things down a bit.

anuraCollage

$('#your-target').anuraCollage({server: '...', ...});

target_height

type: int, required: yes, default: 150

The desired height of a single row in pixels.

caption

type: boolean, required: no, default: true

Whether to show the caption of the image when hovering over its thumbnail.

partial_row

type: boolean, required: no, default: true

Allow the last row to be only partialy filled (may causes last row to be higher than expected)

anuraTable

$('#your-target').anuraTable({server: '...', ...});

columns

type: array of String, required: yes, default: ['name', 'size', 'date', 'download']

What columns to display in the table. Any of id, name, icon, thumb, size, extension, date, time, download, pages, alt_name or any other property returned by the API. Infofields with info.x, e.g. info.101.

headings

type: map of Strings, required: no, default: {}

Column headings that should be used for columns that are not supported out-of-the-box, e.g. headings: {'info.101': 'Copyright', ...}

hover_thumbnail

type: boolean, required: no, default: true

Show a thumbnail tooltip when hovering over a row.

sortable

type: boolean, required: no, default: true

Enable sorting columns by clicking on the table headers. Note that this only works on columns supported through the sort parameter (i.e. through CELUM).

icons

type: mixed, required: no, default: true

DEPRECATED, use columns the icon or thumb instead. Show file type icons at the start of every row - true to show file type icons or 'thumbs' to show tiny thumbnails.

anuraSlider

$('#your-target').anuraSlider({server: '...', ...});

slider

type: Object, required: yes, default: {adaptiveHeight: true, auto: true, preloadImages: 'visible', mode: 'fade', captions: true}

Slider options to pass to bxSlider, see bxslider.com/options for details.

DOM

anuraGallery

<div class="anura-masonry-container">
   <div class="anura-asset-container">
      <div class="anura-asset-menu">
         <div class="anura-asset-menu-holder">
            <a class="anura-add-basket"></a>
            <a title="Download Format X"><img class="anura-asset-menu-button"></a>
            <!--etc-->
         </div>
      </div>
      <a rel="lightbox-anura"><img class="anura-image"></a>
      <p class="anura-asset-name">Athene Cunicularia</p>
      <p class="anura-asset-alternative-name">A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg</p>
   </div>
   <div class="anura-asset-container"><!--etc--></div>
   <div class="anura-asset-container"><!--etc--></div>
   <!--etc-->
</div>

anuraTable

<div class="anura-table-container">
   <table>
      <thead>
         <tr>
            <th class="anura-column-name">Filename</th>
            <th class="anura-column-pages">Pages</th>
            <th class="anura-column-size">File size</th>
            <th class="anura-column-date">Modified date</th>
            <th class="anura-column-time">Modified</th>
            <th class="anura-column-download">Download</th>
         </tr>
      </thead>
      <tbody>
         <tr class="anura-asset-container even">
            <td class="anura-file pdf"><a rel="lightbox-anura">some.pdf</a></td>
            <td class="anura-pages">46</td>
            <td class="anura-filesize">2.02 <span class="anura-filesize-unit">MB</span></td>
            <td class="anura-modified-date">2/24/2014</td>
            <td class="anura-modified-time">1:22:53 PM</td>
            <td class="anura-asset-menu">
               <div class="anura-asset-menu-holder">
                  <a class="anura-add-basket"></a>
                  <a title="Download Format X"><img class="anura-asset-menu-button"></a>
                  <!--etc-->
               </div>
            </td>
         </tr>
         <tr class="anura-asset-container odd"><!--etc--></tr>
         <tr class="anura-asset-container even"><!--etc--></tr>
         <!--etc-->
      </tbody>
   </table>
   <div class="anura-paginator">
      <div class="anura-paginator-nav"><span class="anura-paginator-prev">←</span><a class="anura-paginator-nav-next">→</a></div>
      <div class="anura-paginator-pages"><span class="anura-active">1</span><a>2</a><a>3</a></div>
      <div class="anura-paginator-total">1 - 12 / 25</div>
   </div>
</div>

anuraSlider

<div class="bx-wrapper">
   <div class="bx-viewport">
      <ul class="anura-slider-list">
         <li>
            <img src="...">
            <div class="bx-caption"><span>my caption</span></div>
         </li>
         <li><!--etc--></li>
         <!--etc-->
      </ul>
   </div>
   <div class="bx-controls bx-has-pager bx-has-controls-direction">
      <div class="bx-pager bx-default-pager">
         <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="0" href="">1</a></div>
         <div class="bx-pager-item"><a class="bx-pager-link" data-slide-index="1" href="">2</a></div>
         <!--etc-->
      </div>
      <div class="bx-controls-direction"><a href="" class="bx-prev">Prev</a><a href="" class="bx-next">Next</a>
      </div>
   </div>
</div>

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded any page
  • anura-loaded-first(options, nrOfTotalAssets) - triggered when a plugin has loaded the first page
  • anura-download(assetId, formatId) - triggered when a download occurs via the download_directly feature
  • anura-error(response) - triggered when a http error occurs