4 These templatetags is a hack making possible to insert 'content' in
5 some (maybe above the current or parent template) places.
7 More specifically, when we use these tags, there are some Nodes called
8 'containers' that are rendered after all other nodes are rendered, but placed
9 in it's right posistion. Using this hack, 'containers' may render
10 depending on variables in context that were generated by nodes placed anywhere in
11 template (maybe after it).
13 It's very useful in cases when you are reusing some template parts
14 very often. For example displaying comment list and comment submit form.
15 We write some template and put it into comments.html. Then every time
16 we need comments we just {% include "comments.html" %}.
17 But what if this part needs some js or css? Then we need to create
18 some comments-jscss.html and override some {% block head %}. IMHO this
19 is quite inconvenient.
21 Using this tool we can insert js and css into head
22 directly from comments.html
27 1. Create convenient way to include media resources in head of HTML page.
28 2. Handle repetition of resource includes.
29 3. Make it possible to require resources from included templates.
30 4. Keep the order of resource includes from different places.
35 1. (required) add 'insert_above' in INSTALLED_APPS in your settings.py
37 2. (optional) add these two lines of code somewhere in your project where
38 they will run for sure. For example in urls.py
41 from django.template.loader import add_to_builtins
42 add_to_builtins('insert_above.templatetags.insert_tags')
48 1. {% insert_handler %}
49 2. {% container name %}
50 3. {% media_container name %}
51 4. {% insert_str container str %}
52 5. {% insert container %}{% endinsert %}
53 6. media_tag filter simply converts `ga.js` into `<script type='text/javascript' src='/static/ga.js'></script>`
58 1. `{% container %}` or `{% media_container %}` tags must NOT be in other `{% block %}`.
59 2. `{% insert_handler %}` ought to be at ther very beginning of base template.
64 1. `IA_USE_MEDIA_PREFIX`, by default True
65 2. `IA_MEDIA_PREFIX`, if not set `STATIC_URL` is used, if not set `MEDIA_URL` is used, if not set '/media/' is used
66 3. `DEBUG`, if True logs how much time spent on rendering
67 4. `IA_JS_FORMAT`, by default `<script type='text/javascript' src='{URL}'></script>`
68 5. `IA_CSS_FORMAT`, by default `<link rel='stylesheet' href='{URL}' type='text/css' />`
69 6. `IA_MEDIA_EXTENSION_FORMAT_MAP`, by default `{'css' : CSS_FORMAT, '.js' : JS_FORMAT}`
74 Let's analyze an example.
83 <script type='text/javascript' src='{{ MEDIA_URL }}js/jquery.min.js'></script>
84 {% media_container media %}
86 $(document).ready(function(){
98 Base template creating blocks and containers..
103 {% extends "base.html" %}
106 {% insert_str media "js/mathjax.js" %}
107 {% block header %}{% endblock %}
108 {% block menu %}{% include "blog/menu.html" %}{% endblock %}
109 {% block text %}{% endblock %}
110 {% block footer %}{% endblock %}
114 Extending content block. Requiring js/mathjax.js resource into 'media' container.
119 {% insert_str media "js/animated.menu.js" %}
120 {% insert_str media "css/animated.menu.css" %}
122 $('ul.menu').each(function(){
123 $(this).superanimation();
126 <ul id='blog-menu' class='menu'>
133 Requiring js/animated.menu.js and css/animated.menu.css into "media" container.
134 Inserting javascript code into "ready" container.
136 blog/post_detail.html
139 {% extends "blog/base.html" %}
141 {% block header %}{{ title }}{% endblock %}
144 {% insert_str media "js/mathjax.js" %}
153 Implementing blocks and requiring js/mathjax.js into media.
157 Template('blog/post_detail.html').render(Context({'title': 'Hello', 'text': 'World'}))
164 <script type='text/javascript' src='/media/js/jquery.min.js'></script>
165 <script type='text/javascript' src='/media/js/mathjax.js'></script>
166 <script type='text/javascript' src='/media/js/animated.menu.js'></script>
167 <link rel="stylesheet" href="/media/css/animated.menu.css" type="text/css" />
169 $(document).ready(function(){
170 $('ul.menu').each(function(){
171 $(this).superanimation();
178 <ul id='blog-menu' class='menu'>
192 1. `js/mathjax.js` automatically becomes `<script type='text/javascript' src='/media/js/mathjax.js'></script>`
193 and `css/animated.menu.css` becomes `<link rel="stylesheet" href="/media/css/animated.menu.css" type="text/css" />`
194 2. inserting from included template is possible
195 3. any text may be inserted to any container. Here we insert javascript code in `$(document).ready(function(){});`
196 4. `js/mathjax.js` was required twice, but included only once.
197 5. The order of included resources is kept.
204 + **fix MEDIA_URL setting**
205 if STATIC_URL is not set in settings, it's value is None by default in new versions of Django.
206 Now we check if STATIC_URL is None, then use MEDIA_URL
210 + added new tag `{% insert_form container form %}`
211 + added new tag `{% insert_form container form.media %}`