{# ------------------------------------------------------- #} {# LIST VIEW OF ALL exhibitors #} {# 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 exhibitors to the site title defined in base.html #} {% block title %}{% parent %} - exhibitors{% endblock %} {% block content %} {# The first thing we do is call exhibitors data from the CMS. #} {% set data = cms.exhibitors %} {# 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') %} <h1>Exhibitors at TwitchCon 2016</h1> <h2>Presenting Sponsors</h2> <ul class="grid grid--xs-1-2 grid--sm-1-4 exhib-list"> {% for item in data %} {% if item.tier == 1 %} <li class="exhib-list__item"> {# Not the greatest if else... but if website url exists use an a tag. Otherwise use a div. Blank a tags are bad! #} <{% if item.website %}a href="{{ item.website }}" target="_blank"{% else %}div{% endif %} class="exhib-list__link"> <div class="aspect aspect--square exhib-list__image"><img src="{{ item.image|imageCrop(400) }}" class="aspect__fill"/>{% if item.highlight %}<span class="exhib-list__star"><svg class="icon icon--lg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use></svg></span>{% endif %}</div> <h4>{{ item.name }}</h4> <p class="exhib-list__location">{{ item.location }}</p> {% if item.website %}</a>{% else %}</div>{% endif %} </li> {% endif %} {% endfor %} </ul> <hr> <h2>Sponsors</h2> <ul class="grid grid--xs-1-2 grid--sm-1-5 exhib-list"> {% for item in data %} {% if item.tier == 2 %} <li class="exhib-list__item"> <{% if item.website %}a href="{{ item.website }}" target="_blank"{% else %}div{% endif %} class="exhib-list__link"> <div class="aspect aspect--square exhib-list__image"><img src="{{ item.image|imageCrop(260) }}" class="aspect__fill"/>{% if item.highlight %}<span class="exhib-list__star"><svg class="icon icon--lg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use></svg></span>{% endif %}</div> <h5>{{ item.name }}</h5> {% if item.location %} <p class="exhib-list__location">{{ item.location }}</p> {% endif %} {% if item.website %}</a>{% else %}</div>{% endif %} </li> {% endif %} {% endfor %} </ul> <hr> <h2>Exhibitors</h2> <ul class="grid grid--xs-1-2 grid--sm-1-5 exhib-list"> {% for item in data %} {% if item.tier == 3 %} <li class="exhib-list__item"> <{% if item.website %}a href="{{ item.website }}" target="_blank"{% else %}div{% endif %} class="exhib-list__link"> <div class="aspect aspect--square exhib-list__image"><img src="{{ item.image|imageCrop(260) }}" class="aspect__fill"/>{% if item.highlight %}<span class="exhib-list__star"><svg class="icon icon--lg"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use></svg></span>{% endif %}</div> <h5>{{ item.name }}</h5> {% if item.location %} <p class="exhib-list__location">{{ item.location }}</p> {% endif %} {% if item.website %}</a>{% else %}</div>{% endif %} </li> {% endif %} {% endfor %} </ul> <p><svg class="icon icon--baseline icon--twitchpurple"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-star"></use></svg> Showing Exclusive Content at TwitchCon 2016!</p> {% endblock %}