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:
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 daysserver: '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 daysserver: '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 partially 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 daysserver: '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 daysserver: '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 daystype: URL, required: yes, default: -
The endpoint to use, e.g. http://your.celum.server/anura/first
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.
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, rank or score (when searching), uploaddate, lastmodified, extension, assettype, and since 2.9 original/originalname, size/filesize, info_{infofield-id} (Note: not all types are supported, see CELUM)seq: One of asc, descYou can also pass this as a string if you prefer, e.g.
order: 'name_asc'
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.
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!
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)
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.
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.
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.
type: long, required: if node is specified, default: 0
The NodeId of the node to display.
type: boolean, required: no, default: false
Load all assets below the specified node.id recursively, like the "show content of subnodes" feature in CELUM.
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.
type: Object, required: no, default:
{string: '', node: 0, custom: ''}
type: String, required: no, default: ''
The (full text) search term to search for, e.g. 'ponies'.
type: long, required: no, default: 0
The ID of the node to restrict the search to. #
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.
type: Object, required: no, default:
{number: 0, days: 0}
Show the top X downloaded assets within the last Y days.
type: long, required: no, default: ''
How many top downloads to fetch, e.g. 10 max. 100.
type: long, required: no, default: 0
How many days to look back, e.g. 30, max. 365.
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"}]
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). Since 2.9 you can also pass 'button', which is identical to 'auto' except it doesn't load new assets automatically.
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-arrowsautoload_fetch: 50 - how many assets to load each time the user has scrolled to the bottom of the list, only applies when using paginate: autolimit: 5 - hard-limits the assets that get loaded, regardless of the actual count. Disables pagination and is only useful if you want to show a predetermined number of assets, such as the "5 newest assets", or for anuraSlider as it obviously doesn't paginate.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:
anura (preferred, since 2.9, through jquery.anura.lightbox.js)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 function)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. Useful 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.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 helpful 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)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.
type: Object, required: no, default: null
Use an information field as the display name instead of the asset name. This is useful 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_viewtooltip (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)$('#your-target').anuraGallery({server: '...', ...});
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)
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. Doesn't work in IE (what a surprise 😒).
$('#your-target').anuraMasonry({server: '...', ...});
type: Object, required: yes, default: {columnWidth: '.anura-asset-container', percentPosition: true, horizontalOrder: true}
Additional masonry-specific settings, see masonry.desandro.com for details.
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)
To make the columns responsive, you can (depending on the value you chose here) add CSS like:
@media screen and (max-width: 768px) {
#anura-masonry .anura-masonry-container .anura-asset-container {
width: calc(50% - 10px); /* 2 columns */
}
}
@media screen and (max-width: 375px) {
#anura-masonry .anura-masonry-container .anura-asset-container {
width: calc(100% - 10px); /* 1 column */
}
}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.
$('#your-target').anuraCollage({server: '...', ...});
type: int, required: yes, default: 150
The desired height of a single row in pixels.
type: boolean, required: no, default: true
Whether to show the caption of the image when hovering over its thumbnail.
type: boolean, required: no, default: true
Allow the last row to be only partially filled (may causes last row to be higher than expected)
$('#your-target').anuraTable({server: '...', ...});
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, created_date, created_time, created_date_time, modified_date, modified_time, modified_date_time, download, pages, alt_name or any other property returned by the API. Infofields with info.x, e.g. info.101.
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', ...}
type: boolean, required: no, default: true
Show a thumbnail tooltip when hovering over a row.
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).
type: mixed, required: no, default: true
DEPRECATED, use columns (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.
type: boolean, required: no, default: false
DEPRECATED, use columns created_date, created_time, created_date_time, modified_date, modified_time or modified_date_time.
Whether the creation date should be used for the date and time columns (instead of the modification date)
type: boolean, required: no, default: false
Whether to add a click trigger to every cell of the row (except download) that will open the lightbox
type: boolean | int, required: no, default: false
Whether to forcefully truncate cell content after the specified number of characters. CSS text-overflow: ellipsis; is preferable, but this is a table, so yeah.
type: Object, required: no, default: {}, since: 2.9.35
When sortable is enabled, it might be desirable to define a secondary sort order. This is achieved by specifying a sort order and sequence per column name, e.g. {date: 'name_asc'} would sort by the asset's name as a secondary order after date.
$('#your-target').anuraSlider({server: '...', ...});
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.
<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><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><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>