Support Center

About Koken

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

Adding Pulse to templates

Adding Pulse to templates

Last Updated: May 20, 2014 02:25PM EDT

If you are building your own site theme you may use Pulse to display slideshows of content. This walkthrough will explain how Pulse may be added and formatted in site templates.

How Pulse works

Pulse may be added to any Lens template to display content. Pulse may load (if compatible) the native data of its parent template or be assigned a specific data source. The templates which allow Pulse to display their native data are listed below.

Template Description Data source
album.lens Single album album
albums.lens Single albums album (via koken:loop)
contents.lens Public images and videos contents
favorites.lens Favorited images and videos favorites
index.lens Featured images and videos featured_content

Loading native template data

Let's look at an example where template data is loaded. Many designers like to use slideshows on their home pages to show a few choice photos, so we'll use index.lens for our example. Here's some basic markup:

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
  </head>
  <body>
    <koken:load>
      <koken:pulse />
    </koken:load>
  </body>
</html>

In the above the index.lens template loads its native data (featured content) through <koken:load>. Pulse is then added inside with the <koken:pulse> template tag. Because index.lens is a supported template, featured content is loaded into Pulse automatically.

Loading specific data

Slideshow content may also be requested directly. To do so, add a source attribute to the <koken:pulse> tag, like so:

<koken:pulse source="favorites" />

The following table displays all available values for source.

Data source Description
album Public library album
contents List of public content
featured_albums Featured albums
featured_content Featured content
favorites Favorite content

When assigning "album" to source you'll need an extra filter:id attribute. To use, click on any album in the Library. The right Inspector column will display (at the top) the album's ID. You'd then assign that ID like this:

<koken:pulse source="album" filter:id="1" />

Sizing Pulse

Like published images and videos in Koken, Pulse slideshows are responsive. Meaning, they upscale and downscale in size to fill the containers they're inserted into. Pulse may also be sized using an aspect ratio, a fixed dimension, or sized automatically based on the dimensions of its source content. We'll explain each of the available sizing options below.

Fluid

Create a container around the Pulse template tag and assign dimensions to it. Pulse will automatically scale to fill that element. If you then use media queries to resize its container, Pulse will continually scale and reformat itself to fit. Here's an example:

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
    <style type="text/css">
      #slideshow {
        width:800px;
        height:500px;
      }
    </style>
  </head>
  <body>
    <koken:load>
      <div id="slideshow">
        <koken:pulse />
      </div>
    </koken:load>
  </body>
</html>

Pulse will then be displayed at 800px wide by 500px high, the same value as its container element (#slideshow).

Aspect ratio

Aspect ratios extend fluid sizing by setting one side of the slideshow as a percentage of the other. Pulse scales itself 100% to whichever ratio number is the largest, then assigns a percentage of that to the opposing side. Aspect ratios are assigned using the size attribute, as shown below:

<div id="slideshow">
  <koken:pulse size="3:2" />
</div>

Fluid and fixed

If you want to keep the fluid horizontal scaling but force Pulse to a fixed height, you may do so by excluding size and including a height attribute instead. Here's another example:

<div id="slideshow">
  <koken:pulse height="400" />
</div>

Pulse will then be the same width as #slideshow but it will override its height and be displayed instead at 400px tall. You can also do the inverse by assigning a fixed height value instead of width.

Fixed

To set Pulse at a fixed width and height add width and height attributes. The slideshow will always be displayed at those dimensions. For example:

<koken:pulse width="400" height="300" />

You may also then insert the Pulse tag without a surrounding container element (#slideshow in prior examples).

Auto

Last but not least, you may also size Pulse automatically. When this is used, Pulse scales 100% wide to fill its container, but then automatically calculates a height that is best for displaying its source content. For example, if you were displaying an album of portrait images, Pulse would be taller than normal. If displaying a mix of portraits and landscapes, or a group of square (1:1) photos, Pulse would be sized as a square. Use auto sizing by assigning "auto" to the aforementioned size attribute, like so:

<div id="slideshow">	
  <koken:pulse size="auto" />
</div>

Editing slideshow settings

As explained in our Pulse overview, when a template containing Pulse is loaded into the Site console publishers may edit settings by mousing-over the slideshow then clicking the edit button that appears in its top right corner. A floating panel containing all editable options is then made available.

Default slideshow settings are based on Pulse attributes. These attributes may be assigned to the <koken:pulse> tag to change their default value when presented in the panel. For example, if you wanted your slideshow to begin playback automatically as part of your template, you would edit it like the example below. Your autostart preference would then be used in the slideshow edit panel.

<div id="slideshow">
  <koken:pulse autostart="true" />
</div>

Groups

If a template contains more than one Pulse instance, settings are shared between them. You may however designate one or more instances as being unique from other instances by assigning a group attribute.

To use, assign group to <koken:pulse> and assign any name you'd like to make it unique. With the below in place, each slideshow will have its own unique editable settings in the Site console.

<koken:pulse group="faves" />
<koken:pulse />

If you have more than one instance in a group and need to assign attributes, assign them to the first instance that appears in your template. Your assigned attributes will then be shared amongst any instances in the same group. For example:

<koken:pulse group="faves" autostart="true" />
<koken:pulse group="faves" />

Extending Pulse

Ready to learn more about Pulse? You can extend Pulse with your own external controls for slideshow playback. You may also tap into Pulse's events for even richer customization opportunities.

support@koken.me
http://assets2.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete