Support Center

About Koken

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

Assigning dynamic values to Pillar

Assigning dynamic values to Pillar

Last Updated: Sep 05, 2014 02:15PM EDT

This article extends our Pillar setup instructions by explaining how grid properties may be edited through the theme settings panel in Koken's Site editor.

Assigning values from theme settings

Settings provide publishers with an interface to control the appearance of Koken themes. We'll now explain how to use settings to output dynamic values for Pillar.

Every .lens template has access to setting values. You retrieve values by adding a curly-braced variable containing settings. followed by the name of the variable you want to output. For example:

{{ settings.variable }}

Here's an example setting from a theme's info.json file:

"Grid": {
  "icon": "layout",
  "settings": {
    "pillar_spacing": {
      "label": "Spacing",
      "type": "slider",
      "min": 0,
      "max": 80,
      "step": 1,
      "suffix": "px",
      "value": 20
    }
  }
}

The value of the setting may then be assigned to the Pillar setup script in your .lens template, like so:

<script>
  $(function() {
    $('#kgrid').pillar({
      items: '.kgrid_item',
      spacing: {{ settings.pillar_spacing }}
    });
  });
</script>

You may then continue on with settings for column count, variability or other properties.

Read more about creating settings and the types of settings you can add to your theme to control Pillar.

Assigning values from Lens variables

You can also tap into any Lens variables loaded by the page in your JavaScript. For example, let's say you're editing the album.lens template and would like to change the maximum number of columns (displayed by desktops) depending on which album the page is displaying. For this you could detect the ID of the album, or some other property, and then use that to map a dynamic value to Pillar. Here's an example:

<script>
  // Each line is an album id (make sure it is in quotes) followed by the max number of
  // columns to be used for that album.
  var albumColMap = {
    '1': 4,
    '2': 5,
    '3': 2
  };
  
  var albumId = {{ album.id }};
  var maxCols = 3;

  if (albumColMap[albumId]) {
    maxCols = albumColMap[albumId];
  }

  // Setup Pillar
  $(function() {
    $('#kgrid').pillar({
      items: '.kgrid_item',
      columns: {
        'max': maxCols
      }
    });
  });
</script>
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