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:

<!-- Page Header -->
{% placeholder header or %}
<header class="masthead" style="background-image: url('{% static 'img/about-bg.jpg' %}')">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <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 %}
<!-- Page Header -->
{% placeholder header or %}
<header class="masthead" style="background-image: url('{% static 'img/about-bg.jpg' %}')">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <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 %}
<!-- Page Header -->
<header class="masthead" style="background-image: url('{% static 'img/about-bg.jpg' %}')">
  <div class="overlay"></div>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-md-10 mx-auto">
        <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 author.html inside templates/aldryn_newsblog/includes/ and replacing the content with {% include "aldryn_newsblog/includes/author.html" %} inside your article_detail.html and article.html files to create one easily maintainable source for the author.

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="masthead" style="background-image: url('{% static 'img/about-bg.jpg' %}')">

Replace this piece with: 

<header class="masthead" 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?