Anura

Aus brix:wiki
Wechseln zu: Navigation, Suche

Inhaltsverzeichnis

Introduction

Present selected images and videos from CELUM directly on any web page. Simple, fast and effective. brix:anura consists of a celum extension for the backend and a modular collection of jQuery plugins. All plugins can handle the three container types (folders, keywords and asset collections).

The front-end of brix:anura is written completely in jQuery, allowing it to be integrated into practically any page without any effort. All it takes is a single Javascript call, such as:

$('#gallery').anuraGallery({server: 'http://dam.brix.ch/anura', node: {kind: 101, id: 3051}});

That way there's usually no need to also customize the CMS, except if you wish to control what container should be loaded in your CMS.

The back-end is a celum extension that delivers all necessary information using JSON in a efficient manner. It uses a regular celum user (reader), so you can configure the permissions of brix:anura using the familiar celum permission dialog. All other options are set in the front-end, enabling the extension to feed any number of different galleries.

Developers might also want to look at the Anura API.

Dynamic calling

The plugins are set up in such a way that an additional call on the same target retains the original settings. This allows you to set additional options afterwards.

Example: Execute a search on the gallery we've created in the introduction:

$('#gallery').anuraGallery({search: {string: 'my search'});

This means you don't have to specify the server URL etc. again.

Plugins

Required Options

Name Example Comment
server
'http://dam.brix.ch/anura'
Address of the server. Usually ends in /anura unless there are additinal dispatchers in the backend.

Gallery

Options

Name Example Default Comment
node
{kind: 101, id: 1234}
- kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
paginate
9
12 Number of thumbnails per page, "auto" for infinite scrolling or false to disable pagination
size
'small'
medium Size of the thumbnails. One of: small, medium, big, huge
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
detail_view
'slimbox'
colorbox Action triggered when a thumbnail is clicked. One of: slimbox, colorbox, details (colorbox with anuraDetails), function(item) {}, download (with detail_settings: {format: <dlf_id>}), blank, none
detail_settings
{}
- Optional settings for the specified detail_view (see respective documentation). For 'details' {hidden: true} to hide the sidebar by default.
download_menu
false
true Shows download format icons when hovering over a thumbnail. Uses the formats that are available to the backend user (unless disabled via download_directly)
force_zip
true
false Force even single asset downloads to be delivered in a ZIP-file
alternative_name
{id: 16, always: true}
- Use the value of an information field instead of the asset name in the lightbox. id of the information field, always to also display said value underneath the thumbnail instead of its name. tooltip to also use that name in the image's title tag.
search
{string: 'my search', custom: 'search_node=123' }
- Executes a search for my search. You may add additional custom parameters (see Anura_API)
basket
$('.anura-basket')
- Activates the basket functionality (add several assets to a basket and download all of them in a ZIP). basket is the DOM-element on which the basket was created.
type_filter
[1, 2]
- Filter results so that only assets of the listed type are shown. Types in celum are: 1 image, 2 document, 3 video, 4 audio, 5 text, 0 unknown. (since 1.4, requires backend 1.3 or higher)
sort
function(a, b) {return a.id - b.id;}
null keyword, one of: id_asc, id_desc, name_asc, name_desc, pages_asc, pages_desc, size_asc, size_desc, date_asc, time_asc, date_desc, time_desc, extension_asc, extension_desc or a custom sorting function (see MDN)
video_frame_speed
500
800 speed (ms) at which video frames change when hovering - set to 0 to disable
send
6
false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
top
{number: 10, days: 7}
- show the top X downloads within the last Y days (replaces the node argument)
extended
true
false request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
stream
true
false enables audio and video streaming - use with caution, might overload the server
vimeo_legacy
true
false treat the informationfield-entry as the vimeo id (for compatibility with old vimeo extension)
autoplay
false
true whether to automatically start playing (with vimeo and/or stream)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<div class="anura-gallery-container">
¦  <div class="anura-gallery-wrapper">
¦  ¦  <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>
¦  ¦  ¦  <div class="anura-image-container">
¦  ¦  ¦  ¦  <a rel="lightbox-anura"><img class="anura-image"></a>
¦  ¦  ¦  </div>
¦  ¦  ¦  <p class="anura-asset-name">name of the asset</p>
¦  ¦  </div>
¦  ¦  <div class="anura-asset-container"><!--etc--></div>
¦  ¦  <div class="anura-asset-container"><!--etc--></div>
¦  ¦  <!--etc-->
¦  </div>
¦  <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>


Masonry

Options

Name Example Default Comment
node
{kind: 101, id: 1234}
- kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
masonry_settings
{}
- Additional optionens for masonry
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
detail_view
'slimbox'
colorbox Action triggered when a thumbnail is clicked. One of: slimbox, colorbox, details (colorbox with anuraDetails), function(item) {}, download (with detail_settings: {format: <dlf_id>}), blank, none
detail_settings
{}
- Optional settings for the specified detail_view. See respective documentation
download_menu
false
true Shows download format icons when hovering over a thumbnail. Uses the formats that are available to the backend user (unless disabled via download_directly)
force_zip
true
false Force even single asset downloads to be delivered in a ZIP-file
alternative_name
{id: 16, always: true, inline: true}
- Use the value of an information field instead of the asset name in the lightbox. id of the information field, always to also display said value underneath the thumbnail instead of its name, inline shows the information field value inline together with the asset name.
search
{string: 'my search', custom: 'search_node=123' }
- Executes a search for my search. You may add additional custom parameters (see Anura_API)
basket
$('.anura-basket').anuraBasket({server: ...})
- Activates the basket functionality (add several assets to a basket and download all of them in a ZIP). basket specified the DOM-element on which the basket should be created. If the target contains a span it is used to display a counter of the objects in the basket.
type_filter
[1, 2]
- Filter results so that only assets of the listed type are shown. Types in celum are: 1 image, 2 document, 3 video, 4 audio, 5 text, 0 unknown. (since 1.4, requires backend 1.3 or higher)
sort
function(a, b) {return a.id - b.id;}
null keyword, one of: id_asc, id_desc, name_asc, name_desc, pages_asc, pages_desc, size_asc, size_desc, date_asc, time_asc, date_desc, time_desc, extension_asc, extension_desc or a custom sorting function (see MDN)
video_frame_speed
500
800 speed (ms) at which video frames change when hovering - set to 0 to disable
send
6
false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
top
{number: 10, days: 7}
- show the top X downloads within the last Y days (replaces the node argument)
extended
true
false request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting
stream
true
false enables audio and video streaming - use with caution, might overload the server
autoplay
false
true whether to automatically start playing (with vimeo and/or stream)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<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>


Table

Options

requires backend version 1.3 or higher

Name Example Default Comment
node
{kind: 101, id: 1234}
- kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
paginate
12
24 Number of thumbnails per page or false to disable pagination
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
columns
['size', 'download']
'name, 'size', 'date', 'download' Columns (and their order) to display. Any of: 'name, 'thumb', 'size', 'extension', 'date', 'time', 'download', 'pages', 'alt_name' or any other key returned by an API response (define headings for those using headings: {my_key: 'my title'})
detail_view
'slimbox'
colorbox Action triggered when a thumbnail is clicked. One of: slimbox, colorbox, details (colorbox with anuraDetails), function(item) {}, download (with detail_settings: {format: <dlf_id>}), blank, none
detail_settings
{}
- Optional settings for the specified detail_view. See respective documentation
download_menu
false
true Shows download format icons when hovering over a thumbnail. Uses the formats that are available to the backend user (unless disabled via download_directly)
force_zip
true
false Force even single asset downloads to be delivered in a ZIP-file
alternative_name
{id: 16, always: true}
- Use the value of an information field instead of the asset name in the lightbox. id of the information field, always to also display said value underneath the thumbnail instead of its name.
hover_thumbnail
false
true display the thumbnail of the asset when hovering over the name (instead of 'title'-attribute)
search
{string: 'my search', custom: 'search_node=123' }
- Executes a search for my search. You may add additional custom parameters (see Anura_API)
basket
$('.anura-basket').anuraBasket({server: ...})
- Activates the basket functionality (add several assets to a basket and download all of them in a ZIP). basket specified the DOM-element on which the basket should be created. If the target contains a span it is used to display a counter of the objects in the basket.
type_filter
[1, 2]
- Filter results so that only assets of the listed type are shown. Types in celum are: 1 image, 2 document, 3 video, 4 audio, 5 text, 0 unknown. (since 1.4, requires backend 1.3 or higher)
sort
function(a, b) {return a.id - b.id;}
null keyword, one of: id_asc, id_desc, name_asc, name_desc, pages_asc, pages_desc, size_asc, size_desc, date_asc, time_asc, date_desc, time_desc, extension_asc, extension_desc or a custom sorting function (see MDN)
sortable
false
true enable sorting by clicking on the column headers
send
6
false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
top
{number: 10, days: 7}
- show the top X downloads within the last Y days (replaces the node argument)
stream
true
false enables audio and video streaming - use with caution, might overload the server
autoplay
false
true whether to automatically start playing (with vimeo and/or stream)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<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>


Tree

Options

Name Example Default Comment
node
{kind: 101, id: 1234}
- kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object, or an array of celum IDs to construct a virtual root node, e.g. {kind: 103, id: [10909, 12246]} (in this case you probably want to set show_root to true as well)
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
show
4123
- Activate the node show immediately after initialization (celum-id) or "first"/"last" to select the first/last leaf in the tree.
anchor
true
false Show the id of the activated node as an #anchor in the URL. Enables users to link/bookmark a specific node directly. Overrides the show parameter if an anchor is found on load.
asset_count
true
false display how many assets are in this container (slow in 1.x! use on small trees or in combination with lazy loading) - since 1.6
show_root
true
false display the root node you requested as well - probably only useful for virtual root nodes
show_tags
true
false show node icons (e.g. colored folders) in the tree - since 1.9
depth
2
0 Depth to which the tree should be loaded (lazy loading). Using a depth < 1 loads the entire tree (requires backend version 1.2 or higher)
callback
function(server, kind, id) {/*do something*/}
- Function defining the action to be triggered when clicking on a node. If no function has been specified the plugin will look for an existing gallery to show the contents of the node
sort
function(a, b) {return a.id - b.id;}
null custom sorting function - see MDN
hide_empty
true
false hide nodes that don't contain any assets (implies asset_count) - sice 2.1
noderef
true
false consider node referencing information field usages as directly assigned assets (like the navigation context in the CELUM UI) - since 2.0
list_style
false
true show list style icons in the tree - since 2.2
li_expander
true
false enable folding of the tree (regardless of the current selection) when clicking on the list style icons - since 2.3

Notes:

  • The node.id parameter supports arrays, i.e. you can construct a virtual node (to aggregate multiple nodes from different locations) by using {kind: ..., id: [1, 2, 3]}. Set to -1 to get all root nodes (enforces show_root=true; since 1.7).
  • Also available as a horizontal navigation bar (with folding). Simply use jquery.anura.navbar.css instead of jquery.anura.tree.css (suitable for trees up to a depth of 3)
  • Do not initialize the tree before the gallery component when using the show parameter or the URL-state, as this may lead to a race condition

Events

  • anura-loaded (options, data) - triggered when the plugin has loaded all nodes
  • anura-clicked (server, kind, id, name) - triggered when a user clicks on a node/leaf

Box Model

<div class="anura-tree-container">
¦  <ul>
¦  ¦  <li class="anura-node anura-active">
¦  ¦  ¦  <a><span class="anura-node-name">Parent Node</span></a>
¦  ¦  ¦  <ul class="anura-tree-unfolded">
¦  ¦  ¦  ¦  <li class="anura-node">
¦  ¦  ¦  ¦  ¦  <a><span class="anura-node-name">Child Node</span></a>
¦  ¦  ¦  ¦  ¦  <ul class="anura-tree-folded">
¦  ¦  ¦  ¦  ¦  ¦  <li><!--etc--></li>
¦  ¦  ¦  ¦  ¦  </ul>
¦  ¦  ¦  ¦  </li>
¦  ¦  ¦  ¦  <li class="anura-leaf">
¦  ¦  ¦  ¦  ¦  <a><span class="anura-node-name">Child Leaf</span></a>
¦  ¦  ¦  ¦  </li>
¦  ¦  ¦  </ul>
¦  ¦  </li>
¦  ¦  <li class="anura-node"><!--etc--></li>
¦  ¦  <li class="anura-leaf"><!--etc--></li>
¦  ¦  <!--etc-->
¦  </ul>
</div>


Slider

Options

Name Example Default Comment
node
{kind: 101, id: 1234}
- kind specifies the type of celum container (101 = folder, 102 = object collection 103 = keyword), id the celum ID of the object
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
alternative_name
16
- Alternative image caption instead of the asset name (information field id)
slider
{speed: 1024}
adaptiveHeight: true, auto: true Additional options for the Slider
sort
function(a, b) {return a.id - b.id;}
null custom sorting function - see MDN
top
{number: 10, days: 7}
- show the top X downloads within the last Y days (replaces the node argument)

Events

  • anura-loaded (options, assets) - triggered when the plugin has loaded all assets

Box model

<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>


Details

Options

Name Example Default Comment
asset
4123
required ID of the asset to show the details of (replaces the usual node: {kind: 0, id: 0})
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
show
['infofields','general']
['general','infofields','pages','downloads','links'] Which detail components to show and in what order - any of: infofields, general, keywords, keyword_paths, downloads, pages, links
alternative_name
16
- Alternative image caption instead of the asset name (information field id)
send
6
false adds a "mailto" hyperlink to the download menu (ID of the download format to use or true for the first)
split
true
false put the widgets into individual tables instead of one big one
callback
function(options, data) {...}
- function that should be called after loading
download_directly
false
true download: show direct download links (otherwise only the basket is available)
show_dlf_description
true
true download: show the description of the download formats on an extra line (instead of the tooltip)
icon_transform
function(icon) {return icon.replace('/dark/', '/light/')}
function(icon) {return icon.replace('/big/', '/small/')} download: icon transformation callback to change size/color
paginator_nav
{prev: '&lt;', next: '&gt;'}
{prev: '←', next: '→'} pages: text or html to use to the left/right nav arrows
paginator_target
'#yourLightbox .theImg'
'#cboxContent .cboxPhoto' pages: target selector for the page switcher
infofield_transform
{3: function(info) {return 'Hello '+info.value+'!'}}
- infofields: map of infofieldId->function to transform infofield content
infofield_sort
function(a, b) {...}
localeCompare on name infofields: custom sorting function to determine the order of the infofields

Events

  • anura-loaded (options, data) - triggered when the plugin has loaded all the detail information

Box Model

<div class="anura-details-container">
¦  <table class="anura-table-0">
¦  ¦  <tbody>
¦  ¦  ¦  <tr class="title general">
¦  ¦  ¦  ¦  <td colspan="2">Object Details</td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="general">
¦  ¦  ¦  ¦  <td class="anura-name">Name</td>
¦  ¦  ¦  ¦  <td class="anura-value">Athene Cunicularia</td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="general"><!--etc--></tr>
¦  ¦  ¦  <!--etc-->
¦  ¦  ¦  <tr class="title infofields">
¦  ¦  ¦  ¦  <td colspan="2">Information Fields</td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="infofield">
¦  ¦  ¦  ¦  <td class="anura-name">Description</td>
¦  ¦  ¦  ¦  <td class="anura-value">A Burrowing Owl near Goiânia, Goiás, Brazil. It is standing on one leg</td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="infofield"><!--etc--></tr>
¦  ¦  ¦  <!--etc-->
¦  ¦  ¦  <tr class="title download">
¦  ¦  ¦  ¦  <td colspan="2">Download Formats</td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="basket">
¦  ¦  ¦  ¦  <td colspan="2">
¦  ¦  ¦  ¦  ¦  <a class="anura-details-download">
¦  ¦  ¦  ¦  ¦  ¦  <div class="basket-img"></div>
¦  ¦  ¦  ¦  ¦  ¦  <div class="anura-details-download-name">Add to basket</div>
¦  ¦  ¦  ¦  ¦  </a>
¦  ¦  ¦  ¦  </td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="dlf">
¦  ¦  ¦  ¦  <td colspan="2">
¦  ¦  ¦  ¦  ¦  <a class="anura-details-download">
¦  ¦  ¦  ¦  ¦  ¦  <img src="...">
¦  ¦  ¦  ¦  ¦  ¦  <div class="anura-details-download-name" title="Original Format">Original Format</div>
¦  ¦  ¦  ¦  ¦  </a>
¦  ¦  ¦  ¦  </td>
¦  ¦  ¦  </tr>
¦  ¦  ¦  <tr class="dlf"><!--etc--></tr>
¦  ¦  ¦  <!--etc-->
¦  ¦  </tbody>
¦  </table>
</div>


Search

Options

requires backend version 1.5 or higher

Name Example Default Comment
locale
'de'
- Display language. Availability equals those of celum. Fallback if nothing is specified is celum's default language
widgets
[{name: 'text', scope: $('#navigation')}]
[{name: 'text', scope: null},{name: 'type'}] Which search components to show and in what order. Available:
{name: 'text', scope: null}, // scope needs an anuraTree of folders or keywords, e.g. $('#navigation')
{name: 'type', style: <optional string>}, // document type (images, documents, audio, video, others), style: checkbox/dropdown/select
{name: 'keywords', root: <keyword id>, multiple: <bool>, show: <optional keyword id>} // requires jquery.anura.tree
{name: 'keyword_filter', ids: [x, y, z], depth: 2, multiple: <bool>, join_string: ', '} // keywords as dropdowns (jquery.chosen.js recommended)
{name: 'infofield', id: <infofield id>, style: <optional string>} // style: 'range' for types text/number/date, dropdown/radio for type checkbox, dropdown/radio/checkbox for type dropdown and tree/dropdown for noderef
{name: 'properties', uploaded: true, modified: true, size: true}

autosubmit is available on all widgets, set this to true in order to trigger the search immediately (instead of waiting for the "search"-button to be clicked)

folder
42
- Restrict search to this folder - widget.scope overrides this if enabled
keyword
7
- Restrict search to this keyword - widget.scope or keywords override this if enabled
custom &search_infofield=628,1 - Arbitrary arguments sent along with the request
resettable
false
true Adds a reset search link to the bottom
show_empty
true
false Whether to tell the attached view about the lack of search results (otherwise just show a message in search, 1.x only)
extended
true
false Request extended asset properties (size, modified) etc. - has no effect other than that you could use them for sorting

Events

  • anura-init (options) - triggered after the plugin is done loading the user interface
  • anura-init-<infofield-id> (options) - triggered after an informationfield widget is done loading (independent of anura-init)
  • anura-loaded (options, assets) - triggered after a search has been executed
  • anura-reset (options) - triggered when the user clicks on the "reset search" button

Box model

<div class="anura-search-container anura-locale-en">
¦  <input type="text" class="anura-search-text">
¦  <fieldset class="anura-search-type">
¦  ¦  <legend>Type</legend>
¦  ¦  <input type="checkbox"><label>Images</label><br>
¦  ¦  <input type="checkbox"><label><!--etc--></label>
¦  </fieldset>
¦  <fieldset class="anura-search-keywords">
¦  ¦  <legend>Keywords</legend>
¦  ¦  <div class="anura-search-keyword-tree">
¦  ¦  ¦  <!-- anura-tree-container -->
¦  ¦  </div>
¦  </fieldset>
¦  <fieldset class="anura-search-infofield">
¦  ¦  <legend>Usage rights</legend>
¦  ¦  <input type="radio"><label>freely available</label><br>
¦  ¦  <input type="radio"><!--etc--></label>
¦  </fieldset>
¦  <input type="button" value="Search" class="anura-search-button">
¦  <a class="anura-search-reset">Clear</a>
</div>

Basket

Options

The basket functionality is available in Gallery, Masonry and Table. Use this object for their basket-parameter.

Name Example Default Comment
add
[asset_id1, asset_id2, ...]
null Assets to add to the basket (int or array of int)
remove
[asset_id1, asset_id2, ...]
null Assets to remove from the basket (int or array of int)
action
'show'
- Action after initialization, one of: show, hide, toggle
force_zip
true
false Force even single asset downloads to be delivered in a ZIP-file
cookies
false
true Use cookies to persist the basket (requires jquery.cookies.js). Provide a string instead to differentiate multiple baskets, e.g. cookies: 'foo' will use the cookie 'anura-basket-foo'.
send
6
false adds a "mailto" hyperlink (ID of the download format to use or true for the first)
terms_and_conditions
{title: 'T&C', message: 'Lorem ipsum', confirm: 'I agree'}
null show terms and conditions - when the confirm-parameter is present, a checkbox will appear and hide the download buttons until you check it. Localize any of the three texts by providing {de: 'Ich bin einverstanden', en: 'I agree'} instead of just a string
icon_transform
function(icon) {return icon.replace('/dark/', '/light/')}
function(icon) {return icon.replace('/big/', '/small/')} Icon transformation callback to change size/color
clear_after_download
false
true Clears the basket when the download starts
show_description
false
true Show the description of the download formats as a second line (instead of a tooltip)

Note: applies both to jquery.anura.basket-popup.js and jquery.anura.basket-tip.js - use one of the two (not both).

Box model

<div id="anura-basket-overlay">
¦  <div class="anura-basket-popup anura-locale-">
¦  ¦  <div class="anura-basket-popup-titlebar"><span>×</span></div>
¦  ¦  <div class="anura-basket-thumbs">
¦  ¦  ¦  <div class="anura-basket-thumb"><img src="...">
¦  ¦  ¦  ¦  <div class="anura-basket-thumb-delete hover"></div>
¦  ¦  ¦  </div>
¦  ¦  ¦  <div class="anura-basket-thumb"><!--etc--></div>
¦  ¦  ¦  <!--etc-->
¦  ¦  </div>
¦  ¦  <div class="anura-basket-download">
¦  ¦  ¦  <h3 class="anura-basket-download-title">Download:</h3>
¦  ¦  ¦  ¦  <div class="anura-basket-download-holder">Download Format X</div>
¦  ¦  ¦  ¦  <div class="anura-basket-download-holder"><!--etc--></div>
¦  ¦  ¦  ¦  <!--etc-->
¦  ¦  ¦  <h3 class="anura-basket-download-send">Send:</h3>
¦  ¦  ¦  ¦  <div class="anura-basket-download-holder mailto">Send Hyperlink</div>
¦  ¦  ¦  <span class="anura-basket-reset">clear</span>
¦  ¦  </div>
¦  </div>
</div>

Breadcrumbs

Options

Provides breadcrumbs based on an anuraTree's selection (e.g. [Earth > Europe > Switzerland])

Name Example Default Comment
tree
myTree
null the anuraTree to listen on (from the $.anuraTree call)
callback
function(server, kind, id, name) {...}
null called when a node/leaf is clicked

Events

  • anura-clicked (server, kind, id, name) - triggered when a user clicks on a breadcrumb link

Box model

<ul class="anura-breadcrumbs-container">
¦  <li class="anura-breadcrumb level-0"><a>World</a></li>
¦  <li class="anura-breadcrumb level-1"><a>Europe</a></li>
¦  <li class="anura-breadcrumb level-2"><a>Switzerland</a></li>
</ul>

Server

There's usually one dispatcher /anura registered on the server which uses the user anuraProvider.userId (property). In case you need more than one anura user on the same server (different permissions) you can extend the plugin.xml with a further entry - for example for the URL anura-xyz

  • Go to the anuraProvider folder (usually in C:/web/celum/custom or /usr/local/celum/custom)
  • Duplicate the anuraProvider-dispatcher.xml file and call it something else (e.g. anuraProvider-dispatcher-xyz.xml)
  • Edit the duplicated file, replacing the two occurances of ${anuraProvider.userId} with something else (e.g. ${anuraProvider.userIdXyz})
  • Go to the configuration editor and configure the new user id (e.g. anuraProvider.userIdXyz=123)
  • In the same plugin folder, edit the plugin.xml file, adding the second dispatcher: Find and duplicate the section with ID "anuraDispatcherExtension". Change the following
<extension plugin-id="imagine.ui" point-id="dispatcher" id="anuraDispatcherExtensionXYZ"><!-- important: change the ID, duplicate IDs will prevent celum from starting -->
    <parameter id="name" value="anura-xyz" /><!-- this is the name of the URL you'll be using in the front-end, i.e. http://my.celum/anura-xyz -->
    <parameter id="contextPath">
     <value>
       /WEB-INF/context/common.xml
       /WEB-INF/context/web/common-web.xml
 
       /WEB-INF/context/properties.xml
       relative:../custom/anuraProvider/anuraProvider-root.xml
       relative:../custom/anuraProvider/anuraProvider-dispatcher-xyz.xml <!-- the file we just duplicated -->
     </value>
    </parameter>
</extension>
Meine Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Werkzeuge