Support Center

About Koken

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

Image loading and formatting

Image loading and formatting

Last Updated: Aug 02, 2013 10:58AM EDT

This tutorial will cover one of Koken's most important features — image publishing. We'll first explain how image publishing works, then walk through a variety of code samples to help you achieve the look you want.

Responsive media publishing

Koken's image publishing may be different from other content management systems you've used in the past. Our system is primarily designed to meet the needs of designers creating web sites that will be viewed across all screen sizes — from the largest desktop monitor to the phone in your pocket and everything in-between. Page layouts that expand and collapse are becoming the norm as designers work to create web sites that are viewable on all screens.

Flexible layouts require flexible media, so (by default) Koken publishes images, videos and slideshows that adapt to their surroundings. Media automatically scale up and down as the width of their containers increase and decrease in size.

Responsive web design is best explained through separate tutorials and books, but for now here's the basic concept.

Above we have a three column grid layout. The width of the parent container is 960px so it fits on all desktop screens. Inside we have an unordered list with each list element floated left and set to a width of 33%. Images are published by Koken inside each list element using the <koken:img /> tag. Each image automatically scales to the width of its list element container (320px).

Viewing three images in a row is fine for desktops, but what about mobile phones? If this were a responsive layout, media queries in the page's style sheet could detect the smaller screen and set the width of the parent container to the mobile device's viewport (480px) and then change the width of each list element to 100% (also 480px). All three of these images would then automatically adapt to their new page layout and be displayed on top of each other at 480px wide, as demonstrated below.

Image presets and quality

As a page layout expands and contracts in size, images published by Koken upscale and downscale until they reach a point where a new (larger or smaller) image is necessary. The images are then dynamically swapped with new source files. This prevents images from scaling beyond their natural size (yuck) and also keeps file sizes down on smaller screens.

Retina/HiDPI quality

If you own a second generation (or newer) iPad, iPhone 4 (or newer), MacBook Pro with a Retina display or other hardware with a HiDPI screen, Koken returns images at twice their normal size. The images appear at their intended size, but their resolution is double for higher quality images. You may turn this feature off if you'd like through Settings > Image Publishing in Koken's console.

Loading images

Now that you have a handle on how images are scaled and adapt to page layouts let's look at how images are published in templates.

Responsive images

As explained in our Lens templates overview, data is loaded into templates with the <koken:load> tag. Images are published with <koken:img /> using the data returned by <koken:load>.

Here's an example from a bare bones content.lens template:

<html>
<head></head>
<body>
  <koken:load>
    <koken:img />
  </koken:load>
</body>
</html>

Inserting the <koken:img /> by itself instructs Koken to return a responsive, proportionally scaled image and swap it out with larger/smaller versions when necessary. To size this image you would wrap <koken:img /> with a container element set to a fluid or fixed size. For example:

<html>
<head>
  <style>
    #container {
      width:960px;
    }
    ol li {
      width:33%;
      float:left;
    }
  </style>
</head>
<body>
  <koken:load>
    <div id="container">
      <ol>
        <koken:loop>
          <li>
            <koken:img />
          </li>
         </koken:loop>
      </ol>
    </div>
  </koken:load>
</body>
</html>

Cropped responsive images

Responsive image sizing isn't limited to proportional images. You may also display cropped versions that scale and swap as well. You do so by assigning aspect ratios to a size attribute inside the <koken:img /> tag. For example:

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

The above (from an contents.lens template) renders a 3:2 version of each image. Each image's width is equal to 100% of its parent list element's width and its height is equal to 66.6% of that value — thus creating an image with a 3:2 aspect ratio. You can assign any aspect ratio you want (4:3, 1:1, 16:9, etc). If the page layout changes the 3:2 image will be scaled and swapped with larger/smaller versions when necessary.

Responding to height, not width

Images automatically scale to the width of their containers. But what about layouts that require images to respond to the container's height instead? Good example of this is our Boulevard theme which displays images horizontally at equal heights (but variable widths). To do that you'd add a respond_to attribute set to "height", like so:

<koken:load>
<ol>
  <koken:loop>
    <li>
      <koken:img respond_to="height" />
    </li>
  </koken:loop>
</ol>
</koken:load>

Fixed size images

If you don't need responsive images you may still use <koken:img /> to publish images at fixed sizes. You do so by adding width and/or height attributes.

For example, to display an image that's 300px wide and with a variable height you'd add width like so:

<koken:img width="300" />

To display an image at a fixed width and height, add both attributes plus a crop attribute set to "true", like so:

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

The above will return an image that is exactly 300px width by 300px high and cropped in the middle.

Ignoring certain container elements

As explained above, Koken measures the HTML element in which <koken:img /> is inserted to determine its width. There may be times however when a page layout uses additional markup around the image that could interfere with Koken's ability to calculate the area. For these situations Koken includes a custom HTML5 data attribute called data-koken-ignore-responsive. Simply add this attribute with a value of "true" to the element you want Koken to skip over.

Here's an example. In the following markup we've inserted an image inside a span which by default has a display value of "inline". Koken would normally target this span and calculate the available width as 0 (zero) because the element isn't a block. Assigning data-koken-ignore-responsive to the span resolves that problem so Koken looks to the next parent element in the hierarchy (the <li>) for its calculation.

<koken:load>
<ol>
  <koken:loop>
    <li>
      <span data-koken-ignore-responsive="true">
        <koken:img />
      </span>
    </li>
  </koken:loop>
</ol>
</koken:load>	

Additional resources

There are a number of great CSS frameworks available that can help you design responsive layouts. Here's a handy summary list of what's out there and the relative strengths of each.

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