Support Center

About Koken

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

Lens tags

Lens tags

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

Lens template tags render HTML elements or conditionally load data. They are formatted like traditional HTML tags and may be customized with attributes. The following is a list of all supported Lens template tags, plus examples of each.

Labels

You'll notice color labels appended to each tag. These labels indicate the context in which each template tag can be used. See Lens templates for an explanation of how templates load data.

  • Global — Tag that may be used anywhere.
  • Content — Tag used when rendering uploaded images and videos.
  • Essay — Tag used when rendering an essay.
  • Album — Tag used when rendering an album.
  • Event — Tag used when rendering a timeline event.

koken:album_download Album

Displays album download data.

Variables Description
{{ album_download.title }} Returns the title of the Album.
{{ album_download.link }} Returns the absolute url of the album to be downloaded.

Examples

Here's a usage example from album.lens.

<koken:album_download>
  <p>
    <koken:link>Download {{ album_download.title }}</koken:link>
  </p>
</koken:album_download>

koken:albums Content

For publishing a list of all public albums an image or video is included in.

Attributes Type Description Default
include_current Boolean Whether to include the album the image/video is currently being viewed in. true
order_by String Order in which albums are returned. Values include title, published_on, modified_on and created_on. title
order_direction String Direction of order. Options include asc for ascending and desc for descending. asc
Variables Description
{{ count }} Total number of albums.

Examples

In the following example (from a content.lens template) we loop over the data returned by <koken:albums> and display linked album titles separated by a comma. Each link takes the user to album.lens to display that album.

<koken:albums>
  Also appears in:
  <koken:loop separator=", ">
    <koken:link>
      {{ album.title }}
    </koken:link>
  </koken:loop>
</koken:albums>

koken:asset Global

Loads an external file (style sheet, javascript, image, etc) into a template. Koken automatically generates the appropriate HTML tag depending on the type of file being loaded. URLs are always relative to a site's theme folder.

Attributes Type Description
file String The URL to the external asset you want to include.
common Boolean For loading an asset from Koken's built-in collection of common theme files located in app/site/themes/common. Used mostly with default themes.
version Boolean, String For preventing caching of external assets by appending a version to the request. When set to true the theme's version is inherited. Otherwise the string specified is used.

Examples

The following loads a style sheet using a relative URL inside the theme's folder:

<koken:asset file="css/screen.css" />

This example loads the common reset.css style sheet:

<koken:asset file="reset.css" common="true" />

koken:background Album Content

Publishes an image as the background of a generated HTML element. This effectively works the same as <koken:img /> except instead of generating an img tag a div is created with a background equal to the image.

Attributes Type Description
class String For assigning a class to the generated tag.
lazy Boolean When true, background image loads when scrolled into view.
position String For assigning a background position. Default is "center center".
relative Boolean When true, a relative path will be used to for the image src. Default value is true.
tag String For changing the type of tag that is generated. Default is div.

Examples

In the following example from a contents.lens template we loop over all content and generate a div for each item. The image is assigned as the background of the div, which is also assigned a class of "thumb" so we can style it with CSS. We also publish the content title, which appears on top of the background image.

<koken:loop>
  <koken:background class="thumb">
    {{ content.title }}
  </koken:background>
</koken:loop>

To assign a background position, use values like you would when using the background-position CSS property. For example, to position in the upper left corner you'd assign "0 0", like so:

<koken:loop>
  <koken:background class="thumb" position="0 0">
    {{ content.title }}
  </koken:background>
</koken:loop>

koken:breadcrumbs Global

Publishes links to each page that is a parent to the current page.

Attributes Type Description
link_current Boolean Controls whether the last link (the current page) is assigned a hyperlink. Default is "true".
separator String Character to display in-between links. Default is ">".
show_home Boolean Controls whether a link to the home page is included. Default is true.
show_if_single Boolean Controls whether breadcrumbs should be published if only one link is available. Default is true (always show breadcrumbs).

Example

Inserting breadcrumbs into a template is easy. Simply do the following anywhere inside <koken:load>. In this example we've changed the separator and will hide the breadcrumbs if only one link is available (eg, when used on a home page).

<koken:breadcrumbs separator="/" show_if_single="false" />

koken:categories Content Album Essay

Loads and displays categories.

Attributes Type Description Default
order_by String Order in which categories are returned. Values include title and count. title
order_direction String Direction of order. Options include asc for ascending and desc for descending. asc
Variables Description
{{ category.title }} The title of the category.
{{ category.counts.content }} Total number of library images and videos the category is assigned to.
{{ category.counts.essays }} Total number of essays the category is assigned to.
{{ category.counts.albums }} Total number of albums and sets the category is assigned to.
{{ count }} Total number of categories.

Examples

The following prints a comma separated list of each category associated with the content presented on a page. Each category is wrapped with a hyperlink to their respective archive page.

<koken:categories>
  Categories:
  <koken:loop separator=", ">
    <koken:link>
      {{ category.title }}
    </koken:link>
  </koken:loop>
</koken:categories>

koken:content_image Content

Conditional that detects whether the content loaded is an image. Here's an example from a typical content.lens template:

<koken:content_image>
  <!-- We have an image -->
  <koken:img />
</koken:content_image>

koken:content_video Content

Conditional that detects whether the content loaded is a video. Here's an example from a typical content.lens template:

<koken:content_video>
  <!-- We have a video -->
  <koken:video />
</koken:content_video>

koken:context Content

Displays contextual information for individual images or videos. This tag is most commonly used to publish the title of the album, tag, or category an item is being viewed within.

Variables Description
{{ context.title }} Title of the parent context (album, tag or category).
{{ context.position }} Index of the image/video in the parent context.
{{ context.total }} Total number of images/videos in the parent context.

Examples

The following example from a typical content.lens template demonstrates how to use <koken:context> to publish contextual information about an image/video. This outputs the title of the context (album, tag or category) and wraps it with a link to view more. It also creates a counter to display the numerical position of the image/video within the parent context.

If the image/video is not being viewed as part of an album, tag or category, then it falls back to <koken:else> to display a link to contents.lens.

<koken:context>
  <koken:link>
    {{ context.title }}
  </koken:link>
  ({{ context.position }} of {{ context.total }})
<koken:else>
  <koken:link to="contents">{{ labels.content.plural }}</koken:link>
</koken:context>

koken:covers Album

Loads and displays all of the cover images assigned to an album.

Attributes Type Description Default
limit Number Limits the returned data to a specific number of results. empty
minimum Number Assigns the minimum number of cover images to be returned. If an album has fewer assigned covers than the minimum a different (non-cover) image from the album is selected at random and used as a cover. empty
Variables Description
{{ count }} Total number of cover images.

Examples

In the example below (from an albums.lens template) we publish an image for each cover the album contains.

<koken:covers>
  <koken:loop>
    <koken:img />
  </koken:loop>
</koken:covers>

To display only the album's primary cover, you may just use <koken:img /> by itself without <koken:covers>, or replace <koken:loop> (from the example above) with a <koken:first> tag, like so:

<koken:covers>
  <koken:first>
    <koken:img />
  </koken:first>
</koken:covers>

koken:dates Global

Displays links to monthly archives for the timeline, albums, content and essays.

Attributes Type Description Default
limit_to String Publish dates for only a particular content type. Options include essays, albums and content. empty
Variables Description
{{ count }} Total number of dates.

Example

When used by itself, <koken:dates> publishes a link for each month of timeline activity. That link leads to date.lens to display all events that were published in that particular month. Here's example code that could be used anywhere in any template:

<koken:dates>
  <koken:loop>
    <koken:link>
      {{ date.title }}
    </koken:link>
  </koken:loop>
</koken:dates>

You can also display monthly archival links for specific types of content. For example, monthly archive links for essays in archive.essays.lens, albums in archive.albums.lens and content in archive.contents.lens. You'd do that by appending the limit_to attribute (see table above for values). You can also display the number of items inside each month, as shown in the example below which allows visitors to browse essays by month.

<koken:dates limit_to="essays">
  <koken:loop>
    <koken:link>
      {{ date.title }} ({{ date.counts.total }})
    </koken:link>
  </koken:loop>
</koken:dates>

This tag can also be used in conjunction with <koken:select> to display a drop-down of date links. Here's the example above modified to display a select:

<koken:dates limit_to="essays">
  <koken:select label="Select month" />
</koken:dates>

koken:discussion Global

For publishing comments in a template from Disqus (using our official plugin) or other service via a plugin.

Variables Description
{{ discussion }} Renders the comment markup.

Examples

The code below would render a header and comment markup if the publisher has a plugin enabled (e.g, our Disqus plugin) that targets the template tag.

<koken:discussion>
  <h3>Comments</h3>
  {{ discussion }}
</koken:discussion>

koken:discussion_count Global

Ties in with <koken:discussion> to display the number of comments made on a particular item. Requires the Disqus plugin.

Variables Description
{{ discussion_count }} Renders the comment count.

Examples

The <koken:discussion> must be added first to a content.lens, essay.lens and/or album.lens page in order for count data to be returned. Once you've integrated that tag and comments are displaying, insert <koken:discussion> into any other page that lists applicable content. For example, essays.lens, albums.lens and/or contents.lens. Inside <koken:loop> on those pages you'd insert the following to display the number of comments made on each content item:

<koken:discussion_count>
  {{ discussion_count }}
</koken:discussion_count>

koken:event Event

This tag is rendered for each event returned by timeline data. It wraps the <koken:event_album>, <koken:event_content>, <koken:event_essay> and <koken:event_album_update> template tags. Koken uses the markup inside each of the aforementioned tags when publishing timeline events.

Example

Here's a typical example from a timeline.lens template.

<koken:load>
  <koken:loop>
    <koken:event>
      <koken:event_album>
        <!-- Rendered if a new public album is created -->
      </koken:event_album>
      <koken:event_content>
        <!-- Rendered if a new public image/video is uploaded -->
      </koken:event_content>
      <koken:event_essay>
        <!-- Rendered if a new essay is published -->
      </koken:event_essay>
    </koken:event>
  </koken:loop>
</koken:load>

koken:event_album Event

Renders a public album in a timeline event. Here's an example from a timeline.lens template:

<koken:load>
  <koken:loop>
    <koken:event>
      <koken:event_album>
        <-- Link to view the album in album.lens -->
        <koken:link>
          <-- Displays the album's primary cover -->
          <koken:img />
          {{ album.title }}
        <koken:link>
      </koken:event_album>
    </koken:event>
  </koken:loop>
</koken:load>

koken:event_album_update Event

Renders content that's been added to a public album. The update event is only used for albums that are at least one day old. Otherwise <koken:event_album> is used. Here's an example from a timeline.lens template:

<koken:load>
  <koken:loop>
    <koken:event>
      <koken:event_album_update>
        <!-- Link to view the album in album.lens sorted by recency -->
        <koken:link>
          <koken:loop>
          <!-- Display each added image -->
            <koken:img />
          </koken:loop>
          {{ album.title }}
          <!-- Display number of items added -->
          ({{ content.length }} new {{ content.length plural="items" singular="item" }})
          {{ album.summary }}
        <koken:link>
      </koken:event_album_update>
    </koken:event>
  </koken:loop>
</koken:load>

koken:event_content Event

Renders a public image or video in a timeline event. Here's an example from timeline.lens.

<koken:load>
  <koken:loop>
    <koken:event>
      <koken:event_content>
        <!-- Render the image or video -->
        <koken:content_image>
          <!-- View image in content.lens -->
          <koken:link>
            <koken:img />
          </koken:link>
        </koken:content_image>
        <koken:content_video>
          <koken:video />
        </koken:content_video>
        <!-- Display title or filename if not assigned -->
        {{ content.title | content.filename }}
        {{ content.caption }}
      </koken:event_content>
    </koken:event>
  </koken:loop>
</koken:load>

koken:event_essay Event

Renders a published essay in a timeline event. Here's an example from timeline.lens.

<koken:load>
  <koken:loop>
    <koken:event>
      <koken:event_essay>
        <!-- Link to view the essay in essay.lens -->
        <koken:link>
          <!-- Displays the essay's featured image -->
          <koken:featured_image>
            <koken:img />
          </koken:featured_image>
          {{ essay.title }}
          {{ essay.excerpt }}
        <koken:link>
      </koken:event_essay>
    </koken:event>
  </koken:loop>
</koken:load>

koken:exif Content

Publishes EXIF image metadata.

Variables Description
{{ exif.clean }} Used when looping over all EXIF data. Outputs EXIF values in human readable form. Eg, aperture would display as "f/3.6".
{{ exif.raw }} Used when looping over all EXIF data. Outputs EXIF values from the original image. Eg, aperture would display as "18/5".
{{ exif.computed }} Used when looping over all EXIF data. Outputs same value as exif.clean but without added characters. Eg, aperture would display as "3.6".
{{ exif.label }} Used when looping over all EXIF data. Outputs the name of an EXIF property.
{{ exif.make }} The manufacturer of the camera.
{{ exif.model }} The model name or model number of the camera.
{{ exif.image_description }} Title of the image.
{{ exif.user_comment }} Comments on the image.
{{ exif.aperture }} The lens aperture.
{{ exif.exposure }} Exposure time.
{{ exif.exposure_bias }} Exposure bias.
{{ exif.exposure_mode }} The exposure mode set when the image was shot.
{{ exif.flash }} Indicates whether flash was used.
{{ exif.focal_length }} The actual focal length of the lens, in mm.
{{ exif.iso_speed_ratings }} The ISO speed value of the camera.
{{ exif.lens }} The type of lens used.
{{ exif.metering_mode }} The metering mode.
{{ exif.white_balance }} Indicates the white balance mode set when the image was shot.
Variables Description
{{ count }} Total number of EXIF items.

Examples

Here's an example that prints the entire list of EXIF values. It loops over each and outputs the EXIF label, then first tries to print its value using the "clean" (human readable) version. If that's not available it displays the "raw" (unformatted) EXIF value.

<koken:exif>
  <koken:loop>
    <strong>{{ exif.label }}</strong>
    {{ exif.clean | exif.raw }}
  </koken:loop>
</koken:exif>

Example that displays specific EXIF properties and their values:

<koken:exif>
  <koken:not empty="exif.model">
    <strong>Camera:</strong> {{ exif.model }}
  </koken:not>
  <koken:not empty="exif.exposure">
    <strong>Exposure:</strong> {{ exif.exposure }}
  </koken:not>
</koken:exif>

Values output by specific EXIF properties — like the example above — are "clean" by default. This means they're formatted for readability. You may change this to "raw" to display unformatted data from the original EXIF metadata or "computed" for numeric versions of "clean". The example below shows two EXIF values displayed using both "raw" and "computed". To use other variables simply append ".raw" or ".computed" for that specific value, if available.

<koken:exif>
  <koken:not empty="exif.iso_speed_ratings">
    <strong>ISO:</strong> {{ exif.iso_speed_ratings.raw }}
  </koken:not>
  <koken:not empty="exif.aperture">
    <strong>Aperture:</strong> <span class="fstop">f</span>/{{ exif.aperture.computed }}
  </koken:not>
</koken:exif>

koken:featured_image Essay

For publishing the featured image associated with an essay or page.

Example

In the following example from an essays.lens page we loop over each published essay and publish their title, excerpt and featured image.

<html>
<head></head>
<body>
  <koken:load>
    <koken:loop>
      <article>
        <koken:featured_image>
          <koken:link>
            <koken:img />
          </koken:link>
        </koken:featured_image>
        <h1>{{ essay.title }}</h1>
        <p>{{ essay.excerpt }}</p>
      </article>
    </koken:loop>
  </koken:load>
</body>
</html>

koken:filtered Album

Used when an album page is viewed using a url query to filter content by date, tag or category. If the page is filtered the template tag's content is rendered. This is useful for displaying information about the filter and link to view more content.

Variables Description
{{ filter.count }} Number of items returned by the filter.
{{ filter.title }} Filter data type. Returns "Date", "Tags" or "Categories".
{{ filter.value }} Filter value. Returns the date, tag or category.

Example

The following code when added to album.lens first checks to see what type of filter is being used to access the page. After that it displays the total number of items the filter returned, the total number of items in the album, plus a link to view all the album's contents.

<koken:filtered>
  Displaying {{ filter.count }} of {{ album.counts.total }} / <koken:link>View all</koken:link>
</koken:filtered>

koken:geolocation Content

Publishes geolocation information for content items with GPS embedded in their EXIF data.

Variables Description
{{ geolocation.longitude }} East/west geographic coordinate from the image's GPS data.
{{ geolocation.latitude }} North/south geographic coordinate from the image's GPS data.

Examples

Here's an example that prints out a link to a Google map showing the location where the photo was taken:

<koken:geolocation>
  <a href="http://maps.google.com/?q={{ geolocation.latitude }},{{ geolocation.longitude }}">View map</a>
</koken:geolocation>

koken:has_category Content Album Essay

Conditionally detects the presence of a particular category or categories and outputs any markup displayed inside. May be used with loading any data that has categories assigned to it.

Attributes Type Description
title String Title of the category or categories (comma separated) to detect.

Examples

In this example we detect the presence of a category named "Portraits".

<koken:has_category title="Portraits">
  <!-- Portraits category assigned. Render this. -->
<koken:else>
  <!-- Not found. Render this instead. -->
</koken:has_category>

In this example we look for two categories. Only if both of the assigned categories are found would the tag's interior content display.

<koken:has_category title="Portraits,Landscapes">
  <!-- Portraits and Landscapes category assigned. Render this. -->
<koken:else>
  <!-- Not found. Render this instead. -->
</koken:has_category>

koken:has_tag Content Album Essay

Conditionally detects the presence of a particular tag or tags and outputs any markup displayed inside. May be used with loading any data that has tags assigned to it.

Attributes Type Description
title String Title of the tag or tags (comma separated) to detect.

Examples

In this example we detect the presence of a tag named "blue" to change the page background color.

<koken:has_tag title="blue">
  <style>
    body {
      background:blue;
    }
  </style>
<koken:else>
  <!-- Not found. Render this instead. -->
</koken:has_tag>

In this example we look for two tags. Only if both of the assigned tags are found would the tag's interior content display.

<koken:has_tag title="red,blue">
  <!-- Red and blue tags found. Render this. -->
<koken:else>
  <!-- Not found. Render this instead. -->
</koken:has_tag>

koken:head Global

Inserts markup into the <head> region of the parent HTML document. This is helpful in situations when a template that's including a global header needs to insert its own meta tags, javascript files, or other content.

Examples

In the following example from an album.lens template we insert Facebook Open Graph meta tags into the template's <head>.

<koken:head>
  <meta property="og:title" content="{{ site.title }}: {{ album.title }}" />
  <meta property="og:description" content="{{ album.summary }}" />
</koken:head>

In this example we override the <title> tag in <head> with a custom one for the particular template being viewed.

<koken:head>
  <title>This title will be used instead</title>
</koken:head>

koken:img Content

Displays a library image.

Koken measures the area surrounding the tag and returns an image size that is appropriate for the space. If a site visitor adjusts their browser window size or loads your site on a device with a smaller screen (phone, tablet, etc) Koken supplies new images that are no larger than necessary. This "responsive" image system provides desktop and mobile visitors with the highest image quality and smallest file sizes regardless of how they access your site.

Attributes Type Description
crop Boolean Controls whether the image is cropped to fit width and height.
data String Assigns a specific data source for the image.
fade Boolean or Number When true, image fades-in with half second duration. Assigning a number (milliseconds) fades-in the image with a custom duration.
height Number Assigns a height attribute and value to the <img> tag.
lazy Boolean When true, image loads when scrolled into view.
preset String Loads an available image size preset.
relative Boolean When true, a relative path will be used to for hte image src. Default value is true.
respond_to String Assigns which container dimension should serve as boundary for responsiveness. Acceptable values are "width" and "height". Default is "width".
size String Requests a cropped image using a custom aspect ratio.
width Number Assigns a width attribute and value to the <img> tag.

Examples

Here's a basic example. The contents.lens template displays a list of all uploaded library content (that is public). To display those images, create a loop and insert a <koken:img /> tag, like so:

<ol>
  <koken:loop>
    <li>
      <koken:img />
    </li>
  </koken:loop>
</ol>

Display cropped image using an aspect ratio

Let's say your layout has a grid of thumbnails that should all be the same width and height while retaining the ability to change size when their layout changes. You may do this by adding the size attribute. For example:

<ol>
  <koken:loop>
    <li>
      <koken:img size="3:2" />
    </li>
  </koken:loop>
</ol>

A cropped image will then be generated using the list element's width for the image's width and an image height that's 34% smaller. Koken will then use this aspect ratio whenever image updates are necessary.

Display preset image

If you'd rather not use the default responsive behavior you may make a direct request to one of the image's preset image sizes by adding a preset attribute, like so:

<koken:img preset="medium" />

Available size options include "tiny" (60px), "small" (100px), "medium" (480px), "medium_large" (800), "large" (1024px), "xlarge" (1600px) and "huge" (2048px).

To display a preset and force its display to a particular dimension, add width and/or height properties. Whichever dimension is longest will be applied and the other will be proportionally calculated.

<koken:img preset="medium" width="125" height="125" />

If the medium preset were 480px wide by 400px high, it would then output like so:

<img src="path/to/preset/" width="125" height="104" />

Display custom image

To request a custom image size assign width and height attributes by themselves. This will generate a proportionally scaled image using whichever dimension is longest:

<koken:img width="125" height="125" />

To request a custom image at the exact dimensions assigned by width and height, add a crop property set to "true":

<koken:img width="125" height="125" crop="true" />

Lazy loading images

Lazy loading is a common technique where images out of view (usually lower in a page) aren't loaded until they're scrolled to. To use, add lazy="true" to any <koken:img /> tag:

<koken:img lazy="true" />

The resulting <img> tag won't request its image unless it's visible in the browser's viewport. A temporary k-lazy-loading class is appended to the unloaded image so theme authors may style the image's loading state. k-lazy-loading is then replaced with k-lazy-loaded when the image has loaded.

Lazy loaded images fade-in using a half-second duration by default. To change the animation's duration, assign a fade attribute equal to the duration's length (in milliseconds). For example, the following creates a one second fade-in:

<koken:img lazy="true" fade="1000" />

If you'd rather not fade images in (so they appear immediately) assign false as the value of fade, like so:

<koken:img lazy="true" fade="false" />

Pass-through img attributes

To assign attributes like class, style, data-*, or anything else to the img tag Koken generates, add the attribute as you normally would to <koken:img />. Koken will pass the attribute name and value through. Example:

<koken:img class="content" />

koken:include Global

Inserts the contents of an outside document. Example:

<koken:include file="includes/header.html" />

koken:iptc Content

Publishes IPTC image metadata.

Variables Description
{{ iptc.label }} Outputs the name of the IPTC property. Used when looping over all IPTC data.
{{ iptc.value }} Outputs the value of the IPTC property. Used when looping over all IPTC data.
{{ iptc.byline }} Name of the person who created the image.
{{ iptc.byline_title }} Job title for the person assigned to byline.
{{ iptc.caption }} Caption of the image.
{{ iptc.category }} Category of the image.
{{ iptc.city }} Name of the city pictured in the image.
{{ iptc.country }} Name of the country pictured in the image.
{{ iptc.copyright }} Contains any necessary copyright notice for claiming the intellectual property for this photograph and should identify the current owner of the copyright for the photograph.
{{ iptc.contact }} Contact info for the person who created the image.
{{ iptc.credit }} Who should be credited when this image is published.
{{ iptc.headline }} A brief synopsis of the caption.
{{ iptc.keywords }} Keywords to express the subject of the image.
{{ iptc.source }} Identifies the original owner of the copyright for the intellectual content of the image. This could be an agency, a member of an agency or an individual.
{{ iptc.state }} Name of the province or state pictured in the image.
{{ iptc.title }} A shorthand reference for the digital image.
Variables Description
{{ count }} Total number of IPTC items.

Examples

To output a list of all IPTC data associated with an image you would use {{ iptc.label }} and {{ iptc.value }} inside a loop, like so:

<koken:iptc>
  <ul>
    <koken:loop>
      <li>
        {{ iptc.label }}: {{ iptc.value }}
      </li>
    </koken:loop>
  </ul>
</koken:iptc>

To output a single value, just enter its variable from the table above, like so:

<koken:iptc>
  State: {{ iptc.state }}
</koken:iptc>

koken:keyboard_scroll Global

Adds smooth keyboard scrolling to a template using the left and right arrow keys.

Attributes Type Description
element String Assigns the class name of the target HTML element to scroll to.
offset Number Amount of vertical offset (in pixels) to apply at the beginning of the scroll point. Default is 50.

Examples

Keyboard scrolling is especially helpful on index pages containing long lists of content. The following example from a basic album.lens page shows how it works:

<koken:load>
  <koken:loop>
    <div class="list-image">
      <koken:img lazy="true" fade="true" />
    </div>
  </koken:loop>
  <koken:keyboard_scroll element="div.list-image" offset="10" />
</koken:load>

Koken loops over all content in the album and wraps each image with <div class="list-image">. The koken:keyboard_scroll template tag (inserted after the loop) is then assigned the div's list-image class, plus a custom vertical offset. Once published, users may then scroll the page smoothly up and down to view content.

koken:link Global

Generates a content hyperlink. When used by itself, <koken:link> generates a link by inspecting which data is currently being rendered and dynamically fills the resulting anchor tag's href attribute with the link it needs. You may also point the link to a specific template by assigning a source attribute.

Attributes Type Description Default
bind_to_key String Binds the link to a keystroke. When the key or keys are pressed the link engages. empty
class String Assigns a class attribute and value to the generated <a>. empty
data String Assigns a specific data source for the link to link to. current item
filter:id String Used in conjunction with source to link to a specific content, album, or essay page. empty
lightbox Boolean Loads the linked content in the lightbox viewer. This should only be used when linking to a single album or image. false
share String Creates a link for sharing the canonical page URL of an image or video through social media platforms. Supported values include "twitter", "facebook", "pinterest", "tumblr" and "google-plus". empty
style String Assigns a style attribute and value to the generated <a>. empty
to String Loads a site template. Uses data source values (see below). empty
url String Custom URL to use for the link. Passed directly into the <a> tag's href attribute. empty

Examples

For example, when used in a loop inside albums.lens, the link generated with each iteration points to the album.lens template to view each album.

<ul>
  <koken:loop>
    <li>
      <h2><koken:link>{{ album.title }}</koken:link></h2>
    </li>
  </koken:loop>
</ul>

Now let's say you want to link back to albums.lens from album.lens. To do so you'd insert <koken:link> into album.lens and assign it a to attribute with "albums" as its value, like so:

<koken:link to="albums">View all albums</koken:link>

Data sources

The following table displays all available to values, a description of what they return, the .lens template a theme must include to support the link, plus any necessary filters that must be added to the link in order for it to function.

Data sources Description Template Required filter
album Single album album.lens filter:id
albums All top-level public albums and sets albums.lens None
categories All categories categories.lens None
content Single image or video content.lens filter:id
contents All public images and videos contents.lens None
essay Single essay essay.lens filter:id
essays All published essays essays.lens None
favorites All favorite images and videos favorites.lens None
front Front page - none - None
page Single page page.lens filter:id
sets All top-level sets sets.lens None
tags All tags tags.lens None
timeline All timeline events timeline.lens None

Filtering links

For templates that require filter:id to function, assign the ID of the applicable item like so. You can find IDs for all content types in the right Inspector column inside Koken.

<koken:link to="album" filter:id="10">View album</koken:link>

Keystrokes

To bind a link to a keystroke you add the bind_to_key attribute with the keystroke you want assigned as its value. This comes in especially handy with pagination links to move forward/backward or other actions. In the example below we assign the left and right arrow keys to a pair of forward/backward links in a content.lens template:

<koken:previous>
  <koken:link bind_to_key="left">Previous</koken:link>
</koken:previous>
<koken:next>
  <koken:link bind_to_key="right">Next</koken:link>
</koken:next>

To bind a keystroke to a normal HTML anchor assign a data-bind-to-key attribute followed by the key. For example:

<a href="http://koken.me" data-bind-to-key="left">Home</a>

See all supported keys for this attribute.

koken:load Global

As explained in templates, <koken:load> is used to load data.

Attributes Type Description Default
filter:param String Assigns a filter to return a subset of data. See parameters. null
infinite Boolean Allows paginated data to be dynamically appended to the current view when reaching the end of the viewport. false
infinite_toggle String ID of the (optional) element that will append the next set of paginated data when clicked. empty
limit Number Limits the returned data to a specific number of results. empty
limit_to String Used when loading archival data. Limits scope to a particular content type. empty
order_by String To return loaded data in a particular order. See "Ordering data" below for values. empty
order_direction String To control the direction in which data is displayed. Options include "asc" for ascending order, "desc" for descending order. "desc"
source String For assigning a specific data source. Options include albums, categories, category, content, contents, date, essay, essays, favorites, featured_albums, featured_content, featured_essays, page, tag, tags and timeline. empty
summary Boolean Used when loading archival data. Set to "true" for data that excludes content previews for a lighter and faster load. false
Variables Description
{{ count }} Total number of loaded items.

In its most basic use, <koken:load> loads a template's data. See below.

<html>
  <body>
    <koken:load>
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

To request specific data, add a source attribute equal to the name of the data you want. In the example below we load all published essays:

<html>
  <body>
    <koken:load source="essays" limit="3">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
<html>

You may also include multiple <koken:load> tags in a single template. Below we use the index.lens template to load its native data source (featured_content) but then also request essays data to print the ten most recent essays.

<html>
  <body>
  <!-- This koken:load tag loads featured content -->
  <koken:load>
    <!-- This koken:load tag loads essays -->
    <koken:load source="essays" limit="10">
      <koken:loop>
        {{ essay.title }}
      </koken:loop>
    </koken:load>
  </koken:load>
  </body>
</html>

To request a specific data source by ID you may add a filter:id attribute. In the example below we request an image by its ID ("352"). You may find content, album, essay and page IDs by selecting the items and looking for the "ID" row at the top of the right Inspector panel.

<html>
  <body>
    <koken:load source="content" filter:id="352">
      <koken:img />
    </koken:load>
  </body>
</html>

Scroll down to "Filtering data" below for more detailed information on filtering data.

Limiting data

<koken:load> limits data requests to 100 items or fewer. Fewer items may be returned by adding a limit attribute equal to the number of items you want. Here's an example using limit:

<html>
  <body>
    <koken:load limit="20">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

Additional data not loaded by <koken:load> may be accessed with pagination or by dynamically appending the additional data to the current page. The first option is handled with the <koken:pagination> tag, which you can see examples of below.

The second option is handled by adding an infinite attribute to <koken:load>. Additional data is then requested and appended to the current page when the user scrolls their browser window to the last item.

<html>
  <body>
    <koken:load infinite="true">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

Archival data sources that include multiple types of content — including archives, categories and tags — may be limited to return only one specific source. This is done by adding a limit_to attribute equal to the type of data you want. The table below includes acceptable values.

Limit to Description
albums Returns only public albums from the list.
content Returns only public library images/videos from the list.
essays Returns only published essays from the list.

For example, you could use limit_to to request all the categories that have been assigned to albums (but not for essays or content), as demonstrated below:

<html>
  <body>
    <koken:load source="categories" limit_to="albums" order_by="album_count">
      <koken:categories>
        <koken:loop separator=", ">
          {{ category.title }}
        </koken:loop>
      </koken:categories>
    </koken:load>
  </body>
</html>

Filtering data

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

Filter Type Data source
filter:category string albums, contents, essays, archives
filter:favorites boolean contents
filter:featured boolean albums, contents, essays
filter:flat boolean albums
filter:id string album, content, essay, page
filter:month number albums, contents, essays, archives
filter:page string albums, contents, essays, archives
filter:tags string albums, contents, essays, archives
filter:year number albums, contents, essays, archives

Filters may be inclusionary or exclusionary. The example below filters albums to include featured albums only:

<html>
  <body>
    <koken:load source="albums" filter:featured="true">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

If filtering by a parameter that's a string (not boolean like the above) you'd do it like so:

<html>
  <body>
    <koken:load source="albums" filter:category="category_name">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

To make the string exclusionary instead of inclusionary, add :not, as demonstrated below:

<html>
  <body>
    <koken:load source="albums" filter:category:not="category_name">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

Filters may also be combined. Simply add another filter attribute, like so:

<html>
  <body>
    <koken:load source="essays" filter:year="2010" filter:month:not="12">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

As explained earlier, you may also use filter to grab a specific album, essay or content item using its ID. The example below loads an album assigned the ID of "1", loops over each image it contains and publishes it using the <koken:img /> tag:

<html>
  <body>
    <koken:load source="album" filter:id="1">
      <koken:loop>
        <koken:img />
      </koken:loop>
    </koken:load>
  </body>
</html>

When loading a data source that supports more than one value (e.g., tags) each value should be comma separated. The example below loads all uploaded content and filters the results to display only those tagged "desert" and/or "sand":

<html>
  <body>
    <koken:load source="contents" filter:tags="desert,sand">
      <koken:loop>
        <koken:img />
      </koken:loop>
    </koken:load>
  </body>
</html>

You would use the page filter to display paginated content. For example, if you wanted to load featured content, limit the number to 50 items, and then paginate the data if more than 50 are loaded, you would need to apply a page filter set to the current page number. We retrieve that through the {{ location.parameters.page }} variable, as demonstrated below:

<html>
  <body>
    <koken:load source="featured_content" filter:page="{{ location.parameters.page }}">
      <koken:loop>
        <koken:img />
      </koken:loop>
    </koken:load>
  </body>
</html>

Ordering data

When a list of data is loaded (archives, contents, essays, albums, categories, tags) you may apply a custom order by adding order_by and order_direction attributes. If no order_by attribute is assigned content is returned in their manual order. The table below includes the options available to each data type.

Order by Description Data source
album_count Number of albums in the archive. categories, tags, archives
captured_on Date a photo was captured (EXIF). If video, data is same as uploaded_on. contents
content_count Number of content items in the archive. categories, tags, archives
created_on Date the item was created. contents, essays, albums
essay_count Number of essays in the archive. categories, tags, archives
modified_on Date the item was last modified. contents, essays, albums
published_on Date the item was published publicly. contents, essays, albums
title Title of the item. albums
total_count Total number of assets the item contains. albums
uploaded_on Date the item was uploaded to Koken. contents
video_count Total number of videos the item contains. albums

The example below returns all loaded albums by the date they were last modified.

<html>
  <body>
    <koken:load source="albums" order_by="modified_on" order_direction="desc">
      <!-- Insert template tags/properties -->
    </koken:load>
  </body>
</html>

koken:loop Global

Loops over a data until reaching the end.

Variables Description
{{ index }} Current loop iteration number.
Attributes Type Description
data String Assigns a specific data source object to loop over.
limit Number Prevents looping beyond a fixed number.
separator String Inserts a string of text after each loop iteration.

Examples

Here's an example that outputs the title of all items in the contents.lens template:

<koken:load>
  <ul>
  <koken:loop>
    <li>
      <h2>{{ title }}</h2>
    </li>
  </koken:loop>
  </ul>
</koken:load>

If you need to know the number of the current loop, insert a {{ index }} variable, like so:

<koken:load>
  <ul>
  <koken:loop>
    {{ index }}
  </koken:loop>
  </ul>
</koken:load>

koken:max_download Content

Displays maximum image download data.

Variables Description
{{ max_download.title }} Returns the full title of the maximum download setting. Eg, "Large (1024)"
{{ max_download.label }} Returns just the maximum download setting's label. Eg, "Large".
{{ max_download.link }} Returns the absolute url of the image to be downloaded.
{{ max_download.width }} Returns just the width of the downloadable image. Eg, "1024".
{{ max_download.height }} Returns just the height of the downloadable image. Eg, "780".

Examples

Here's a usage example from content.lens.

<koken:max_download>
  <p>
    <strong>Download image:</strong>
    <koken:link>{{ max_download.title }}</koken:link>
  </p>
</koken:max_download>

When published the title of whichever option is selected as the content's maximum download setting is wrapped with a hyperlink to download the image. If maximum download is set to "None" nothing is published. If you'd like to display a fallback message instead, you can add a <koken:else> tag, like so:

<koken:max_download>
  <p>
    <strong>Download image: </strong>
    <koken:link>{{ max_download.title }}</koken:link>
  </p>
  <koken:else>
  User has disabled downloads for this image.
</koken:max_download>

To output a link to the selected download option plus all smaller image sizes, add <koken:loop> inside, like so:

<koken:max_download>
  <p>
    <strong>Download image:</strong>
    <koken:loop>
      <koken:link>{{ max_download.title }}</koken:link>
    </koken:loop>
  </p>
</koken:max_download>

koken:meta Global

Publishes dynamic author, description and keywords <meta> tags in the template <head>. Description tag uses the global site description edited in Settings > Site Publishing by default. On content pages (essay.lens, content.lens, album.lens, etc) the description uses the content's description, caption, or summary. Keywords tag uses the global keywords edited in Settings > Site Publishing, then appends tags on content pages.

Example

In the following we use both <koken:meta /> and <koken:title /> to publish dynamic <title> and <meta> tags.

<head>
  <koken:title />
  <koken:meta />
</head>

koken:more Essay

Publishes a "read more" link if an essay contains one. This allows publishers to post shorter previews of essays to essay index and archive pages.

Variables Description
{{ essay.read_more_label }} The read more link's label. Returns "Read more" by default.

Example

The following example is from an essays.lens template. A list of all published essays is created. If an essay contains a read more link the content returned by {{ essay.content }} stops at the point where the publisher has inserted the link in the editor.

<h1>{{ essay.title }}</h1>

{{ essay.content }}

<koken:more>
  <koken:link title="{{ essay.title }}">
    {{ essay.read_more_label }}
  </koken:link>
</koken:more>

koken:navigation Global

Inserts an unordered list of links from the primary navigation group.

Attributes Type Description
group String Displays links from a navigation group defined by the theme.
list Boolean Controls whether navigation links are published as an unordered list. Default value is true..
nested Boolean When set to true, a linked set will display its child items as a nested navigation list inside itself (instead of linking to set.lens). Koken automatically includes the necessary Javascript so that nested lists are hidden by default, then open/close when their parent set is clicked. Default value is false.
fallbacktext String Displays a string of text when a navigation group doesn't contain any links. Text only appears in a theme's draft view inside the console.

CSS classes

Classes are added to hyperlinks so they may be targeted and styled by theme developers. They include:

  • .k-nav-current - Assigned to the navigation link of the currently loaded page.
  • .k-nav-set - Assigned to links for sets that include a nested navigation.
  • .k-nav-open - Assigned to any set's link that is toggled open.
  • .k-nav-list - Each unordered list element receives this class.
  • .k-nav-root - Applied to the top level unordered list only.

Examples

The following example inserts the primary navigation into a template:

<koken:navigation />

The following example uses the group property to display a custom navigation group.

<koken:navigation group="name" />

In this example we use nested to output nested links in the unordered list.

<koken:navigation nested="true" />

When published the unordered list looks similar to this:

<ul class="koken-nav-list koken-nav-root">
  <li>
    <a href="#" class="koken-nav-set">Set name</a>
    <ul class="koken-nav-list">
      <li>
        <a href="#">Album name</a>
        <a href="#">Album name</a>
      </li>
    </ul>
  </li>
</ul>

koken:neighbors Content Album Essay

Extends <koken:next> and <koken:previous> by smartly allocating sibling count to each template tag depending on the position of the current item in view.

Attributes Type Description
count Number The number of siblings to allocate.

Examples

For example, let's say you want a thumbnail-based navigation in content.lens that should display three images: previous content on the left, current content in the middle, next content on the right. By wrapping the <koken:next> and <koken:previous> tags with <koken:neighbors>, if the current item is first then two siblings are allocated to <koken:next> (and <koken:previous> would not be published). If the current item is last, <koken:previous> would receive two siblings (and <koken:next> would not be published).

Here's example code:

<ol>
  <koken:neighbors count="2">
    <koken:previous>
      <koken:loop>
        <li>
          <koken:link>
            <koken:img preset="tiny" crop="true" width="60" height="60" />
          </koken:link>
        </li>
      </koken:loop>
    </koken:previous>
    <li>
      <!-- The current image -->
      <koken:img preset="tiny" crop="true" width="60" height="60" />
    </li>
    <koken:next>
      <koken:loop>
        <li>
          <koken:link>
            <koken:img preset="tiny" crop="true" width="60" height="60" />
          </koken:link>
        </li>
      </koken:loop>
    </koken:next>
  </koken:neighbors>
</ol>

koken:next Content Album Essay

For loading and publishing sibling data related to the currently loaded content. <koken:next> requests data on siblings ahead of an item while its counterpart <koken:previous> requests data on the siblings before. The data returned is the full object for the data type, including essay, album and content.

Attributes Type Description
count Number The number of siblings to be returned in the requested data. Defaults to 1.

Examples

Let's start with a basic example. In essay.lens, if you wanted to display a link to the next essay using its title, you'd do so like this:

<koken:next>
  <koken:link>
    {{ essay.title }}
  </koken:link>
</koken:next>

Now let's say you want to display links to the five siblings ahead of the current essay. You'd add a count attribute and assign "5" as its value, then insert a loop to publish a link to each sibling, like so:

<koken:next count="5">
  <koken:loop>
    <koken:link>
      {{ essay.title }}
    </koken:link>
  </koken:loop>
</koken:next>

To display alternate content when a sibling doesn't exist, insert a <koken:else> tag inside, followed by your fallback content. For example:

<koken:previous>
  <koken:link>
    {{ essay.title }}
  </koken:link>
  <koken:else>
    Nothing
</koken:previous>

Also see <koken:neighbors> for related functionality.

koken:note Global

For displaying helps tip or other information to a publisher. Contents of the note are only rendered when a theme is previewed and are not published to a live site.

Example
<koken:note>
  Hello world
</koken:note>

When rendered, Koken wraps the note with a span assigned the class k-note so you can style it. For example:

<span class="k-note">
  Hello world
</span>

koken:pagination Content Album Essay Event

For displaying additional data not loaded by <koken:load>.

Attributes Type Description
limit Number For limiting the number of page links to a particular number.
Variables Description
{{ is_current }} Returns true if a loop's increment matches the page in view.
{{ page }} The current page number.
{{ pages }} The total number of pages.
{{ link }} The URL of the current page.
{{ previous_page.number }} The number of the page prior to the current one.
{{ previous_page.link }} The URL of the previous page.
{{ next_page.number }} The number of the page ahead of the current one.
{{ next_page.link }} The URL of the next page.
{{ number }} The number of the current page being looped over.

CSS classes

  • .k-pagination-current - Assigned to the number associated with the current page.

Examples

The following example could be used in albums.lens, album.lens, contents.lens, essays.lens or any data load by <koken:load> that exceeds its limit value or the initial 100 items it returns:

<koken:pagination>
  <ol>
    <koken:pagination_previous>
    <li class="prev">
      <koken:link title="View page {{ previous_page.number }}">
      Previous
      </koken:link>
    </li>
    </koken:pagination_previous>
    <li>
      <ol class="num">
        <koken:loop>
          <li>
            <koken:link class="{{ is_current }}" title="View page {{ number }}">
              {{ number }}
            </koken:link>
          </li>
        </koken:loop>
      </ol>
    </li>
    <koken:pagination_next>
    <li class="next">
      <koken:link title="View page {{ next_page.number }}">
      Next
      </koken:link>
    </li>
    </koken:pagination_next>
  </ol>
</koken:pagination>

You may also limit the number of page links by adding a limit attribute, plus the <koken:pagination_limited_previous> and <koken:pagination_limited_next> tags. Here's the same example from above modified to support limited page links.

<koken:pagination limit="10">
  <ol>
    <koken:pagination_previous>
    <li class="prev">
      <koken:link title="View page {{ previous_page.number }}">
      Previous
      </koken:link>
    </li>
    </koken:pagination_previous>
    <koken:pagination_limited_previous>
    <li>
      <koken:link>
      ...
      </koken:link>
    </li>
    </koken:pagination_limited_previous>
    <li>
      <ol class="num">
        <koken:loop>
          <li>
            <koken:link class="{{ is_current }}" title="View page {{ number }}">
              {{ number }}
            </koken:link>
          </li>
        </koken:loop>
      </ol>
    </li>
    <koken:pagination_limited_next>
    <li>
      <koken:link>
      ...
      </koken:link>
    </li>
    </koken:pagination_limited_next>
    <koken:pagination_next>
    <li class="next">
      <koken:link title="View page {{ next_page.number }}">
      Next
      </koken:link>
    </li>
    </koken:pagination_next>
  </ol>
</koken:pagination>

koken:pagination_limited_next Content Album Essay Event

Used in conjunction with <koken:pagination> to publish a link that loads the next group of paginated results when the number of links has been limited. See the <koken:pagination> documentation for example usage.

koken:pagination_limited_previous Content Album Essay Event

Used in conjunction with <koken:pagination> to publish a link that loads the previous group of paginated results when the number of links has been limited. See the <koken:pagination> documentation for example usage.

koken:pagination_next Content Album Essay Event

Used in conjunction with <koken:pagination> to publish a link that loads the next set of paginated data. See the <koken:pagination> documentation for example usage.

koken:pagination_previous Content Album Essay Event

Used in conjunction with <koken:pagination> to publish a link that loads the previous set of paginated data. See the <koken:pagination> documentation for example usage.

koken:parent Content Album Essay

Loads parent index data into a child page. The data is loaded depends on the context in which the tag is used. If used in content.lens the tag loads the item's parent album and its content. If used in album.lens, and the album is a child of a set, the tag loads the parent album plus and sibling albums.

Attributes Type Description
order_by Number To return loaded data in a particular order. See "Ordering data" for acceptable values.
order_direction Number To control the direction in which data is displayed. Options include "asc" for ascending order, "desc" for descending order. Default value is "desc".

Examples

The following code from content.lens displays images and links to sibling content in the item's parent album:

<koken:parent>
  <ul>
    <koken:loop>
    <li>
      <koken:link>
        <koken:img width="100" height="100" />
      </koken:link>
    </li>
    </koken:loop>
  </ul>
</koken:parent>

Here's another example from album.lens that publishes images and links to sibling albums in an album's parent set (only albums that are in sets would show this):

<koken:parent>
  <h6>Other albums in {{ album.title }}</h6>
  <koken:loop>
    <koken:link>
      <koken:covers>
        <koken:img width="100" height="100" />
      </koken:covers>
      {{ album.title }}
    </koken:link>
  </koken:loop>
</koken:parent>

Note: Whichever item in the data returned by <koken:parent> matches the page currently in view will receive a .k-current class assigned to the anchor tag generated by <koken:link>.

koken:permalink Content Album Essay

Outputs the permalink url for content as a string. This is handy when needing to use a content url for something other than a hyperlink, in which case you'd use <koken:link>.

koken:pulse Content Album

Koken's default slideshow player. Complete documentation for Pulse's properties and events and usage examples may be read here.

koken:previous Content Album Essay

For loading and publishing sibling data related to the currently loaded content. <koken:previous> requests data on siblings before an item while its counterpart <koken:next> requests data on the siblings ahead. The data returned is the full object for the data type, including essay, album and content.

Attributes Type Description
count Number The number of siblings to be returned in the requested data.

Examples

Let's start with a basic example. In essay.lens, if you wanted to display a link to the previous essay using its title, you'd do so like this:

<koken:previous>
  <koken:link>
    {{ essay.title }}
  </koken:link>
</koken:previous>

Now let's say you want to display links to the five siblings before the current essay. You'd add a count attribute and assign "5" as its value, then insert a loop to publish a link to each sibling, like so:

<koken:previous count="5">
  <koken:loop>
    <koken:link>
      {{ essay.title }}
    </koken:link>
  </koken:loop>
</koken:previous>

To display alternate content when a sibling doesn't exist, insert a <koken:else> tag inside, followed by your fallback content. For example:

<koken:previous>
  <koken:link>
    {{ essay.title }}
  </koken:link>
  <koken:else>
    Nothing
</koken:previous>

Also see <koken:neighbors> for related functionality.

koken:profile_facebook Global

Rendered if the publisher's profile contains a Facebook profile link.

Example

Here we first use the tag to check for data, then print the the variable in a link.

<koken:profile_facebook>
  <a href="{{ profile.facebook }}">
    Facebook
  </a>
</koken:profile_facebook>

koken:profile_twitter Global

Rendered if the publisher's profile contains a Twitter username.

Example

Here we first use the tag to check for data, then print the variable in a link.

<koken:profile_twitter>
  <a href="http://twitter.com/{{ profile.twitter }}">
    {{ profile.twitter }}
  </a>
</koken:profile_twitter>

koken:public Global

Renders content inside the tag if the tag's parent page is accessed through a public URL. If page is accessed through an unlisted URL (for example, an image, video, album or set with unlisted visibility) the tag's content is not rendered. Also see <koken:unlisted> for related functionality.

Examples

In the following example we use the tag to conditionally display social media share links in the single image/video template (content.lens). The links are only displayed if the image/video has public visibility.

<koken:public>
  <koken:link share="twitter">Share on Twitter</koken:link>
  <koken:link share="facebook">Share on Facebook</koken:link>
</koken:public>

koken:rating Content

For publishing ratings in a template (using our official plugin).

Variables Description
{{ rating }} Renders the rating markup.

Examples

The code below would render a header and rating markup if the publisher has a plugin enabled (e.g, our Rating plugin) that targets the template tag.

<koken:rating>
  <h3>Likes</h3>
  {{ rating }}
</koken:rating>

koken:search Global

Generates an HTML5 search element that uses Koken tags to autocomplete. The tag is designed to be used with the tag.lens template.

koken:select Content Album Essay Event

Attributes Type Description
label String Assigns the label of the default option that appears when displayed.

Generates an HTML <select> element. The tag is designed to be used with archival links (dates, tags, categories) to display drop-downs for browsing content. The generated <select> element is assigned the "k-select" class so it can be targeted.

Examples

Here's example where <koken:select> is used to output a list of monthly archival links for essays.

<koken:dates limit_to="essays">
  <koken:select label="Select month" />
</koken:dates>

Here's an example that displays a list of global tags. Selected options automatically link to the tag.lens template.

<koken:tags>
  <koken:select label="Select tag" />
</koken:tags>

koken:settings Global

Loads a theme's settings.css.lens document. This tag is explained in greater detail in the Theme Settings overview.

koken:tags Content Album Essay

Loads and displays tags.

Attributes Type Description Default
order_direction String Direction of order. Tags are always returned in alphabetical order. Options include asc for ascending order and desc for descending order. asc
Variables Description
{{ tag.title }} The title of the tag.
{{ count }} Total number of tags.

Examples

This example from a typical content.lens template prints a list of space separated tags, each linking to their respective archive pages:

<koken:tags>
  <koken:loop separator=" ">
    <koken:link>
      {{ tag.title }}
    </koken:link>
  </koken:loop>
</koken:tags>

koken:time Content Album Essay Event

Generates an HTML5 <time> element containing ISO standards for date and time. Formatting is controlled in the administrative console's Settings > Publishing area. Using this tag to output timestamps is recommend so publishers may choose their preferred format.

Attributes Type Description
data String For assigning a specific (date related) data source. See <koken:load> for acceptable values.
relative Boolean Outputs time in relative terms ("two hours ago"). Default value is false.
show String Filters the printed timestamp to show the date (default), time ("time") or both date and time ("both").

Examples

This example from an essay.lens page prints the date the essay was published.

<koken:time />

When rendered the HTML output looks like so:

<time datetime="2011-12-27T18:00:00-06:00">
  December 27, 2011
</time>

koken:title Global

Generates an HTML <title> tag wrapping title data for a template.

Attributes Type Description
separator String Character inserted between title strings (if necessary).

Examples

<koken:title separator=":" />

koken:topics Album Essay

Loads a list of the topics assigned to an essay or page. Topics are for creating symbolic relationships between essays, pages and albums. Using topics you may publish links to albums from an essay/page and vice versa.

Attributes Type Description
order_by String Order in which topics are returned. Values include title, published_on, modified_on and created_on. published_on when used with album data, title when used with essay data.
order_direction String Direction of order. Options include asc for ascending and desc for descending. desc when used with album data, asc when used with essay data.
Variables Description
{{ count }} Total number of topics.

Examples

This example from an essay.lens page outputs the topic by publishing the album's primary cover image and title, both of which are linked to the album page to view more images:

<koken:topics>
  <h6>Topics:</h6>
  <koken:loop>
    <p>
      <koken:link>
        <koken:img preset="small" />
      </koken:link>
      <br>
      <koken:link>
        {{ album.title }}
      </koken:link>
    </p>
  </koken:loop>
</koken:topics>

koken:unlisted Global

Renders content inside the tag if the tag's parent page is accessed through an unlisted URL. If page is accessed through an public URL (for example, an image, video, album or set with public visibility) the tag's content is not rendered. Also see <koken:public> for related functionality.

Examples

In the following example we use the tag to conditionally display a message to our friends and clients. The message is only displayed if the page is viewed through an unlisted URL.

<koken:unlisted>
  This page is unlisted. Please don't share.
</koken:unlisted>

koken:variable Global

Creates a template variable and value. Once defined the variable may be used as an attribute value in other template tags.

Attributes Type Description
name String The name of the variable.
value String The value of the variable.

Examples

In this example we use <koken:variable /> to assign a value that is dependent on a content's context (whether the content is being viewed as part of an album or by itself). We then use the variables to write link labels for pagiation purposes.

<koken:if empty="content.context.album">
  <koken:variable name="previous_label" value="Older" />
  <koken:variable name="next_label" value="Newer" />
<koken:else>
  <koken:variable name="previous_label" value="Previous" />
  <koken:variable name="next_label" value="Next" />
</koken:if>

<koken:link data="content.context.previous.last" title="{{ previous_label }}">
  {{ previous_label }}
</koken:link>

<koken:link data="content.context.next.first" title="{{ next_label }}">
  {{ next_label }}
</koken:link>

koken:video Content

Inserts an HTML5 <video> element to display a video.

Attributes Type Description
autoplay Boolean Controls whether the video begins playback automatically when loaded. Default is false.
width Number Sets the display width of the <video> element. Height is calculated automatically. Defaults to 100%.

Examples

In this example (from a typical content.lens template) we first check to make sure the content is a video (using <koken:content_video>) then insert inside the <koken:video /> tag to embed a video.

<koken:content_video>
  <koken:video />
</koken:content_video>

Logic tags

Template tags that provide programatic functionality.

koken:if Global

Basic conditional that tests something.

Attributes Type Description
condition String For testing one variable against another using operators. Supported operators include > (greater than), < (less than), == (equal), != (not equal), >= (greater than or equal to), <= (less than or equal to).
data, equals Strings Checks the value of data against the value of equals.
empty Boolean Checks data for length. If data contains no value, it is considered to be true.
true Boolean Tests a settings variable (of boolean type) for being true.
exists Boolean Tests to see if a variable exists in the assigned data.

Examples

Here's a basic example:

<koken:if>
  <!-- True, do this -->
<koken:else>
  <!-- False, do this -->
</koken:if>

This example uses empty to test whether an image is being viewed in the context of a parent album or by itself:

<koken:if empty="content.context.album">
  <!-- Not part of an album. Display this. -->
</koken:if>

This example uses data and equals to check if a theme setting is equal to a particular value:

<koken:if data="settings.show_caption" equals="Summary">
  <!-- True, display this -->
</koken:if>

This example uses true to test a boolean theme setting for being true/false:

<koken:if true="settings.show_date">
  <!-- True, show this -->
<koken:else>
  <!-- False, show this -->
</koken:if>

This example uses an "or" conditional to check two boolean theme settings for being true/false:

<koken:if true="settings.show_date || settings.show_title">
  <!-- True, show this -->
<koken:else>
  <!-- False, show this -->
</koken:if>

Here's the same example from above using an "and" conditional:

<koken:if true="settings.show_date && settings.show_title">
  <!-- True, show this -->
<koken:else>
  <!-- False, show this -->
</koken:if>

...and finally, one that uses "or" and "and":

<koken:if true="settings.bool_three || (settings.bool_one && settings.bool_two)">
  <!-- True, show this -->
<koken:else>
  <!-- False, show this -->
</koken:if>

koken:first Global

Returns the first item in loaded data. This is similar to <koken:shift> except it returns the first item without removing it from the data array.

Here's an example where <koken:first> is used to display the first cover of an album in the albums.lens template:

<koken:covers>
  <koken:first>
    <koken:link>
      <koken:img />
    </koken:link>
  </koken:first>
</koken:covers>

koken:not Global

Used to test if something is not true. This is effectively the inverse of <koken:if> and supports the same attributes.

Examples

In the following example a variable is tested for being empty using the empty attribute. If not (true) the caption is displayed.

<koken:not empty="content.caption">
  {{ content.caption }}
</koken:not>

koken:pop Global

Returns the last item in data returned by <koken:load>.

Examples

In the following example we use <koken:pop> in an albums.lens template to display the last album loaded in the list.

<koken:load>
  <koken:pop>
    <div class="album-featured">
      <koken:img data="album.covers.first" />
    </div>
  </koken:pop>
</koken:load>

koken:shift Global

Returns the first item in data returned by <koken:load>.

Examples

<koken:load>
  <koken:shift>
    <!-- first item displayed here -->
  </koken:shift>
</koken:load>
support@koken.me
http://assets0.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