Now let’s head over to the blog detail page and adapt the header to match our theme, as seen here:

We need to move the title, sub-head and date to the header, all while displaying an attractive, custom background image. 

To do this, open “/templates/base.html” where our header is defined, and look for:

{% placeholder header or %}    
<!-- Set your background image for this header on the line below. -->
<header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="page-heading">
                    <h1>{% page_attribute "page_title" %}</h1>
                </div>
            </div>
        </div>
    </div>
</header>
{% endplaceholder %}

Then, insert {% block header %} above the code and {% endblock %} at the very end of the code.

This should be your result:

{% block header %}
    {% placeholder header or %}
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h1>{% page_attribute "page_title" %}</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
    {% endplaceholder %}
{% endblock %}

This allows us to overwrite our header in the Blog Detail view. Open "article_detail.html" inside “/templates/aldryn_newsblog/” and in between:

{% block title %}
    {‌{ article.title }} - {‌{ block.super }}
{% endblock %}

and

{% block newsblog_content %}
    {% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}
...

add the following code:

{% block header %}
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="page-heading">
                        <h1>{% page_attribute "page_title" %}</h1>
                    </div>
                </div>
            </div>
        </div>
    </header>
{% endblock %}

This is almost identical to the code we added in “/templates/base.html” – just without the placeholder declaration.

In the same file, replace the second line:

{% load i18n cms_tags apphooks_config_tags %}

with the following code:

{% load i18n staticfiles cms_tags apphooks_config_tags %}

Now replace:

<div class="page-heading">
    <h1>{% page_attribute "page_title" %}</h1>
</div>

with the following code:

<div class="post-heading">
    <h1>{% render_model article "title" "" "" "striptags" %}</h1>
    <h2 class="subheading">{% render_model article "lead_in" "" "" "striptags" %}</h2>
    <span class="meta">
        Posted by
        <a href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">
            {{ article.author.name }}
        </a>
        on {{ article.publishing_date|date:"F d, Y" }}
    </span>
</div>

Hit “Save” and preview your result.

___

Don’t Repeat Yourself (DRY)
Django’s template languages provide multiple mechanisms to build your site “DRY” (Don’t Repeat Yourself) so you don’t have to repeat the same actions over and over.
In this case, we recommend adding the content within <span class=”meta”> … </span> into a separate file in "date.html" inside “templates/aldryn_newsblog/includes/” and replacing the content with {% include "aldryn_newsblog/includes/date.html" %}inside your “article_detail.html” and “article.html” files to create one easily maintainable source for the date.

When doing this, don’t forget to add {% load apphooks_config_tags %} to the top of the file, otherwise you’ll receive an error that template loaders are missing.
___

Our title is currently displayed twice. Open "article.html" inside “templates/aldryn_newsblog/includes” and add {% if not detail_view %} before <div class="post-preview">  and {% endif %}  after the <hr>

The result should look like this:

{% if not detail_view %}
    <div class="post-preview">
        ...
    </div>
    <hr>
{% endif %}

Save "article.html".

Our last missing piece is the image. For this, we need to go to an article detail page.

Click on a blog entry in your latest articles under the page where you added the "Latest articles" plugin. Next, click “News & Blog” and then “Edit this Article” in the upper toolbar. Look for the “Featured Image” section inside the opened model. It will look like this:

We downloaded an example image from “Nasa Image of the Day” that is free to use. Download your own and drag and drop that image into the drop area. 

When choosing your own image, make sure it has dimensions similar to “/static/img/post-big.jpg,” which is about 1200 x 400 pixels. The larger the image, the better the quality.

Hit “Save” and open "article_detail.html" inside “/templates/aldryn_newsblog/.” Replace the second line to include all required loaders:

{% load i18n staticfiles cms_tags apphooks_config_tags %}

with the following code:

{% load i18n staticfiles thumbnail cms_tags apphooks_config_tags %}

Our background image currently shows the default “img/about-bg.jpg”:

<header class="intro-header" style="background-image: url({% static 'img/about-bg.jpg' %})">

Replace this piece with: 

<header class="intro-header" style="background-image: url(
{% if article.featured_image_id %}
    {% thumbnail article.featured_image 1200x400 crop subject_location=article.featured_image.subject_location %}
{% else %}
    {% static 'img/post-bg.jpg' %}
{% endif %}
)">

Save "article_detail.html".

The code we added does the following:

If there is an image, our site will display it with a size of 1200x400 pixels. Otherwise, it will use the default “img/post-bg.jpg” from the template, since the “Featured Image” setting is optional.

This wraps up the blog configuration part of our tutorial. We now have a fully functional blog!

Did this answer your question?