Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

112 lines (103 sloc) 5.412 kb
<!DOCTYPE html>
<title>Source | This is the Tagline - A project by Knight-Mozilla OpenNews</title>
<script src=""></script>
<link href=',300' rel='stylesheet' type='text/css'>
<link href="media/bootstrap.css" rel='stylesheet' type='text/css'>
<link href="media/app.css" rel='stylesheet' type='text/css'>
<link href="media/font-awesome.css" rel='stylesheet' type='text/css'>
<!-- Initialise jQuery Syntax Highlighter -->
<script src="media/jquery.syntaxhighlighter.min.js"></script>
<script type="text/javascript">
<header id="topbar">
<div class="container">
<a href=""><img src="media/opennewsmini.png" class="opennews"></a>
<img src="media/sourcemin.png" class="sourcelogomin">
<ul id="navigation">
<li><a href="">Projects</a>
<li><a href="">Community</a>
<li><a href="">Code</a>
<div class="content">
<div class="container page-block">
<img src="media/source_logo.png" class="main-logo">
<div class="container">
<h2>This article has some article blocks</h2>
<h4>The ProPublica News Apps Team explains how they built a 'Tangled Web' of election contribution data</h4>
<div class="byline">
<h6 class="date">June 2, 2012</h6>
<h6 class="byline-name">By <a href="">Erin Kissane</a>
<h5 class="list-header">Code</h5>
<ul class="link-list">
<li><i class="icon-list-alt"></i><a href="">Simple Tiles Streets</a></li>
<h5 class="list-header">People</h5>
<ul class="link-list">
<li><i class="icon-user"></i><a href="people_detail_view.html">Jeff Larson</a></li>
<h5 class="list-header">Organizations</h5>
<ul class="link-list">
<li><i class="icon-cogs"></i><a href="">ProPublica</a></li>
<p>If you have previously worked with Django templates, you should
find Jinja2 very familiar. In fact, most of the syntax elements look and
work the same.<p>However, Jinja2 provides some more syntax elements covered in the documentation and some work a bit different.<p>This section covers the template changes. As the API is fundamentally different we won’t cover it here.</p>
<div class="page-block">
<h3 id="method-calls">Method calls</h3>
<p>In Django method calls work implicitly. With Jinja2 you have to specify that you want to call an object. Thus this Django code:
<pre class="highlight">{% for page in user.get_created_pages %}<br> ...<br>{% endfor %}</pre><p>will look like this in Jinja:
<p><pre class="highlight">{% for page in user.get_created_pages() %}<br> ...<br>{% endfor %}</pre><p>This allows you to pass variables to the function which is also used for macros which is not possible in Django.<p></p>
<div class="page-block">
<h3 id="conditions">Conditions</h3>
<p>In Django you can use the following constructs to check for equality:<p></p>
<pre class="highlight">{% ifequal foo "bar" %}<br> ...<br>{% else %}<br> ...<br>{% endifequal %}</pre>
<p>In Jinja2 you can use the normal if statement in combination with operators:<p>
<pre class="highlight">{% if foo == 'bar' %}<br> ...<br>{% else %}<br> ...<br>{% endif %}</pre>
<p>You can also have multiple elif branches in your template:<p><pre class="highlight">{% if something %}<br> ...<br>{% elif otherthing %}<br> ...<br>{% elif foothing %}<br> ...<br>{% else %}<br> ...<br>{% endif %}</pre><p></p>
<div class="page-block">
<h3 id="filter-arguments">Filter arguments</h3>
<p>Jinja2 provides more than one argument for filters. Also the
syntax for argument passing is different. A template that looks like
this in Django:<p></p><pre class="highlight">{{ items|join:", " }}</pre><p>looks like this in Jinja2:<p><pre class="highlight">{{ items|join(', ') }}</pre><p>In fact it’s a bit more verbose but it allows different types of arguments - including variables - and more than one of them.<p></p>
<footer class="container">
<a rel="license" href=""><img alt="Creative Commons License" style="border-width:0" src="" /></a><br />
<p>Source is a project of Knight-Mozilla OpenNews.
<script type="text/javascript">
$(document).ready(function () {
var top = $('.main-logo').offset().top - parseFloat($('.main-logo').css('margin-top').replace(/auto/, 0));
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y >= top) {
// if so, add the fixed class
} else {
// otherwise remove it
Jump to Line
Something went wrong with that request. Please try again.