Nikola Title Background

Daniel Sendula Comments

Nikola Title Background

GCC - Game Creation Club's For 2019 PiWars entry I decided to move our web site from WordPress to nikola - site similar to this one.

Importing from WordPress was covered on many places including nikola's own site, but final import didn't look really like original theme it was taken from: background pictures under titles were missing. They were carefully selected to go with the content and without them site looked a bit, sad.

So, main question I asked was - how hard would it be for such feature to be added to nikola? After all, nikola is written in Python and source is available.

Requirements

First thing is that background image should be optional and easily added. Ideal place would be next to other page attributes (metadata) like title, tag, author and date. Second is that CSS for it should be something that can be easily added to theme's CSS file. And lastly it would be nice if it is not full blown change to existing code of nikola, but just change in theme itself.

Metadata

In turned out that nikola is very poweful and it captures all arbitrary metadata. It is enough to add new key in .meta file or, if you are using 'markdown.extensions.meta' just add them to the top of the file. In our case it can be 'background-image'. Example of .meta file:

.. title: Second Place!
.. slug: second-place
.. date: 2017-04-05 19:15:33
.. tags: 
.. description: 
.. wp-status: publish
.. background-image: /2017/04/trophy1.jpg

or top of this file

Title: Nikola Title Background
Tags: Home, Blog, nikola, background
Date: 2018-10-06 15:02
Author: Daniel Sendula
Background-image: /images/sea-water-sunset-horizon.jpg

After that you'll that attribute in post object's meta() method. For instance in some of the templates you can just check if it is set with:

{% if post.meta('background-image') %}

Combining these all that is needed for having background-image is to add following to all h1 tags that have entry-title css:

{% if post.meta('background-image') %} entry-title-background{% endif %}" {% if post.meta('background-image') %} style="background-image: url({{ post.meta('background-image') }});"{% endif %}

Notice that closing quotation marks of class attribute should be removed for above to be added. For instance, for this theme index.tmpl and post_header.tmpl look like this:

index.tmpl - h1 tag inside of header tag looks like this now:

            <h1 class="p-name entry-title header{% if post.meta('background-image') %} entry-title-background{% endif %}" {% if post.meta('background-image') %} style="background-image: url({{ post.meta('background-image') }});"{% endif %}><a href="{{ post.permalink() }}" class="u-url">{{ post.title()|e }}</a></h1>

and in post_header.tmpl, only h1 tag looks like this now:

    <h1 class="p-name entry-title{% if post.meta('background-image') %} entry-title-background{% endif %}" {% if post.meta('background-image') %} style="background-image: url({{ post.meta('background-image') }});"{% endif %} itemprop="headline name"><a href="{{ post.permalink() }}" class="u-url">{{ post.title()|e }}</a></h1><hr/>

Style

Both changes above include entry-title-background added to classes of those tags.

Disclaimer: I am not UX designed nor expert in CSS. This is how far I've gone to make it 'work'. In theme.css I've added following to the bottom of that file:

.entry-title-background {
    width: 100%;
    height: 300px;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    display: flex;
    align-items: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;

    color: white;
    text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
    -moz-text-shadow: 0 0 2px #000;
    -webkit-text-shadow: 0 0 2px #000;
}

.entry-title-background a {
    width: 100%;
    color: white;
}

Idea is to make title's container take full width, add some height (300px is completely arbitrary value) and set background image's rendering to 'cover'. Also, some work is done to centre title in the middle of the 'image' and make it more visible (bold with outline).

Conclusion

I never expected nikola to be this powerful, nor to do this in an hour or so. And, now I am sure that this is just a beginning of customising of my nikola powered web sites. Changes needed for image background have just started - I am already planning to extend templates to include other background-xxx additions to metadata like position, scale, type of background-size attribute (real pixel values, cover or contain for instance) and such.

Comments

Comments powered by Disqus