Support Center

About Koken

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

Build your first theme - Part two

Build your first theme - Part two

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

In our first theme design tutorial we demonstrated how to build a basic portfolio site using the main Lens templates. We'll now go a step further by adding archive templates to view content by tag, category and date. We're also show how to modify the templates created in the first theme design tutorial to provide links to these new templates. Download all of the templates from this article by scrolling to the bottom and clicking the download button.

Here are the new templates we'll be adding to the theme. Create new HTML documents for each of the following and save them to the root of your theme folder.

Template Description
archive.albums.lens Displays public albums filtered by tag, category or date.
archive.contents.lens Displays uploaded images and videos filtered by tag, category or date.
archive.essays.lens Displays published essays filtered by tag, category or date.

archive.albums.lens

Let's start with archive.albums.lens. Chances are, most designers will want to re-use their Albums (albums.lens) layout, so we're going to do the same by copying the albums.lens markup then adding a breadcrumb tag and header so site visitors know where they are. Here's the markup.

<!DOCTYPE html>
<head>
  <koken:meta />
  <koken:title />
  <koken:settings />
</head>
<body>
<header>
  <h1>{{ site.title }}</h1> 
  <nav>
    <koken:navigation />
  </nav>
</header>
<koken:load>
  <koken:breadcrumbs />
  <h1>
    <koken:if data="archive.type" equals="date">
      All albums from {{ archive.title }}
    </koken:if>
    <koken:if data="archive.type" equals="tag">
      All albums assigned the {{ archive.type.singular }} #{{ archive.title }}
    </koken:if> 
    <koken:if data="archive.type" equals="category">
      All albums assigned in the {{ archive.type.singular }} {{ archive.title }}
    </koken:if>
  </h1>
    <ol class="grid">
    <koken:loop>
      <li>
        <h2>
          <koken:link>
            {{ album.title }}
          </koken:link>
        </h2> 
        <koken:link>
          <koken:img size="3:2" />
        </koken:link>
      </li>
    </koken:loop>
  </ol>
<koken:else>
  <koken:note>
    No public albums found 
  </koken:note>
</koken:load>
<footer>
  {{ site.copyright }} 
</footer>
</body>
</html>

We now have a template in place to view all albums that share the same tag, category or publication date. But how do you get to it? Answer: tag, category and date links in our main templates. Let's do this by modifying the album.lens template from the first theme design tutorial to include archive links.

modified album.lens template

<!DOCTYPE html>
<head>
  <koken:meta />
  <koken:title />
  <koken:settings />
</head>
<body>
<header>
  <h1>{{ site.title }}</h1> 
  <nav>
    <koken:navigation />
  </nav>
</header>
<koken:load>
  <h2>{{ album.title }}</h2>
  {{ album.description paragraphs="true" }} 
  <koken:tags>
    <p>
      <strong>{{ labels.tag.plural }}:</strong> 
      <koken:loop separator=" ">
        <koken:link>
          #{{ tag.title }} 
        </koken:link>
      </koken:loop>
    </p>
  </koken:tags>
  <koken:categories>
    <p>
      <strong>{{ labels.category.plural }}:</strong> 
      <koken:loop separator=", ">
        <koken:link>
          {{ category.title }} 
        </koken:link>
      </koken:loop>
    </p>
  </koken:categories>
  <p>
    <koken:link to="archive">
      <koken:time />
    </koken:link>
  </p>
  <ol class="grid">
    <koken:loop>
      <li>
        <koken:link>
          <koken:img />
        </koken:link>
      </li>
    </koken:loop>
  </ol>
<koken:else>
  <koken:note>
    No album data found 
  </koken:note>
</koken:load>
<footer>
  {{ site.copyright }} 
</footer>
</body>
</html>

In the modified code above we added Lens template tags to display the tags and categories assigned to the album. The <koken:link> surrounding each tag and category title automatically creates a link to the archive.albums.lens template to view all albums that share the same criteria. We also added a timestamp with <koken:time /> to output the date the album was published. This is wrapped with <koken:link> too, but appended with to="archive" so Koken knows to send it to archive.albums.lens to view all albums published in the same month.

archive.contents.lens

You can probably guess what we're going to do now. That's right — add an archive.contents.lens page that (like albums above) borrows the contents.lens design, then modify the content.lens template to include tag and category links so site visitors can reach the archive page. Here's the markup for archive.contents.lens:

<!DOCTYPE html>
<head>
  <koken:meta />
  <koken:title />
  <koken:settings />
</head>
<body>
<header>
  <h1>{{ site.title }}</h1> 
  <nav>
    <koken:navigation />
  </nav>
</header>
<koken:load>
  <koken:breadcrumbs />
  <h1>
    <koken:if data="archive.type" equals="date">
      All content from {{ archive.title }}
    </koken:if>
    <koken:if data="archive.type" equals="tag">
      All content assigned the {{ archive.type.singular }} #{{ archive.title }}
    </koken:if> 
    <koken:if data="archive.type" equals="category">
      All content assigned in the {{ archive.type.singular }} {{ archive.title }}
    </koken:if>
  </h1>
    <ol class="grid">
    <koken:loop>
      <li>
        <koken:link>
          <koken:img />
        </koken:link>
        <koken:link>
          {{ content.title | content.filename }} 
        </koken:link>
        {{ content.caption paragraphs="true" }}
      </li>
    </koken:loop>
  </ol>
<koken:else>
  <koken:note>
    No images or videos found 
  </koken:note>
</koken:load>
<footer>
  {{ site.copyright }} 
</footer>
</body>
</html>

Now let's modify the content.lens template to include tag and category links.

modified content.lens template

<!DOCTYPE html>
<head>
  <koken:meta />
  <koken:title />
  <koken:settings />
</head>
<body>
<header>
  <h1>{{ site.title }}</h1> 
  <nav>
    <koken:navigation />
  </nav>
</header>
<koken:load>
  <p>
    <koken:link to="archive">
      <koken:time />
    </koken:link>
  </p>
  <h2> {{ content.title | content.filename }} </h2> 
  <koken:content_image>
    <koken:img />
  </koken:content_image>
  <koken:content_video>
    <koken:video />
  </koken:content_video>
  {{ content.caption paragraphs="true" }} 
  <koken:tags>
    <koken:loop separator=" ">
      <koken:link>
        #{{ tag.title }} 
      </koken:link>
    </koken:loop>
  </koken:tags>
  <koken:categories>
    <strong>Categories:</strong> 
    <koken:loop separator=", ">
      <koken:link>
        {{ category.title }} 
      </koken:link>
    </koken:loop>
  </koken:categories>
<koken:else>
  <koken:note>
    No image or video found 
  </koken:note>
</koken:load>
<footer>
  {{ site.copyright }} 
</footer>
</body>
</html>

With both of these templates in place you should be able to see tag and category links on the individual image/video pages (assuming they have assigned tags/categories in the Library). Click the tag/category links to view all similar images/videos in the archive.contents.lens template. We also wrapped the <koken:time /> timestamp with <koken:link to="archive" /> to view all content published in the same month.

archive.essays.lens

Alright, so third time's the charm! Let's repeat the process again with archive.essays.lens.

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
    <koken:settings />
  </head>
  <body>
    <header>
      <h1>{{ site.title }}</h1>
      <nav>
       <koken:navigation />
      </nav>
    </header>
    <koken:load>
      <koken:breadcrumbs />
      <koken:loop>
        <h2>
          <koken:link>
            {{ essay.title }}
          </koken:link>
        </h2>
        {{ essay.content }}
      </koken:loop>
    <koken:else>
      <koken:note>
        No published essays found
      </koken:note>
    </koken:load>
    <footer>
        {{ site.copyright }}
      </footer>
  </body>
</html>

And now here's the edited essay.lens template to include tag and category links.

modified essay.lens

<!DOCTYPE html>
  <head>
    <koken:meta />
    <koken:title />
    <koken:settings />
  </head>
  <body>
    <header>
        <h1>{{ site.title }}</h1>
        <nav>
         <koken:navigation />
        </nav>
      </header>
    <koken:load>
      <article>
        <h2>
          <koken:link>
            {{ essay.title }}
          </koken:link>
        </h2>
        <p>
          <koken:link to="archive">
            <koken:time />
          </koken:link>
        </p>
        {{ essay.content paragraphs="true" }}
        <koken:tags>
          <strong>{{ labels.tag.plural }}:</strong>
          <koken:loop separator=" ">
            <koken:link>
              #{{ tag.title }}
            </koken:link>
          </koken:loop>
        </koken:tags>
        <koken:categories>
          <strong>{{ labels.category.plural }}:</strong>
          <koken:loop separator=", ">
            <koken:link>
              {{ category.title }}
            </koken:link>
          </koken:loop>
        </koken:categories>
      </article>
    <koken:else>
      <koken:note>
        No published essay found
      </koken:note>
    </koken:load>
    <footer>
        {{ site.copyright }}
      </footer>
  </body>
</html>

Click on the tags and/or categories assigned to an essay and you'll see the archive.essays.lens template displaying all essays by that criteria. We also wrapped the existing <koken:time /> timestamp with <koken:link to="archive" /> to view all essays published in the same month.

Source files

Click the button below to download all the templates covered in this article. We also recommend checking out our Blueprint theme, which is a bare bones, skeleton theme that also demonstrates many of the topics covered here.

Download example templates

Where to from here

So there you have it. Site visitors can now view archival pages for all albums, content and essays. If that's enough of an archive for your site you can stop here. If you'd like to go farther, we recommend clicking on the "Timeline templates" link below to learn how to display a unified stream of all your latest content on a single page.

support@koken.me
http://assets1.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