Appearance
The Master template
The Master template is the HTML document wrapper for your website, which all other templates are injected into.
Required tags
It must include three Liquid variables that Syngency injects content into at render time:
{{ content_for_header }}
Includes standard Syngency stylesheets and a <script> tag that bootstraps the Syngency JavaScript object with agency and page data. Must be placed in <head>.
{{ content_for_layout }}
The rendered output of the current template. Typically placed in the main element.
{{ content_for_footer }}
Standard Syngency scripts including the base shared Syngency platform JavaScript (www.min.js). Must be placed before </body>. Requires jQuery (not included).
Skeleton example
liquid
{% assign cacheBust = '?v=YYMMDD' %}
{% assign isDev = false %}
{% if querystring.preview or isDev %}
{% assign cacheBust = 'now' | date: '%s' | prepend: '?v=' %}
{% endif %}
<!DOCTYPE html>
<html lang="{% if locale %}{{ locale }}{% else %}en{% endif %}">
<head>
{% assign metaDesc = "This is the default website meta description" %}
{% assign pageTitle = page_name %}
{% if meta_title %}
{% assign pageTitle = meta_title %}
{% endif %}
{% if meta_description %}
{% assign metaDesc = meta_description %}
{% endif %}
{% if template == 'home' %}
{% assign hasCustomTitle = false %}
{% for page in pages %}
{% if page.url == 'home' %}
{% if page.meta_title %}
{% assign pageTitle = page.meta_title %}
{% assign hasCustomTitle = true %}
{% endif %}
{% if page.meta_description %}
{% assign metaDesc = page.meta_description %}
{% endif %}
{% endif %}
{% endfor %}
{% if hasCustomTitle == false %}
{% assign metaTitle = agency.name %}
{% endif %}
{% elsif template == 'model' %}
{% assign pageTitle = model.display_name %}
{% if division %}
{% assign pageTitle = pageTitle | append: ' | ' | append: division.name %}
{% endif %}
{% elsif template == 'model_submission' %}
{% assign pageTitle = "Apply" %}
{% assign metaDesc = "" %}
{% endif %}
{% unless metaTitle %}
{% assign metaTitle = pageTitle | append: ' | ' | append: agency.name %}
{% endunless %}
<title>{{ metaTitle }}</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="{{ metaDesc }}" />
{% assign noIndexTemplates = 'casting,404' %}
{% if package or noIndexTemplates contains template %}
<meta name="robots" content="noindex">
{% endif %}
{% comment %} Preload / preconnect {% endcomment %}
<link rel="preload" as="script" href="{{ 'plugins.js' | asset_url }}">
<link rel="preload" as="script" href="{{ 'scripts.js' | asset_url }}">
<link rel="preconnect" href="https://cdn.syngency.com">
{% comment %} Styles {% endcomment %}
{{ 'plugins.css' | append: cacheBust | asset_url | stylesheet_tag }}
{{ 'style.css' | append: cacheBust | asset_url | stylesheet_tag }}
{% comment %}
Discourage individual gallery or division-less model indexing
{% endcomment %}
{% if template == 'model' %}
{% if division %}
{% assign canonicalDivision = division %}
{% else %}
{% assign canonicalDivision = model.divisions[0] %}
{% endif %}
<link rel="canonical" href="https://{{ agency.primary_domain }}{{ model.url | within: canonicalDivision }}">
{% endif %}
{% comment %} Social meta {% endcomment %}
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">
<meta property="og:title" content="{{ metaTitle }}">
<meta property="og:description" content="{{ metaDesc }}">
<meta property="og:url" content="{{ page_url | replace: 'http:', 'https:' }}">
<meta property="og:site_name" content="{{ agency.name }}">
<meta property="og:image" content="{{ 'og-image.png' | asset_url }}">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:title" content="{{ metaTitle }}">
<meta name="twitter:url" content="{{ page_url | replace: 'http:', 'https:' }}">
<meta name="twitter:card" content="summary">
<meta name="twitter:description" content="{{ metaDesc }}">
{% comment %} Favicon {% endcomment %}
<link rel="icon" type="image/x-icon" href="{{ 'favicon.ico' | asset_url }}">
<link rel="icon" type="image/png" href="{{ 'favicon-16x16.png' | asset_url }}" sizes="16x16">
<link rel="icon" type="image/png" href="{{ 'favicon-32x32.png' | asset_url }}" sizes="32x32">
<link rel="icon" type="image/png" href="{{ 'favicon-96x96.png' | asset_url }}" sizes="96x96">
<link rel="apple-touch-icon" href="{{ 'apple-icon-180x180.png' | asset_url }}" sizes="180x180">
{{ content_for_header }}
{% assign currentDiv = '' %}
{% if template == 'division'%}
{% assign currentDiv = division %}
{% elsif template == 'model' %}
{% assign currentDiv = division %}
{% if currentDiv == '' %}
{% assign currentDiv = model.divisions[0] %}
{% endif %}
{% endif %}
{% assign currentGender = '' %}
{% if division.gender %}
{% assign currentGender = division.gender | handleize %}
{% elsif model.gender %}
{% assign currentGender = model.gender | handleize %}
{% endif %}
{% assign currentGender = currentGender | replace: 'women', 'female' | replace: 'girls', 'female' | replace: 'men', 'male' | replace: 'boys', 'male' %}
{% assign activeMenuItem = template %}
{% if currentDiv %}
{% assign activeMenuItem = currentDiv.url %}
{% elsif template == 'posts' or template == 'post' %}
{% assign activeMenuItem = 'posts' %}
{% elsif template == 'page' %}
{% assign activeMenuItem = page.url %}
{% endif %}
{% comment %} JS globals {% endcomment %}
<script>
Syngency.debugMode == false
</script>
{% comment %} Analytics scripts {% endcomment %}
</head>
<body class="template-{{ template }}
{% if template != 'home' %}template-not-home{% endif %}
{% if office %}office-{{ office.name | handleize }}{% endif %}
{% if querystring.preview %}preview{% endif %}">
<header class="site-header mb-4">
<img src="{{ agency.logo | asset_url }}" alt="{{ agency.name }}">
<nav id="siteNav">
<ul aria-label="Site Navigation">
{% comment %}
Simple division list using the agency's published divisions in order.
Alternatively, remove this block and link manually.
{% endcomment %}
{% for agencyDivision in divisions %}
{% assign divisionHandle = agencyDivision.url | remove: '/divisions/' %}
<li class="{% if activeMenuItem == divisionHandle %}active{% endif %}">
<a href="{{ agencyDivision.url }}">{{ agencyDivision.name }}</a>
</li>
{% endfor %}
<li class="{% if activeMenuItem == 'model_submission' %}active{% endif %}">
<a href="/apply">Apply</a>
</li>
<li class="{% if activeMenuItem == 'posts' %}active{% endif %}">
<a href="/blog">Blog</a>
</li>
<li class="{% if activeMenuItem == 'contact' %}active{% endif %}">
<a href="/pages/contact">Contact</a>
</li>
<li class="{% if activeMenuItem == 'search' %}active{% endif %}">
<a href="/search" title="Search {{ agency.talent_term_plural }}">Search</a>
</li>
</ul>
</div>
</nav>
</header>
<main>
{{ content_for_layout }}
</main>
<footer>
{% if agency.social %}
<div class="agency-social>
{% assign showSocial = 'instagram,facebook,twitter,youtube' | split: ',' %}
{% for social in showSocial %}
{% for account in agency.social %}
{% if social == account.service and account.profile_name %}
<a href="https://{{ account.service }}.com/{{ account.profile_name }}" title="Follow {{ agency.name }} on {{ account.service | capitalize }}" rel="noopener" target="_blank">
<i class="fab fa-{{ account.service }} fa-lg"></i>
</a>
{% endif %}
{% endfor %}
{% endfor %}
</div>
{% endif %}
{% if agency.phone or agency.email or agency.physical_address1 %}
<div class="agency-details">
{% if agency.phone %}
<a href="tel:{{ agency.phone | remove: ' ' | remove: '-' }}">{{ agency.phone }}</a>
{% endif %}
{% if agency.email %}
<a href="mailto:{{ agency.email | downcase }}">{{ agency.email }}</a>
{% endif %}
{% if agency.physical_address1 %}
{{ agency.physical_address1 }}{% if agency.physical_address2 %}, {{ agency.physical_address2 }}{% endif %}{% if agency.physical_address3 %}, {{ agency.physical_address3 }}{% endif %} {% if agency.physical_postcode %}{{ agency.physical_postcode }}{% endif %}
{% endif %}
{% endif %}
<div class="agency-legal">
© {{ 'now' | date: '%Y' }} {{ agency.name }}
</div>
</footer>
{{ 'plugins.js' | append: cacheBust | asset_url | script_tag }}
{% if template == 'model' and gallery.media_type == 'video' %}
{% comment %}
Allows JS control of the Vimeo iframe player, for pause on slide change
{% endcomment %}
<script src="https://player.vimeo.com/api/player.js"></script>
{% endif %}
{% comment %}
content_for_footer requires jQuery (include in plugins.js or above)
{% endcomment %}
{{ content_for_footer }}
{{ 'scripts.js' | append: cacheBust | asset_url | script_tag }}
</body>
</html>