Variables

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

Global objects

page

Page object that contains information about currently viewed page.

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

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

site

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

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

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

images_path

Example of creating path to image:

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

Notice that you have to add trailing slash after variable.

javascripts_path

Example that links to javascript file:

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

stylesheets_path

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

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

assets_path

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.
</video>

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

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.

previewmode

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 %}

editor_locale

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.