Skip to content
Snippets Groups Projects
title_image.html 1.49 KiB
{% comment %}
    Big white title with backdrop image
    The image is determined by the "title_image" option in the
    front-matter of the markdown file. It can either be the keyword
    "default" or the name of an image file. The image file is expected
    to be found in the image directory (c.f. _config.yml).
    Should the option be unset or the image not be found the blue
    background color as set in title-image.css will be used instead.

    By default it will use the page title as text content. 
    If during inclusion the parameter "content" is defined (usually captured 
    HTML code), it will be pasted verbatim instead.
    NOTE: Do not forget to expand the "title-text" CSS class when specifying 
    custom content. or make sure the content is wrapped into a container.
{% endcomment %}

{% if page.title_image %}
    {% if page.title_image == 'default' %}
        {% assign image-file = site.default.title_image %}
    {% else %}
        {% assign image-file = page.title_image %}
    {% endif %}
{% endif %}

<div id="title">

    {% if image-file %}
    {% include wide_image.html
        file_name   = image-file
        alt_text    = "artistic title image" %}
    {% endif %}

    <div id="header-offset" class="header-offset"></div>
    <div class="title-content-container">   
    
        {% if include.content %}
            {{ include.content }}
        {% else %}
            <h1> {{ page.title }} </h1>
        {% endif %}
    </div>

    {% include transition.html direction="right" %}

</div>