Template

2min
LiSA Library comes with a very basic yet flexible and customizable template, to render the library.
Look mum, no hands!
LiSA Library uses Handlebars.js for client-side rending. When providing your own template, please refer to the Handlebars Language Guide for information on the Handlebars expression syntax.
Library template
The following code block shows the default library template. Feel free to customize it to your individual needs or even Bring your own template﻿.
Default library template
{{#each sections}}
  <div class="lisa__section{{#with variations}}{{#each .}} lisa__section--{{.}}{{/each}}{{/with}}">
    {{#title}}
      <div class="lisa__section-title">{{.}}</div>
    {{/title}}
    {{#with items}}
      <ul class="lisa__section-listing">
        {{#each .}}
          <li class="lisa__show{{#with variations}}{{#each .}} lisa__show--{{.}}{{/each}}{{/with}}" data-lisa-show-id="{{id}}">
            {{#asset}}
              <div class="lisa__show-assets">
                <div class="lisa__show-asset {{#orientation}}lisa__show-asset--{{.}}{{/orientation}}">
                  <img class="lisa__show-asset--lazy" data-src="{{url}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="{{../../title}}" />
                  <noscript>
                    <img src="{{url}}" alt="{{../../title}}" />
                  </noscript>
                </div>
              </div>
            {{/asset}}
            <div class="lisa__show-data">
              {{#tag}}
                <span class="lisa__show-tag">
                  <span>{{.}}</span>
                </span>
              {{/tag}}
              {{#with hosts}}
                <div class="lisa__show-avatars">
                  {{#each .}}
                    <div class="lisa__show-avatar">
                      <img src="{{avatar}}" alt="{{displayName}}" />
                    </div>
                  {{/each}}
                </div>
              {{/with}}
              {{#title}}
                <strong class="lisa__show-title">{{.}}</strong>
              {{/title}}
              {{#description}}
                <div class="lisa__show-description">{{{.}}}</div>
              {{/description}}
              {{#date}}
                <span class="lisa__show-date">{{.}}</span>
              {{/date}}
            </div>
            <a class="lisa__show-cta-play">
              <svg>
                <circle cx="41" cy="41" r="40"></circle>
                <polygon points="32,25 32,58 60,42"></polygon>
              </svg>
            </a>
          </li>
        {{/each}}
      </ul>
    {{/with}}
  </div>
{{/each}}

{{#each sections}}
  <div class="lisa__section{{#with variations}}{{#each .}} lisa__section--{{.}}{{/each}}{{/with}}">
    {{#title}}
      <div class="lisa__section-title">{{.}}</div>
    {{/title}}
    {{#with items}}
      <ul class="lisa__section-listing">
        {{#each .}}
          <li class="lisa__show{{#with variations}}{{#each .}} lisa__show--{{.}}{{/each}}{{/with}}" data-lisa-show-id="{{id}}">
            {{#asset}}
              <div class="lisa__show-assets">
                <div class="lisa__show-asset {{#orientation}}lisa__show-asset--{{.}}{{/orientation}}">
                  <img class="lisa__show-asset--lazy" data-src="{{url}}" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" alt="{{../../title}}" />
                  <noscript>
                    <img src="{{url}}" alt="{{../../title}}" />
                  </noscript>
                </div>
              </div>
            {{/asset}}
            <div class="lisa__show-data">
              {{#tag}}
                <span class="lisa__show-tag">
                  <span>{{.}}</span>
                </span>
              {{/tag}}
              {{#with hosts}}
                <div class="lisa__show-avatars">
                  {{#each .}}
                    <div class="lisa__show-avatar">
                      <img src="{{avatar}}" alt="{{displayName}}" />
                    </div>
                  {{/each}}
                </div>
              {{/with}}
              {{#title}}
                <strong class="lisa__show-title">{{.}}</strong>
              {{/title}}
              {{#description}}
                <div class="lisa__show-description">{{{.}}}</div>
              {{/description}}
              {{#date}}
                <span class="lisa__show-date">{{.}}</span>
              {{/date}}
            </div>
            <a class="lisa__show-cta-play">
              <svg>
                <circle cx="41" cy="41" r="40"></circle>
                <polygon points="32,25 32,58 60,42"></polygon>
              </svg>
            </a>
          </li>
        {{/each}}
      </ul>
    {{/with}}
  </div>
{{/each}}
﻿
﻿
Updated 25 Mar 2024
Did this page help you?
Customisations
Bring your own template