{# ------------------------------------------------------- #} {# INDIVIDUAL VIEW FOR EACH guest #} {# This page can use any data from http:localhost:2000/cms/#/form/guest/ #} {# Webhook uses the SWIG.js (like Djagno/Twig) templating system. Their documentation is here: #} {# http://paularmstrong.github.io/swig/docs/tags/ #} {# Learn about calling data into Webhook pages here: #} {# http://www.webhook.com/docs/template-rules-and-filters/ #} {# ------------------------------------------------------- #} {# Confused what extends and blocks do? Watch a primer: #} {# http://www.webhook.com/docs/template-inheritance-blocks/ #} {% extends "templates/partials/base.html" %} {# This sets our page . It will append this guest's name to the site title defined in base.html #} {% block title %}{% parent %} - {{ item.name }}{% endblock %} {% block content %} {% if item.image_profile || item.stream.thumbnail_url %} <div class="guest-image"> <div class="aspect aspect--square"> {% if item.image_profile %} <img src="{{ item.image_profile|imageCrop(250) }}" class="aspect__fill"/> {% else %} <img src="{{ item.stream.thumbnail_url|replace('600x600', '300x300', 'g') }}" class="aspect__fill"/> {% endif %} </div> </div> {% endif %} <h1>{{ item.name }}</h1> {% if item.stream.original_url %} <p> <svg class="icon icon--md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo-glitch"></use></svg> <a href="{{item.stream.original_url}}" target="_blank">{{item.stream.original_url|replace('http://', '', 'g')|replace('www.', '', 'g')}}</a></p> {% endif %} {% if item.twitter %} <p> <svg class="icon icon-twitter icon--md"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-logo-twitter"></use></svg> <a href="http://www.twitter.com/{{ item.twitter }}" target="_blank">{{ item.twitter }}</a></p> {% endif %} {{ item.description|safe }} {# <p>{{ item.stream.title }}</p> #} {# <p><a href="{{item.stream.original_url}}">{{ item.stream.original_url }}</a></p> #} {# <p>{{ item.stream.thumbnail_url }}</p> #} {# <p>{{ item.stream.description }}</p> #} {% if item.event_guest.length > 0 %} <dl class="schedule-block"> <dt> <h3> {{ item.name }} will be a guest at {% if item.event_guest.length > 1 %} these events: {% else %} this event: {% endif %} </h3> </dt> {% for relation in item.event_guest|sort('time_start') %} <dd class="schedule-event"> <a href="{{ url(relation) }}" class="no-smoothstate js-modal-trigger"> <h4 class="schedule-name"> {{ relation.name }} </h4> <p class="schedule-meta"> {% if relation.time_end %} {{relation.category}} - {% endif %} {% if relation.time_end %} <svg class="icon icon--sm"><use xlink:href="#icon-clock"></use></svg> {{ relation.time_start|date('l, M d - g:i A') }} - Ends at {{ relation.time_end|date('g:i A') }} {% endif %} {% if relation.stream %} <svg class="icon icon--sm"><use xlink:href="#icon-host"></use></svg> {% endif %} </p> {% for relation in relation.location %} <span class="schedule-avatar"><img src="{{ relation.image_avatar|imageCrop(52) }}" /></span> {% endfor %} </a> </dd> {% endfor %} </dl> {% endif %} <hr /> {% spaceless %} {# The first thing we do is call guest data from the CMS. #} {% set data = cms.guest|where('tier', '1') %} {# Since webhook sorts by name with Upper Casing sensitivity lets resort the .name by using a custom field #} {% for item in data %} {% set item._lowername = item.name.toLowerCase() %} {% endfor %} {% set data = data|sort('_lowername') %} {% endspaceless %} <h3>Featured TwitchCon Guests</h3> {% spaceless %} <ul class="grid grid--xs-1-3 grid--sm-1-8 guest-list guest-list--sm"> {% for item in data %} <li><a href="{{ url(item) }}"> {% if item.image_profile %} <img src="{{ item.image_profile|imageCrop(200) }}" /> {% else %} <img src="{{ item.stream.thumbnail_url|replace('600x600', '150x150', 'g') }}" /> {% endif %} {{ item.name }}</a></li> {% endfor %} </ul> {% endspaceless %} <h4> <a href="/guest/">View All Guests »</a> </h4> {% endblock %}