Template examples (real)

Real, working impressBox templates so you can see exactly how they're built. Templates use a Django/Jinja-style engine: they extend a base layout and fill two blocks — extra_css (styles) and content (the markup) — and they're rendered at 1920×1080. A JSON context schema defines the editable parameters; the values are filled in per content item.

Worked example: a daily lunch menu

This is the real "Dienos pietus" template — a header title plus a repeating list of meals with prices.

Template code (HTML/CSS + Jinja)

{% extends "impress_html/base.html" %}

{% block extra_css %}
  <style type="text/css">
    html { color: #fff; background-color: #a8e3e7; }
    body {
      position: relative; width: 1920px; height: 1080px;
      overflow: hidden; justify-content: center; align-items: center;
    }
    * { margin: 0; box-sizing: border-box; }
    .holder { display: flex; flex-direction: column; height: 100%; padding: 105px; gap: 50px; font-size: 50px; }
    .meals  { background-color: #66bbc2; flex-grow: 1; padding: 60px 90px; font-size: 36px; }
    .price::after { content: '€'; margin-left: 10px; }
  </style>
{% endblock %}

{% block content %}
  <div class="holder">
    <div class="header"><h1>{{ header.menutitle }}</h1></div>
    <div class="meals">
      <ul>
        {% for meal in meals %}
          <li>{{ meal.name }} <span class="price">{{ meal.price }}</span></li>
        {% endfor %}
      </ul>
    </div>
  </div>
{% endblock %}

Context schema (defines the editable fields)

{
  "type": "object",
  "properties": {
    "header": {
      "type": "object", "title": "Header", "propertyOrder": 1,
      "properties": { "menutitle": { "type": "string", "title": "Title" } }
    },
    "meals": {
      "type": "array", "title": "Meals", "format": "table/tabs", "propertyOrder": 2,
      "items": {
        "type": "object", "title": "Meal",
        "properties": {
          "name":  { "type": "string" },
          "price": { "type": "number" }
        }
      }
    }
  }
}

"format": "table/tabs" makes the editor show the meals as an editable table — staff just add rows.

Example values (what an operator fills in)

{
  "header": { "menutitle": "Today's lunch" },
  "meals": [
    { "name": "Tomato soup",              "price": 3.50 },
    { "name": "Grilled chicken & rice",   "price": 6.90 },
    { "name": "Apple pie",                "price": 2.80 }
  ]
}

Change a price → re-render → the board updates. The layout never breaks because it's fixed.

Minimal example (the smallest possible template)

A title and a subtitle, with two text parameters:

{% extends "impress_html/base.html" %}
{% block extra_css %}
  <style>
    body { width:1920px; height:1080px; display:flex; flex-direction:column;
           justify-content:center; align-items:center; background:#101418; color:#fff;
           font-family:sans-serif; }
    h1 { font-size:120px; margin:0; }
    p  { font-size:48px; opacity:.8; }
  </style>
{% endblock %}
{% block content %}
  <h1>{{ title }}</h1>
  <p>{{ subtitle }}</p>
{% endblock %}
{ "type": "object", "properties": {
    "title":    { "type": "string", "title": "Title" },
    "subtitle": { "type": "string", "title": "Subtitle" }
} }

Key points

  • Always start with {% extends "impress_html/base.html" %} and put styles in {% block extra_css %}, markup in {% block content %}.

  • Design to a 1920×1080 canvas (or your screen's size); use a portrait layout for portrait screens.

  • Use Jinja loops ({% for x in list %}) and variables ({{ x.field }}) to render the parameters.

  • The context schema is JSON Schema — "format": "table/tabs" on an array gives an editable table; propertyOrder controls field order in the editor.

  • A template renders as a still image by default, or as a video for animated templates.

Real templates in the system you can learn from

The account already has working examples — open them to read their code: 2 Columns, Orai / Orai HTML (weather), Verslo žinios (business news), and Dienos pietus (above).

Building or editing template code is an advanced task — impressBox can build a custom template (and wire it to a data source) for your exact layout.

Related pages