Chris Shaw

Chris Shaw

Lead Profile All Articles

I am an ardent software developer and eager lifelong learner of code. My passion is the python language with particular emphasis in the 'django' and  'opencv' packages. I have created this blog to share my e... Read More

Tutorials


Creating custom list and detailed layouts by overriding the aldryn_newsblog default templates.

Jan. 30, 2019 Chris Shaw 71 views

The Aldryn news/weblog application for django CMS come with some very handy plugins to list and display articles that can be very easily added to django CMS pages. Plugins contain their own template files that can be easily overridden to suit the overall look of the site.

To create templates that override the default plugin templates, we simply have to create new templates that have the same names and folder structure in our app templates folder. The screenshot on the right shows the folder structure of an example django project. The 'django CMS' app is located in the folder django_cms. Inside the templates subfolder, I have created the folder aldryn_newsblog and subfolders includes and plugins. This matches the templates folder structure of the Aldryn Newsblog addon and can be found on the addon's Github page. As a starting point, I copy the entire contents of these template folders from Github, but if you are confident that there are only a few files you need to override, just copy those.

There is some documentation on customising the news output that you can read though. Basically, article_detail.html is the template for displaying a single article in full, while article_list.html displays a list of articles, such as featured or latest. Both of these files populate the article from the file includes/article.html.

While I am a fan of DRY programming, I dont want my list or articles to resemble the detailed view of a single article. Firstly, duplicate includes/article.html to a new file includes/article_detailed.html.

To include this new file, edit article_detail.html and change

{% include "aldryn_newsblog/includes/article.html" with detail_view="true" %}
to
{% include "aldryn_newsblog/includes/article_detailed.html" %}

 

The variable with detail_view="true" has been removed as the new file will only serve a detailed view and any conditional statments can be removed.

We are ready to make our styling changes to includes/article_detailed.html. In a brief summary of the changes made to the file to the sample below:

  1. Removed all conditional references to the detailed_view variable.
  2. Re-ordered the  fields
  3. Applied Bootstrap3 formatting.

 

includes/article_detailed.html

{% load i18n staticfiles thumbnail cms_tags apphooks_config_tags %}
<article class="container article
    {% if article.is_featured %} featured{% endif %}
    {% if not article.published %} unpublished{% endif %}">

    <div class="row">
    {% if article.categories.exists %}
        <div class="col-sm-12 text-center">
        {% for category in article.categories.all %}
            <h3>{{ category.name }}</h3>
        {% endfor %}
        <hr>
      </div>
    {% endif %}

    <div class="col-sm-12 text-center">
      <h1>
        {% render_model article "title" %}
      </h1>
      <p>
        {% if article.is_featured %}<span><i class="fa fa-calendar" aria-hidden="true"> Featured</span>{% endif %}
        <span><i class="fa fa-calendar" aria-hidden="true"></i> {{ article.publishing_date|date }}</span>
        <span><i class="fa fa-user" aria-hidden="true"></i> {{ article.author }}</span>
        <span><i class="fa fa-eye" aria-hidden="true"></i> views<span>
        {% if not article.published %}<span><i class="fa fa-low-vision" aria-hidden="true"></i> unpublished</span>{% endif %}</p>
    </div>

    {% if article.featured_image_id %}
        <div class="col-sm-12">
            <img src="{% thumbnail article.featured_image 800x450 crop subject_location=article.featured_image.subject_location %}" alt="{{ article.featured_image.alt }}">
        </div>
    {% endif %}

    <div class="col-sm-12">
      {% render_model article "lead_in" %}
      {% render_placeholder article.content language placeholder_language %}
    </div>

    <div class="col-sm-12">
      {% include "aldryn_newsblog/includes/author.html" with author=article.author %}
    </div>

    {% if article.tags %}
        <div class="col-sm-12">
            {% for tag in article.tags.all %}
                <a href="{% namespace_url 'article-list-by-tag' tag=tag.slug namespace=namespace default='' %}">{{ tag.name }}</a>
            {% endfor %}
        </div>
    {% endif %}
    </div>
</article>

 

 


Categories: Tutorial
blog comments powered by Disqus