Head

The Head component is meant to be a starting point for every webpage we build. Include, extend or embed this file in your main templates to get off on the right foot.

Usage

Simple use of the Head component is accomplished by including it.

{% include "@miz/components/meta/head/head.twig" %}

To pass variables along, simply set variables before including. See the example view.

Options reference

Options

There are a few contextual variables available in the head.twig file.

Variable Default Values Description
html_attributes lang="en" String Use this to add attributes to the <html> element.
HeadTitle OR page.title + site.title null String Page/site title for the page. This should be handled by the implementation. There is a WordPress default of HeadTitle if you’re using MizzouMVC
page.description null String Meta description for the page.
baseURL OR Site.ParentThemeURL null String If you need to provide a pathway to the files of the Design System in your implementation you can provide those values here. NO trailing slash. The Site object is from MizzouMVC.
body.class null String Variable to provide a class to the <body> element

Blocks

Each of these blocks can be used to extend and add more content _or_ override it completely. But be careful, that could cause unintended consquences.

Block name Description
head_meta_base Initial meta information setting up the browser to render the code properly.
head_page_info Containing block for page information. Only use unless you’re overriding all page information
└─ document_title Page title block. Extend to override default handling.
└─ meta_description Page description. Extend to override default handling.
head_meta_facebook Head code for Facebook will go here.
head_meta_twitter Head code for Twitter will go here.
head_meta_icons Default icons.
head_js Default JavaScript for the head. Extend to override defaults.
head_css Default CSS. Extend to add more or override. Be careful overriding!
head_code Reserved for use by CMSs or implementation specific code
{% set html_attributes = ' id="myId"' %}

{% set page = {
  title: "foo"
} %}

{% set baseURL = "/a/sub/path" %}

{% include "@miz/components/meta/head/head.twig" %}
<!DOCTYPE html>

<html id="myId">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="format-detection" content="telephone=no">
    <meta name="robots" content="index,follow">
    <!-- Document Title -->
    <title>foo - </title>

    <!-- Favicon -->
    <link href="/a/sub/path/images/favicons/favicon.ico" rel="icon" />

    <!-- Apple Touch Icons -->
    <link href="/a/sub/path/images/favicons/apple-touch-icon.png" rel="apple-touch-icon-precomposed" />
    <meta content="" name="apple-mobile-web-app-title" />
    <link rel="mask-icon" href="/a/sub/path/images/favicons/mu-safari-icon.svg" color="black">

    <!-- Microsoft Windows 8+ Tiles -->
    <meta content="" name="application-name" />
    <meta content="/a/sub/path/images/favicons/apple-touch-icon.png" name="msapplication-TileImage" />
    <meta content="#F1B82D" name="msapplication-TileColor" />

    <!-- JavaScript -->
    <script src="https://jonneal.dev/svg4everybody/svg4everybody.min.js"></script>
    <script>
        svg4everybody();
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.7.1/svg.min.js"></script>

    <!-- MIZ CSS -->
    <link rel="stylesheet" href="/css/miz-fonts.css" />
    <link rel="stylesheet" href="/css/miz.css" />
    <link rel="stylesheet" href="/css/miz-brand.css" />

</head>

<body>
/* No context defined for this component. */