Django - Generalising a Template with Optional Sidebar

Question

I have a working solution for a template that allows for optional sidebars. Depending on the options selected by the user; significant DOM manipulations occur.

The working solution is unnecessarily large and features some code duplication. It also doesn't extend nicely.

I'm looking for a far more generic solution. One that allows for easier extending or abstracting so as to not have to repeat myself for every page that features a sidebar.

The Working Solution

{% extends "app/base.html" %}

{% load wagtailcore_tags %}

{% block content %}
    {% if self.sidebar == "left" %}
        <div class="row">
            <div class="4u 12u(mobile)">
                {% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
            </div>
            <div class="8u 12u(mobile) important(mobile)">
                <article class="box post">
                    {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
                    {{ self.body|richtext }}
                    {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
                </article>
            </div>
        </div>
    {% elif self.sidebar == "right" %}
        <div class="row">
            <div class="8u 12u(mobile)">
                <article class="box post">
                    {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
                    {{ self.body|richtext }}
                    {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
                </article>
            </div>
            <div class="4u 12u(mobile)">
                {% include "app/includes/sidebar.html" with sidebar_items=self.sidebar_items.all %}
            </div>
        </div>
    {% else %}
        <article class="box post">
            {% include "app/includes/banner.html" with feed_image=self.feed_image only %}
            {{ self.body|richtext }}
            {% include "app/includes/related_links.html" with related_links=self.related_links.all only %}
        </article>
    {% endif %}
{% endblock %}

{% block content %} is first defined here in app/base.html:

    <div id="main-wrapper">
        <div class="container">
            <!-- <article class="box post"> -->
              {% block content %}{% endblock %}
              <!-- {% include 'app/includes/prev_next.html' %} -->
            <!-- </article> -->
        </div>
    </div>

And sidebar.html looks like this:

{% load wagtailimages_tags %}
{% for sidebar_item in sidebar_items %}
    <section class="box">
        {% image sidebar_item.image original as img %}
        <a href="{{ sidebar_item.link }}"" class="image featured"><img src="{{ img.url }}" alt="" /></a>
        <header>
            <h3>{{ sidebar_item.title }}</h3>
        </header>
        <p>{{ sidebar_item.body }}</p>
        {% if sidebar_item.button_text %}
            <footer>
                <a href="{{ sidebar_item.link }}" class="button alt">{{ sidebar_item.button_text }}</a>
            </footer>
        {% endif %}
    </section>
{% endfor %}

My initial attempt at generalising it was to try to do all of the conditionals in app/base.html but I faced issues when it came to optionally the location of {{ block content }}.

Any help greatly appreciated.

Answer 1

If the condition to decide type of sidebar are being decided and supplied by the views.py function serving the page, then the best approach would be to simply make different template for each different page.

This solution sounds overly simple, but if correctly modularized(in terms of all the common code being kept in a basefile and being extended as and when needed), this would be the best approach. Even though the number of other templates might increase, it will give shorter load times because of smaller HTML snippets.

In case you do not want the conditional decisions being handled by views.py , you can alternatively use AJAX, and asynchronously change the template being viewed without causing a reload.

Hope this helps!