Koken was designed for creatives to publish their work and words under the same roof. The platform publishes images and videos, images and videos grouped into albums, albums grouped into sets, and essays and pages to capture the written word. Each content type has its own particular section of a published site.

But what about browsing everything together? A page on your site where visitors can see everything you've published recently, together, without any extra work on your part?

That's the idea behind Timeline, a new template type in Koken 0.10 that displays your latest albums, album updates, essays, and uploaded images/videos on a single page. Everything you publish is folded together and intelligently grouped by day.

Timeline events

There are four actions that publish events on the timeline:

  • A new image/video is uploaded.
  • A new public album is created.
  • An older public album is updated with new images/videos.
  • A new essay is published.

Here's a example screenshot of the timeline displaying each event published across a series of days.

Multiple events in a single day

When more than one event transpires in a single day Koken checks the events to see if any are related. If they are, Koken excludes redundant events for a cleaner timeline. Here are the scenarios where this would occur within a single day:

Event 1: A new image or video is uploaded.
Event 2: A new public album is created incorporating image or video from Event 1.
Published: Event 2

Event 1: A new image or video is uploaded.
Event 2: A new essay is published that incorporates the image or video from Event 1 as its featured image.
Published: Event 2

Event 1: A new public album of content is created.
Event 2: A new essay is published with the album from Event 1 assigned as its topic.
Published: Event 2

Featured albums, content and essays

If an album, image/video or essay is marked as featured, that content "sticks" to the top of the timeline day. That way a site visitor sees at the beginning of each day the content you feel is most important. Theme designers can detect whether content is featured inside timeline events and make style changes if they'd like to. Here's a simple example from Elementary's timeline template that assigns a star to featured events.


The timeline development offered the perfect opportunity for us to begin testing a new Lens template component — Mosaic. Mosaic is a responsive grid that displays cropped images across a series of configurable rows and columns. The gutter is also configurable, allowing you to insert however much negative space you need (or none at all) between each image. Mosaic sizes itself automatically and adapts to mobile screen sizes just like you'd expect it to.

If there aren't enough images to fill the number of assigned columns and rows, Mosaic increases the width of the remaining cells so images always appear flush. All of the themes that incorporate the timeline view (see below) use Mosaic to present new albums and album updates. Our plan is to eventually wrap it up as a single Lens template tag, similar to our Pulse slideshow component.

Theme support

The default themes that currently use the timeline include Elementary, Observatory, Madison and Repertoire. Elementary has the most extensive timeline implementation with the timeline plus archive pages for browsing all content by date, tag and category. Going forward we plan on using the Timeline view more prominently in new themes while also expanding its publishing capabilities.

Updating your site

If you are using one of the aforementioned themes for your site, click on "Add Links" in the left column of Site. Scroll down until you see the "Timeline" template, then click "Add". Everything you've published since you first started using Koken will appear.

Timeline also has its own RSS feed, so you can use it with syndication services or however you want. Add "Timeline RSS" through "Add links" to get the URL.

Theme designers

If you're a designer and would like to incorporate timeline templates into your theme, check out our updated theme design tutorial. It includes a new page that shows how to incorporate timeline.lens plus the optional date.lens, tag.lens and category.lens templates should you decide you want an archive.

Mosaic photos by Luis Hernandez. Portrait images by Mike Monaghan. Creative Commons.

Categories: Tips, Updates, v10