[Sugester V2 EN](https://sugester.intum.pl/kb/sugester-v2-en.md) / [CMS](https://sugester.intum.pl/kb/sugester-v2-en/cms.md)

# [Liquid Variables in Layouts](https://sugester.intum.pl/kb/sugester-v2-en/liquid-variables-in-layouts.md)

CMS layouts use Liquid templates for dynamic content rendering. You define variables in the page fields.

## Basic Syntax

### Displaying Variables
```liquid
{{ title }}
{{ brand | default: 'MyCompany' }}
```

### Conditions
```liquid
{% if product == 'winery' %}
  <span class="text-purple-500">MyCompany</span>
{% else %}
  <span class="text-emerald-500">MyCompany</span>
{% endif %}
```

### Loops
```liquid
{% for p in paragraphs %}
  {{ p }}
{% endfor %}
```

## Popular Variables

<table>
<tr><th>Variable</th><th>Description</th><th>Example</th></tr>
<tr><td><code>name</code></td><td>Page name</td><td><code>Dashboard PL</code></td></tr>
<tr><td><code>title</code></td><td>Page title</td><td><code>MyCompany Dashboard</code></td></tr>
<tr><td><code>tagline</code></td><td>Subtitle/slogan</td><td><code>Microclimate Monitoring</code></td></tr>
<tr><td><code>lang</code></td><td>Language code</td><td><code>pl</code>, <code>en</code></td></tr>
<tr><td><code>brand</code></td><td>Brand name</td><td><code>MyCompany</code></td></tr>
<tr><td><code>icon</code></td><td>Icon/logo URL</td><td><code>https://...svg</code></td></tr>
<tr><td><code>product</code></td><td>Product type</td><td><code>vineyard</code>, <code>winery</code>, <code>Dashboard</code></td></tr>
<tr><td><code>current_lang</code></td><td>Current language (display)</td><td><code>PL</code>, <code>EN</code></td></tr>
<tr><td><code>contact_email</code></td><td>Contact email</td><td><code>contact@company.pl</code></td></tr>
</table>
## Multilingual Variables

For the language switcher:
```liquid
{{ page_path_pl }}  → /dashboard
{{ page_path_en }}  → /dashboard-en
```

Example language dropdown:
```html
<a href="{{ page_path_pl }}" class="{% if lang == 'pl' %}active{% endif %}">PL</a>
<a href="{{ page_path_en }}" class="{% if lang == 'en' %}active{% endif %}">EN</a>
```

## System Variables

<table>
<tr><th>Variable</th><th>Description</th></tr>
<tr><td><code>paragraphs</code></td><td>Array of page paragraphs</td></tr>
<tr><td><code>path</code></td><td>Page URL path</td></tr>
</table>
## Liquid Filters

```liquid
{{ title | upcase }}              → TITLE
{{ title | downcase }}            → title
{{ email | default: 'none' }}     → default value
{{ text | truncate: 100 }}        → truncate text
{{ price | append: ' PLN' }}      → append text
{{ url | remove: 'https://' }}    → remove text
```

## Example of a Complete Layout

```html
<!DOCTYPE html>
<html lang="{{ lang | default: 'pl' }}">
<head>
  <title>{{ title }}</title>
</head>
<body>
  <header>
    <img src="{{ icon }}" alt="{{ brand }}">
    <span>{{ brand }}</span>
  </header>
  
  <main>
    {% for p in paragraphs %}
      {{ p }}
    {% endfor %}
  </main>
  
  <footer>
    <p>{{ contact_label }}: {{ contact_email }}</p>
  </footer>
</body>
</html>
```

## Debugging

To see all available variables, temporarily add:
```liquid
<div style="position: relative;"><pre class="language-text" tabindex="0"><code class="language-text">{{ page | json }}</code></pre></div>
```