Modify The NEWS & Blog Template

Django CMS is a new toy for me and I’m very much enjoying exploring its capabilities! I wanted a blog on my website and I chose to use the ALDRYN NEWS & BLOG addon.

By default the look of the news & blog addon is, shall we say, minimalist – granted this is by design. This article is to help other newbies with little or know understanding how addons can be modified.

First of all, pip installs addons into the virtual environment. For my setup this is:

/home/foo/bar/lib/python2.7/site-packages/aldryn_newsblog/templates/aldryn_newsblog

where foo is the user directory and bar is the virtual environment. We are interested in the files inside the templates sub-directory – especially article.html, which is an includes.

I won’t go into the ins and outs of how this all works, but the detail flag is used by CMS to decide if the code is a preview or the full article:

{% load i18n staticfiles thumbnail cms_tags apphooks_config_tags %}
	<article class="article
	{% if article.is_featured %} featured{% endif %}
	{% if not article.published %} unpublished{% endif %}">
	{# The image is only shown on the detail view by using the condition "and detail_view" #}
	{% if not detail_view %}
		<!-- Preview code goes here -->
	{% else %}
		<!-- Main article code goes here -->
	{% endif %}
</article>

For my page I wanted a large thumbnail image with the title displayed at the bottom. I also wanted a visual indicator reflecting the article’s category that was done by adding javascript to change the div background colour.

HTML

<a class="news-a" href="{% namespace_url 'article-detail' article.slug namespace=namespace default='' %}">
	<div class="news-background" style="background-image:url({% thumbnail article.featured_image 300x169 crop subject_location=article.featured_image.subject_location %});">
		<div class="news-title-container">
			<div id="{{ article.slug }}" class="news-cat-bar"></div>
			<script>articleColor("{{ article.categories.first.name }}", "{{ article.slug }}");</script>
			<h2 class="news-title">{% render_model article "title" %}</h1>
		</div>
	</div>
</a>

CSS

.news-a {
    display: block;
    margin: 2px;
}
.news-background {
    position: relative;
    width: 300px;
    height: 169px;
    background-size: contain;
}
.news-cat-bar {
    width: 100%;
    height: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
.news-title {
    color: white;
}
.news-title-container {
    width: 100%;
    background-color: black;
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 0px 10px 0px 10px;
}

Javascript

function articleColor(cat, id) {
    var col = "white";
    if (cat == "Online") {
        col = "green";
    } else if (cat == "Life") {
        col = "red";
    }
    document.getElementById(id).style.backgroundColor = col;
    return;
}

The important things to remember to include amongst the HTML are the:

• article’s title: {% render_model article "title" %}
• uploaded featured image: {% thumbnail article.featured_image 800x450 crop subject_location=article.featured_image.subject_location %}
• article’s author: {{ article.author }}
• categories: {{ category.name }}
• publishing date: {{ article.publishing_date|date }}
• lead in: {% render_model article "lead_in" %}
• main article content: {% render_placeholder article.content language placeholder_language %}

The code for the main article can be similarly