Creek Articles

Back to Index


Written by
Travis Bernard
Creek > Themes: Twig       Themes

Themes: Twig

Written by
Travis Bernard

Creek uses Twig 1.x as its theme template engine.

For documentation about Twig's syntax, see their website: Twig Documentation

theme.json

{
  "title": "Example Theme",
  "description": "A description for your example theme.",
  "domain": "www.your-website.org",
  "name": "unique-theme-name",
  "remote_id": "16",
  "version": "1.1.2",
  "root": "./an/optional/root/path",
}

Tags: Global

A list of dynamic tags is available for your Twig templates and blocks.

Each tag should be wrapped in {{ and }} with a space between curly braces and tag name.

Example: {{ page.template }} will output shows-index

List of Tags

Station

  • station.name - The title of your station.

Website

  • site.domain - The primary domain of your station.
  • site.protocol - The default protocol for the station. Useful when stream (or other resources, like images) are not in HTTPS for some reason, so that you can default to HTTP, avoiding mixed content warning.

Page

  • page.headTitle - Title of page for the <title> tag.
  • page.title - Default title for this route. For example, the title of a show, if on the shows-view route.
  • page.name - The current route and template name. Example: shows-view
  • page.URL - The URL for the current page.

Meta Tags

Social media tags for Facebook and Twitter.

  • page.openGraph
  • page.twitterCards

Theme: Global Settings

  • theme.dir - path to the theme's base directory.
  • theme.logoURL - URL to the logo image, set in the station's settings.
  • theme.headerURL - URL to the header image, set in the station's settings.

Theme: Options

For more about Theme Options see the full article. They allow you to create a set of easy-to-edit options for your theme, based on a YAML file.

  • theme.optionsHTML - Theme options represented as a JavaScript object wrapped in HTML.
  • theme.options.name.of.option - Specific option.

Media Storage

  • media.S3.url - URL to your S3 media storage.

Social Media URLs

These are available in the station's settings. Useful for building themes that are used at multiple stations. Allows you to create a "social media link" buttons that work for each station that uses your theme.

  • site.social.facebook
  • site.social.twitter
  • site.social.soundcloud
  • site.social.mixcloud

Components

  • components.pagination - Outputs pagination for posts-index, shows-view, events-index, broadcasts-index, and shows-all. Example: 
<div class="pagination-container">
  <div class="pagination-inner">
    <span class="disabled">Previous</span><span class="current">1</span>
    <span><a href="/programs/eclectic-kettle/page:2?url=shows%2Feclectic-kettle">2</a></span>
    <span><a href="/programs/eclectic-kettle/page:3?url=shows%2Feclectic-kettle">3</a></span>
    <span class="next"><a href="/programs/eclectic-kettle/page:2?url=shows%2Feclectic-kettle" rel="next">Next</a></span>
  </div>
</div>

  • components.editContent - An "edit content" button that is only displayed for signed-in users with content-editing permissions. Useful for making a quick shortcut button to edit a Broadcast, Post, Page, or Event.

  • components.schedule - Outputs a show schedule table.

  • components.schedulePrint - Outputs a printable show schedule table.

Tags: By Route

Below is a list of variables that are available to each route.

Home

home-index

All global tags are available. See list below.

TODO:

  • Custom model inclusion.

Shows

shows-index

Index of shows. Defaults to shows for the current weekday.

Variables

  • {{ content.shows }} - List of Show objects that each follow the API v2 structure. Example here.
  • {{ page.weekdayNumber }} - 1 through 7
  • {{ page.weekday }} - Monday through Sunday

Example

{% include("header") %}

<h1>Shows</h1>

{% for show in content.shows %}

  <div class="Show">
  
    <h4 class="Show-title">{{ show.attributes.title }}</h4>
    
    <div class="Hosts">
      {% for host in show.relationships.hosts %}
        {{ host.attributes.display_name }}
      {% endfor %}
    </div>
    
    <div class="Airtime">
      {{ show.relationships.airtime.attributes.start | date("g:ia") }}
      -
      {{ show.relationships.airtime.attributes.end | date("g:ia") }}
    </div>
    
  </div>

{% endfor %}

{% include("footer") %}

shows-view

A page for a single show.

Variables

Example: {{ Show.attributes.title }}

Example

{% include('header') %}

<img src="{{ content.show.relationships.image.attributes.url_md | raw }}" />

<h1>{{ content.show.attributes.title }}</h1>

<div class="text">{{ show.attributes.full_description | raw }}</div>

<div class="Categories">
  <h2>Categories</h2>
  {% for category in show.relationships.categories %}
  <ul>
    <li class="Category">
      <a href="/shows/?category={{ category.attributes.short_name }}">{{ category.attributes.title }}</a>
    </li>
  </ul>
  {% endfor %}
</div>

<div class="Airtimes">
  <h2>Airtimes</h2>
  {% for airtime in show.relationships.airtimes %}
  <ul>
    <li class="Airtime">
      {{ airtime.attributes.start | date("g:ia") }} - {{ airtime.attributes.end | date("g:ia") }}
    </li>
  </ul>
  {% endfor %}
</div>

<div class="Broadcasts">
  <h2>Broadcasts</h2>
  {% for broadcast in show.relationships.broadcasts %}
  <ul>
    <li class="Broadcast">
      <a href="/broadcasts/{{ broadcast.id }}">{{ broadcast.attributes.title }}</a>
    </li>
  </ul>
  {% endfor %}
</div>

{% include('footer') %}

Broadcasts

broadcasts-index

NOT YET

broadcasts-view

Example

{% include('header') %}

<img src="{{ content.broadcast.relationships.image.attributes.url_md | raw }}" />

<h1>{{ content.broadcast.attributes.title }}</h1>

<div class="text">{{ content.broadcast.attributes.text | raw }}</div>

<div class="Media">
  <h2>Media</h2>
  {% for media in content.broadcast.relationships.media %}
  <div class="Media">
    {% if media.attributes.type == "audio" %}
    <audio controls="controls">
      <source src="{{ media.meta.url }}" type="audio/mp3">
    </audio>
    {% endif %}
  </div>
  {% endfor %}
</div>

<div class="Playlist">
  <h2>Playlist</h2>
  {% for track in content.broadcast.relationships.playlist %}
  <div class="Track">
    {{ track.attributes.artist }} - {{ track.attributes.title }}
  </div>
  {% endfor %}
</div>

{% include('footer') %}

Posts

posts-index

NOT YET

posts-view

A page for a single post.

Variables

Example

{% include('header') %}

<img src="{{ content.post.relationships.image.attributes.url_md | raw }}" />

<h1>{{ content.post.attributes.title }}</h1>

<div class="text">{{ content.post.attributes.text | raw }}</div>

<div class="Categories">
  <h2>Categories</h2>
  {% for category in content.post.relationships.categories %}
  <div class="Category">
    <a href="/posts/?category={{ category.attributes.short_name }}">{{ category.attributes.title }}</a></div>
  {% endfor %}
</div>

{% include('footer') %}