In every page template or component there's a number of variables that are always available.

Global objects


Page object that contains information about currently viewed page.

<!DOCTYPE html>
    <title>{{ page.title }}</title>

Refer to page object documentation for all attributes available on page.


Site object provides access to global, site-related values, i.e. menu structure or languages on site.

<!DOCTYPE html>
    <title>{{ page.title }}</title>
    <meta name="keywords" content="{{ site.keywords }}">
    {% for language in site.languages %}
      <a href="{{ language.url }}">{{ language.title }}</a>
    {% endfor %}

Refer to site object documentation for all site related attributes.

Asset directory paths

To generate absolute URI-s to asset directories (such as directories for images or stylesheets), there are number of convenience variables to generate paths to these directories. Voog has the following conventions to store external files on site:

  • /assets – assets such as fonts to be used in page layouts and uploaded with design code editor
  • /images – images to be used in page layouts and uploaded with design code editor
  • /javascripts – javascript files that are uploaded with design code editor
  • /stylesheets – stylesheet files that are uploaded with design code editor
  • /photos – photos uploaded by user from "Files" section
  • /files – all other uploaded by user from "Files" section


Example of creating path to image:

<img src="{{ images_path }}/background.png">

Notice that you have to add trailing slash after variable.


Example that links to javascript file:

<script src="{{ javascripts_path }}/jquery-min.js"></script>


<link rel="stylesheet" href="{{ stylesheets_path }}/style.css">

See also stylesheet_link convenience tag to include stylesheets on page template.


Example of creating path to design asset:

<video controls>
  <source src="{{ assets_path }}/somevideo.mp4" type="video/mp4">
  I'm sorry; your browser doesn't support HTML5 video in MP4 with H.264.

Session related variables

If your layout code needs to make some decisions based whether user has been logged into CMS or not, you can use these variables which return true when logged in. These variables can be used together with if or unless tags.


Editmode has some common usage scenarios:
  • Not generating code for UI-candy bloat in public site, for example, Flash movies.
  • Generating in-page widgets to make editing page easier.
  • Showing hidden/untranslated menu items

Here's a detailed example of adding a background picker only in editmode.


Works nearly the same way as editmode but returns true only when in preview mode. Returns false when user is logged out.

{% if previewmode %}You are in preview mode!{% endif %}


Returns language code of the user interface when in edit mode. Returns nil when in preview mode and when user is logged out.

{% if editor_locale == 'en' %}
  <Edit mode message for editor with English interface.
{% endif %}

Custom variables

You can create your own variables to be used in templates by using the assign tag.