Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.



Last Updated: Jun 06, 2017 02:23PM EDT

The <koken:pulse /> template tag may be customized using attributes. Attributes are assigned using name/value pairs (e.g.,  name="value"). The table below displays all available attributes that may be assigned to the tag.

Attribute Type Description Default
autostart Boolean Automatically request the next item (true) or stop (false) after displaying the first item. true
background Hex The background color of the slideshow. transparent
can_link_to_album Boolean Controls whether the source album's site page should be included as a click action option in the slideshow's settings. Only necessary when data="album.covers" is assigned. false
crop String Display content proportionally ("none"), fill ("fill"), fill content with the same aspect ratio as the slideshow ("adaptive"), always fill landscape images ("landscape") or always fill portrait images ("portrait"). none
data Object For assigning a loaded data object as the slideshow's source. Also see source for similar functionality. n/a
fallbacktext String Text to display if no slideshow data was loaded. empty
filter:param String Assigns a filter to return a subset of data. See parameters. empty
fullscreen String The ID of the page element that triggers full screen mode. Example empty
fullscreenroot String The ID of the page element that should be used when entering full screen. empty
group String For grouping multiple instances together under a common name as a single editable entity. empty
height Number For displaying Pulse at a fixed height. empty
index Number Item to load first. 0
jsvar String Used to bind Pulse to external Javascript. Accepts name of the object that should be bound. empty
link_to String Assigns hyperlinks to slideshow content. Options include "advance" (loads the next item), "playback" (toggles playback), "lightbox" (launches content in the lightbox viewer), "content" (displays the content using content.lens), "album" (displays the content's parent album if an album is assigned) and "false" to not react to clicks/taps. false
loop Boolean Restart the slideshow (true) or stop (false) after displaying the final item. true
next String ID of the page element that, when clicked, loads the next item. Example empty
previous String ID of the page element that, when clicked, loads the previous item. Example empty
random Boolean Playback items in random order (true) or present normally (false). false
relative Boolean When true, a relative path will be used to for the image src. true
restart String ID of the page element that, when clicked, restarts the slideshow by loading the first item. Example empty
size String Defines the slideshow's dimensions. You may assign an aspect ratio (e.g., "3:2", "1:1"), "Auto" or "Expand". When using an aspect ratio, Pulse scales 100% to the largest ratio number while the opposing number is calculated as a percentage. When set to "Auto", Pulse matches the width of its container element and then calculates a fixed height that will display all source images at the same scale. When set to "Expand", Pulse matches the width of its container element and then expands and contracts its height to display all source images at the same scale. 3:2
source Object For loading a specific data source. Note that Pulse can operate without this assignment by loading its parent template's data. See the Adding Pulse to templates page for more info. empty
speed Number The number of seconds an item displays before the next item is requested. 3
swipe Boolean Enables swiping of slideshow content on touch enabled devices. true
toggle String ID of the page element that acts as a playback toggle when clicked. Example empty
transition_type String The transition's animation style. Options include "Dissolve", "Fade", "Slide" and "None". Note: Install our free Transitions pack plugin for more styles. Dissolve
transition_duration Number The length (in seconds) of the transition animation. 1
width Number For displaying Pulse at a fixed width. empty

Assigning attributes

Assigning attributes to a pulse instance is simply a matter of adding the attribute's name (see "Attribute" column above) followed by an appropriate value. Here's an example that demonstrates adding the autostart attribute:

<koken:pulse autostart="false" />

As explained in our instructions for adding Pulse to a template, slideshow attributes are editable inside the Site console. If you include an attribute with a value different from its default your value will take precedence and be used in the slideshow edit panel.

Filtering data

When requesting data directly using the source attribute you may filter the returned by data by adding a filter attribute. Available filters include:

Filter Type Source
category string contents
favorites boolean contents
featured boolean contents
id number album, content
month string contents
tags string contents
year number contents

The filter attribute is formatted as filter:filter-name (see "Filter" column in the table above). Filters may be inclusionary or exclusionary.

Examples (Inclusionary)

In the following we display a slideshow that loads data from an album using its ID. Album IDs are displayed in the Library's right column when an album is selected.

<div style="width:500px;height:400px;">
  <koken:pulse source="album" filter:id="1" />

In this example we load uploaded images that have been assigned the tags "desert" and/or "sand":

<div style="width:500px;height:400px;">
  <koken:pulse source="contents" filter:tags="desert,sand" />

Here's an example demonstrating how to load all uploaded images assigned the category "Portrait":

<div style="width:500px;height:400px;">
  <koken:pulse source="contents" filter:category="Portrait" />

In this example we load all content marked as a favorite:

<div style="width:500px;height:400px;">
  <koken:pulse source="contents" filter:favorites="true" />

Here we demonstrate loading all uploaded images that were captured in a particular year (2012):

<div style="width:500px;height:400px;">
  <koken:pulse source="contents" filter:year="2012" />
Examples (Exclusionary)

Filters may also be used to include content through exclusion. You do so by adding :not after the filter name. Here's a example that modifies our earlier example using tags:

<div style="width:500px;height:400px;">
  <koken:pulse source="contents" filter:tags:not="desert,sand" />

The slideshow will then display all uploaded images that are not assigned "desert" or "sand" as a tag.

Reading attributes

Attribute values may be retrieved and used in Javascript. To read an attribute you must first assign a variable to the pulse instance, like so:

<koken:pulse jsvar="sldshw" />

This will be used to identify the instance in our code. We then retrieve attributes by adding .options, followed by the attribute name. For example:

  sldshw.on( 'start', function() {

We first add a 'start' event so we don't try to retrieve the value too early (before pulse has initialized). Once loaded we then write to the Javascript console the value of autostart.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found