Template

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 .

{{#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}}