Custom Template Tags - Part 2: Once around the block

In last weeks tutorial we saw how to create simple tags for inclusion in django templates. This week we shall look at how to create block style tags to further to further simplify some common tasks.

Say for example your site design called for a series of articles to be displayed one after another, each one in a box that shared a common style. Such as the (particularly simple) example below:

<div class="content_box">
<h1 class="box_heading">Content Title</h1>
Content
</div>

From what we covered last week it would be possible to create two simple tags, one to represent the opening tags and top of the box, the other to represent the closing tags and the bottom of the box. A cleaner way however would be to create a block style tag, allowing something like the following to be used:

{% content_box "Content Title" %}
Content
{% endcontent_box %}

In order to do this add the following to the file content_tags.py which should be created in the templatetags folder from last week.

from django import template
register = template.Library()

@register.tag(name="content_box")
def do_content_box(parser, token):
try:
tag_name, content_heading = token.split_contents()
except ValueError:
raise template.TemplateSyntaxError, "%r tag requires\
exactly one argument" % token.contents.split()[0]
content_heading = template.Variable(content_heading)
nodelist = parser.parse(('endcontent_box',))
parser.delete_first_token()
return FormatContentBoxNode(content_heading, nodelist)

class FormatContentBoxNode(template.Node):
def __init__(self, content_heading, nodelist):
self.content_heading = content_heading
self.nodelist = nodelist

def render(self, context):
content = self.nodelist.render(context)
return """<div class="content_box">
<h1 class="box_heading">%(title)s</h1>
%(content)s
</div>""" % {'title':self.content_heading,
'content':content,}

This code consists of two parts, the function do_content_box is the main tag code. The parser variable is there to provide access to the main body of the template and the token variable is there to provide access to any variables that may have been passed in to the tag. Variables are extracted from token using split_contents() function. This is a special type of split which ensures that quotes are properly preserved rather than just splitting on any white space going. It should also be noted that the first value returned by split_contents() will always be the name of the tag. The next task is to turn the split parameters into Variable objects. This means that django will save anything encased in quotes as a string, whilst attempting to resolve anything else as a context variable.

The main content is extracted from parser by using the parse(List of tags to stop parsing at) function. This returns a list of nodes that we pass into the second part - the FormatContentBoxNode (more on that shortly however). Once the data you require has been parsed then the parser needs to be told to delete the token it just hit with a call to delete_first_token() otherwise it will attempt to parse it a second time which generally isn't a good idea. Finally we pass our extracted data to a FormatContentBoxNode and return it.

The FormatContentBoxNode is a class that inherits from template.Node and is responsible for saying how the tag should be rendered. The __init__ function is fairly basic just storing whatever it's given for later use. The render function is the important one though as this does all of the hard work. In the example given I've included the snippet of html to be rendered as a string but it could quite easily use a Template that's been rendered to a string (in the same way you might render something in a view).

What is important to note about this function is to make sure that you call render(context) on any node lists that you pass into it. This ensures that django processes all the content within your tags too (so that any variables etc. are expanded correctly and not just output as code). The rest of the function is just simple formatting to prepare the content for output.

Now you can see it in action if you create a new view using the following code and point a url at it:

from django.template import Template,Context
from django.http import HttpResponse
def tag_test(request):
test_list=['Item 1','Item 2','Third time lucky']
t = Template("""{% load content_tags %}
<html>
<head><title>Tag Test 2</title></head>
<body>
{% content_box "Some uniformly formatted content" %}
This text should appear within the div.<br />
Variables can also be used in these tags too such as {{ test_list }}.
{% endcontent_box %}
</body>
</html>""")
return HttpResponse(t.render(Context({'test_list':test_list})))

Now that we've created a basic version of the block style template tag it's time to expand on it to include a second optional tag that delimits the text within. To expand on the first example we will look at how you can add a 'Read More' point in the text entered so that everything below that point will be concealed until the reader clicks to say they wish to read more about it. The code below demonstrates how to do this (all changes from the original example have been highlighted).

@register.tag(name="content_box")
def do_content_box(parser, token):
try:
tag_name, content_heading = token.split_contents()
except ValueError:
raise template.TemplateSyntaxError, "%r tag requires exactly one argument" % token.contents.split()[0]
content_heading = template.Variable(content_heading)
sample_nodelist = parser.parse(('readmore','endcontent_box',))
readmore_nodelist = None
ptoken = parser.next_token()
if ptoken.contents == 'readmore':
readmore_nodelist = parser.parse(('endcontent_box',))
parser.delete_first_token()
return FormatContentBoxNode(content_heading, sample_nodelist, readmore_nodelist)

class FormatContentBoxNode(template.Node):
def __init__(self, content_heading, sample_nodelist, readmore_nodelist):
self.content_heading = content_heading
self.sample_nodelist = sample_nodelist
self.readmore_nodelist = readmore_nodelist

def render(self, context):
sample_content = self.sample_nodelist.render(context)
if self.readmore_nodelist is not None:
further_content = self.readmore_nodelist.render(context)
return """<div class="content_box">
<script type="text/javascript">
function show_readmore() {
document.getElementById('morelink').style.display='none';
document.getElementById('moretext').style.display='block';
return false;
</script>
<h1 class="box_heading">%(title)s</h1>
%(sample_content)s<br />
<a id="morelink" href="#" onclick="return show_readmore();">Read More...</a>
<div id="moretext" style="display:none">%(further_content)s</div>
</div>""" % {'title':self.content_heading,
'sample_content':sample_content,
'further_content':further_content,}
else:
return """<div class="content_box">
<h1 class="box_heading">%(title)s</h1>
%(sample_content)s
</div>""" % {'title':self.content_heading,
'sample_content':sample_content,}

The first change is to the parsing. parse has been given an extra option of 'readmore' the first time through telling it that it should stop if it hits either a 'readmore' or an 'endcontent_box' tag. The second change is that we use next_token() in order to process the token instead of deleting it. This allows us to check what the name of the tag we hit was and if it was the 'readmore' one we can parse the rest of the data until 'endcontent_box' is hit as was done in the first example.

The extra data is then passed through to the FormatContentBoxNode which checks if it was given any readmore text and if so it includes it in a hidden div and includes a read more link to allow it to be made visible (apologies for the quality of the javascript but I wanted something quick and simple to get the point across). In the case where no read more text is included we just display things as before.

Finally this can be tried by putting the code below in a view and pointing a url at it.

from django.template import Template,Context
from django.http import HttpResponse
def tag_test(request):
test_list=['Item 1','Item 2','Third time lucky']
t = Template("""{% load content_tags %}
<html>
<head><title>Tag Test 2</title></head>
<body>
{% content_box "Some uniformly formatted content" %}
This text should appear within the div.<br />
Variables can also be used in these tags too such as {{ test_list }}.
{% readmore %}
Only people who are interested in seeing more will be able to see this
text!
{% endcontent_box %}
</body>
</html>""")
return HttpResponse(t.render(Context({'test_list':test_list})))

That concludes the tutorial on block style template tags. If there's anything here that you would like more advice on, or any topics you would like for a future tutorial then feel free to drop me a comment below. Next time we shall be finishing talking about custom template items by looking at how to create custom filters.

Custom Template Tags - Part 1: Keeping It Simple

If you've ever created a django template before then you'll have used a template tag in one form or another. This tutorial will show you how you can create a simple template tag to help automate a common task.

The simplest of the Simple template tags are used for those cases where you find that you have a chunk of HTML code which is used in multiple places within your code, but because the location isn't static it can't be included in a base template. These tags would take no parameters at all and would output the same chunk of HTML every time. An example of this in the default tags would be {% debug %} which will output a load of debug information at the point the tag is placed.

The next level of complexity for template tags comes by allowing parameters into the simple tags. This could be used for things where you require a consistent format or where you want to run a piece of python code over a variable before displaying it. An example of one if these in the default tags would be {% url url_name %} which we saw last week in the tutorial on naming urls.

Since both of these types of tags are created on a similar way this tutorial will demonstrate how to create one that takes parameters. The example to be used this week will be for a tag that takes a list as a parameter and formats it into a series of bullet points.

The first thing to do is to create a directory named templatetags within your application directory. This is a special directory that django will look in whenever you try to import a set of tags (it will look for this directory in every installed application). In the newly-created directory create a blank file named __init__.py (which is required by python) and a file name list_formatters.py which should contain the following code:

from django import template

register = template.Library()

@register.simple_tag
def format_list(input_list):
return "<ul>\n <li>%s</li>\n<ul>" % "</li>\n <li>".join(input_list)

This code basically registers the function with the template library and says that it's a simple tag. The function then takes its only input and joins it together with some HTML to produce a bullet point style list.

Now we have generated the code for the tag, we can import it into a template and try it out. Create a new view using the following code and point a url at it:

from django.template import Template,Context
from django.http import HttpResponse
def tag_test(request):
test_list=['Item 1','Item 2','Third time lucky']
t = Template("""{% load list_formatters %}
<html>
<head><title>Tag Test</title></head>
<body>
{% format_list test_list %}
</body>
</html>""")
return HttpResponse(t.render(Context({'test_list':test_list})))

View this newly-created page and you should see that the list passed into the context has been formatted as a series of bullet points.

The next tutorial will look at block template tags i.e. ones that take a block of text/code in the middle of them like {% block %}{% endblock %} or {% if condition %}{% else %}{% endif %}

Progress Update

Just a brief update to let you know what the current status of the site is.

I'm in the process of starting up a project on google code for some of the modules and other things I will be working on and talking about in this blog. I hope to get that up there within the next couple of days.

Furthermore this weekend should see the second in my series of django tips where I will be looking at creating your own simple template tags so if you want to know more, watch this space!.

Name your URLs

Today's tip will be delving into the subject of url naming. Whilst this is touched on in part 4 of the django tutorial it is pretty much a blink and you'll miss it affair for what is an incredibly useful tool and thus warrants further consideration.

Take the following snippet of code, extracted from a typical project, as an example:

# File: project/urls.py
from django.conf.urls.defaults import *

urlpatterns = patterns('',
# Include mysite urls
(r'^mysite/', include('mysite.urls')),
)

# File: project/mysite/urls.py
from django.conf.urls.defaults import *
from views import display_homepage, display_about, display_article,\
display_comment

urlpatterns = patterns('',
# Display the homepage.
(r'^$, display_homepage),
# Display the about page.
(r'^about/$', display_about),
# Display an index of all articles.
(r'^article/$', display_article),
# Display a specific article.
(r'^article/(?P<article_id>\d+)/$', display_article),
# Display a specific comment for a specific article.
(r'^article/(?P<article_id>\d+)/comment/(?P<comment_id>\d+)/$',
display_comment),
)

These url files have already been pretty well defined, but they will require urls to be hard coded throughout the views increasing the chance that a link could be malformed and creating a potential logistical nightmare should a url ever have to be changed. This is a perfect time to start naming things!

# File: project/mysite/urls.py
from django.conf.urls.defaults import *

urlpatterns = patterns('mysite.views',
# Display the homepage.
url(r'^$, 'display_homepage', name='mysite_homepage'),
# Display the about page.
url(r'^about/$', 'display_about', name='mysite_about'),
# Display an index of all articles.
url(r'^article/$', 'display_article', name='mysite_article_index'),
# Display a specific article.
url(r'^article/(?P<article_id>\d+)/$',
'display_article', name='mysite_article_by_id'),
# Display all the comments for a specific article.
url(r'^article/(?P<article_id>\d+)/comment/$',
'display_comment', name='mysite_comment_index'),
# Display a specific comment for a specific article.
url(r'^article/(?P<article_id>\d+)/comment/(?P<comment_id>\d+)/$',
'display_comment', name='mysite_comment_by_id'),
)

The first difference that you might notice is that each entry passed in to patterns is now the result of a call to url rather than just being a simple tuple. Internally this doesn't change much as it's pretty much the first thing django does with each entry when it gets them anyway but by doing this yourself it allows you to pass a value in to the name argument. Which leads nicely to the other change made to these files which is the names themselves. Each url entry now has a name which as you can see I've formed from the name of the application and the description of the view.

Now that we've got the names in place we can get around to the good part, ensuring that we no longer have urls hard coded in our project. For inserting urls into templates we can use the template tag aptly named url so where you once had
<a href="/mysite/about/">About This Site</a>
you would now have
<a href="{% url mysite_about %}">About This Site</a>
whilst this may look a little verbose for the simple example given here, if we were to change the url for the about page to about_us/ then one change to the urls.py file would be sufficient to change every occurrence throughout the entire site.

Next we can go about replacing the various instances for the more complex urls, and this is where the url tag really begins to shine as what once would have been
<a href="/mysite/article/{{ article.id }}/comment/{{ comment.id }}/">{{ comment.title }}</a>
becomes
<a href="{% url mysite_comment_by_id article.id comment.id %}/">{{ comment.title }}</a>
By adding parameters one after another this will ensure that they are inserted into the correct place in the url and that if any part of the url changes it will update them all automatically. The only stipulation on any changes is that any parameters must stay in the same order.

Whilst the url tag allows us to eliminate hard coded urls from templates it can't be used within normal python code. For this you need to call upon the reverse function like so:

# File: project/mysite/views.py
from django.core.urlresolvers import reverse
from django.shortcuts import render_to_response

def display_comment_link(request, article_id, comment_id):
"""A function that for some reason passes two urls to a template for display."""
comment_link_url = reverse('mysite_comment_by_id',
kwargs={'article_id':article_id,
'comment_id':comment_id,
}
)
article_link_url = reverse('mysite_article_by_id',
kwargs={'article_id':article_id,}
)
return render_to_response('mysite/display_comment_link.html',
{ 'comment_link_url':comment_link_url,
'article_link_url':article_link_url,
}
)

Now whilst this function is fairly pointless it demonstrates how you can generate the urls programmatically and thus eliminate the need for hard coding throughout your code.

Unfortunately there are still going to be times where you will be unable to use named urls within your code. Luckily these are few and far between and exist solely when the url regular expression contains a choice separated by a | character. In these cases the reverse function will be unable to tell which option should be used and so fail to generate a result. Hopefully the django team will come up with a solution for this issue in the near future, until then if you wish to use naming for those kinds of urls then the regular expression will need to be split up into one entry per combination of options (although this may not be feasible if the expression is particularly complex with many sets of options).

So we have reached the conclusion of this first set of tips on using django. I hope it has been of some use and that going forward your urls will remain manageable. If you have any questions feel free to leave a comment below, and if you are interested in further django tips feel free to register as a follower, or just add the site's feed to your aggregator.

So You're Interested In Django?

For those of you that don't know, django is a high level python web framework that can be used to generate potentially complex web sites with a minimal amount of effort.

This blog will be looking at some of the more advanced aspects available to a django programmer in an attempt to reduce the effort required in your site even further.  What this blog wont be featuring however is a guide to starting up a django site, as this information is already freely available on the django project website http://www.djangoproject.com (in particular the tutorial available at http://docs.djangoproject.com/en/dev/intro/tutorial01/ is a good place to start). Although I will be happy to offer any advice to anyone having trouble getting started.