Skip to content
Snippets Groups Projects
base.html 8.65 KiB
{% load static wagtailuserbar wagtailcore_tags wagtailimages_tags navigation_tags util_tags %}<!doctype html>
<html class="no-js" lang="">
    <head>
        {# TODO fallbacks if page is not defined e.g. for 404 page #}
        <meta charset="utf-8" />
        <title>{% block title_prefix %}{{ TITLE_PREFIX }}{% endblock %}{% block title %}{% if page.seo_title %}{{ page.seo_title }}{% else %}{{ page.title }}{% endif %}{% endblock %}{% block title_suffix %}{{ TITLE_SUFFIX }}{% endblock %}</title>
        <meta name="description" content="{% if page.search_description %}{{ page.search_description }}{% else %}{{ page.listing_summary }}{% endif %}" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        {% if GOOGLE_TAG_MANAGER_ID %}
            {# To enable GTM code you need to specify GOOGLE_TAG_MANAGER_ID in production.py or in local.py #}
            <!-- Google Tag Manager -->
            <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
            new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
            j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
            'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
            })(window,document,'script','dataLayer','{{ GOOGLE_TAG_MANAGER_ID|escapejs }}');</script>
            <!-- End Google Tag Manager -->
        {% endif %}

        <!-- favicons -->
        {% comment %}
            Generate favicons by http://realfavicongenerator.net using the following path: settings.STATIC_URL + img/favicons.
            Then favicon.ico should be copied to a directory called "public" in the application root and puppet does some magic to serve it up at the site root.
        {% endcomment %}

        <!-- Twitter summary card - see https://dev.twitter.com/cards/types/summary -->
        <!--  and https://dev.twitter.com/cards/getting-started -->
        <meta name="twitter:card" content="summary" />
        <meta name="twitter:site" content="@{{ settings.utils.SocialMediaSettings.twitter_handle }}" />
        <meta name="twitter:title" content="{{ page.title }}" />
        <meta name="twitter:description" content="{{ page|social_text:request.site }}">
        {% if page.social_image  %}
            {% image page.social_image width-320 as social_img %}
            <meta name="twitter:image" content="{{ request.site.root_url }}{{ social_img.url }}">
        {% else %}
            <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
        {% endif %}

        <!--facebook opengraph tags-->
        <meta property="fb:app_id" content="{{ settings.utils.SocialMediaSettings.facebook_app_id }}" />
        <meta property="og:type" content="website" />
        <meta property="og:url" content="{{ page.url }}" />
        <meta property="og:title" content="{{ page.title }}" />
        {% if page.social_image %}
            <meta property="og:image" content="http://{{ request.site.hostname }}{{ social_img.url }}" />
        {% else %}
            <!-- Add a default image to use for social sharing here in case one is not provided on the page. -->
        {% endif %}
        <meta property="og:description" content="{{ page|social_text:request.site }}" />
        <meta property="og:site_name" content="{{ settings.utils.SocialMediaSettings.site_name }}" />

        <link rel="stylesheet" type="text/css" href="{% static 'css/main.css' %}">

        {% block extra_css %}{% endblock %}
    </head>

    <body class="{% block body_class %}template-{{ page.get_verbose_name|slugify }}{% endblock %}">
        {% if GOOGLE_TAG_MANAGER_ID %}
            {# To enable GTM code you need to specify GOOGLE_TAG_MANAGER_ID in production.py or in local.py #}
            <!-- Google Tag Manager (noscript) -->
            <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ GOOGLE_TAG_MANAGER_ID|escapejs }}"
            height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
            <!-- End Google Tag Manager (noscript) -->
        {% endif %}

        {% include "includes/sprites.html" %}

        {% wagtailuserbar %}
        <header class="header header--standard">
            <div class="header__inner wrapper wrapper--large">
                <a href="{% slugurl 'home' %}">
                    <svg class="header__logo header__logo--desktop"><use xlink:href="#logo-desktop"></use></svg>
                    <svg class="header__logo header__logo--mobile"><use xlink:href="#logo-mobile"></use></svg>
                </a>

                <div class="header__menu-toggle">
                    <span>Menu</span>
                    <button class="button button-menu-toggle js-mobile-menu-toggle" aria-haspopup="true">
                        <span class="button-menu-toggle__line"></span>
                        <span class="button-menu-toggle__line"></span>
                        <span class="button-menu-toggle__line"></span>
                        <span class="button-menu-toggle__line"></span>
                    </button>
                </div>

                <section class="header__menus header__menus--desktop">
                    <div class="header__inner--top">
                        {% primarynav %}

                        <button class="button js-desktop-search-toggle">
                            <svg class="header__icon header__icon--magnifying-glass icon"><use xlink:href="#magnifying-glass"></use></svg>
                            <svg class="header__icon header__icon--cross icon"><use xlink:href="#cross"></use></svg>
                        </button>
                    </div>
                </section>

                <section class="header__menus header__menus--mobile">
                    {% primarynav %}
                </section>

            </div>

            <div class="header__search header__search--desktop">
                <form action="{% url 'search' %}" method="get" role="search" class="form form--header-search-desktop">
                    <button class="button" type="submit">
                        <svg class="icon icon--magnifying-glass"><use xlink:href="#magnifying-glass"></use></svg>
                    </button>
                    <input class="input input--transparent" type="text" placeholder="Search…" name="query"{% if search_query %} value="{{ search_query }}{% endif %}">
                </form>
            </div>

            <div class="wrapper wrapper--small">
                <h1 class="header__title">{{ page.title }}</h1>
            </div>
            <svg class="header__icon header__icon--pixels header__icon--pixels-left"><use xlink:href="#hero-standard-left-pixels"></use></svg>
            <svg class="header__icon header__icon--pixels header__icon--pixels-right"><use xlink:href="#hero-standard-right-pixels"></use></svg>
        </header>

        <main class="wrapper wrapper--large wrapper--main">
            {% block content %}{% endblock %}
        </main>

        <footer class="footer">
            <div class="footer__inner wrapper wrapper--large">
                <div class="footer__nav-container">
                    <section class="footer__social-links">
                        <h5 class="footer__heading">Follow us:</h5>
                        {% if settings.utils.SocialMediaSettings.twitter_handle %}
                            <a href="https://twitter.com/{{ settings.utils.SocialMediaSettings.twitter_handle }}">
                                <svg class="icon icon--footer-social"><use xlink:href="#twitter"></use></svg>
                            </a>
                        {% endif %}
                        {% if settings.utils.SocialMediaSettings.facebook_app_id %}
                            <a href="https://www.facebook.com/{{ settings.utils.SocialMediaSettings.facebook_app_id }}">
                                <svg class="icon icon--footer-social"><use xlink:href="#facebook"></use></svg>
                            </a>
                        {% endif %}
                    </section>

                    <section>
                        {% footernav %}
                    </section>

                    <section>
                        {% footerlinks %}
                    </section>
                </div>

                <div class="footer__credit" role="contentinfo">
                    {% if COPYRIGHT %}
                        <p>© {% now "Y" %} {{ COPYRIGHT }}</p>
                    {% endif %}
                    <div>Site by <a href="https://torchbox.com/">Torchbox</a></div>
                </div>
            </div>
        </footer>

        <script type="text/javascript" src="{% static 'js/main.js' %}"></script>

        {% block extra_js %}{% endblock %}
    </body>
</html>