How can I override an inherited container in Django templates? - django

I have a base template like this.
base.html
<div class="container">
{% block content %}
{% endblock content %}
</div>
The problem is in a few pages that inherit from it (i.e., extend base.html ) I don't want the outer container around the content. Is there anyway to achieve this?

If you can change a bit your base.html template
{% block content_wrapper %}
<div class="container">
{% block content %}
{% endblock content %}
</div>
{% endblock content_wrapper %}
Then in your few specifics template you can override the content_wrapper block.

The easiest way as I see it is to create another base template that you extend. Perhaps calling it base-purpose.html. Another way could be to use the {% include 'another.html' %} tag. This might be able to solve your problem as well.
See the discussion between include and extend on stackoverflow

Related

How to use JavaScript in included components in Django?

In short, how to use JavaScript in the component that will be then included in the main page?
A standard approach in Django templates is to create a base.html template and then extend it. That base template usually has blocks like content, extra_js, and extra_css. The extended template looks like
{% extend 'base.html' %}
{% block content %}
<div>
some content
</div>
{% endblock %}
{% block extra_js %}
# some js code here
{% endblock %}
I need to create a component that will be included on several pages and I need to use JavaScript inside that component. I know that it will be included only on pages that extend base.html, the page that includes it will look like
{% extend 'base.html' %}
{% block content %}
<div>
{% include 'component.html' %}
</div>
{% endblock %}
{% block extra_js %}
# some js code here
{% endblock %}
However, component.html knows nothing about extra_js block because it doesn't extend base.html, I cannot use that block in component.html, and if I just put some JavaScript code in it then after the template is rendered any JavaScript in component.html will end up being in the middle of the body of the document, will be executed before libraries like jQuery are imported and will not work. What is the right way to work around it?

Is it possible to use a block tag ({% block %}) from base html template two or more times in derived html file in Django

I want to be able to reuse the same block tag multiple times in derived html.
something like:
base.html
<body>
{% block panel %}
# some basic panel structure inside this block
{% endblock %}
</body>
derived.html
{% extends base.html %}
--first panel
<div class="col">
{% block panel %}
# override things like panel header
{% endblock %}
</div>
--second panel
<div class="col">
{% block panel %}
# again override some panel stuff from base template
{% endblock %}
</div>
Is there anyway i can achieve this in Django?
No, it will result in template syntax error. The best you can do is to include as many block tags as you require in base and reuse them. Or you can even loop the blocks in base.
I haven't tested it out, but theoretically it should work. In your base, create a loop block, in below example it creates 6 blocks, block content1..... content6
{% for i in '123456' %}
{% block content{{i}} %}
Foo
{% endblock content{{i}} %}
{% endfor %}
No, you can not. The best way to do it is, assign each block for each panel or if you have multipanel then run the loop for the block.
In your current case (i assuming two panel in single derived file) it would be like this-
base.html
<body>
{% block content %}
<!-- all your panels -->
{% endblock %}
</body>
derived.html
{% extends "base.html" %}
{% block content %}
 <div class="col">
<!-- First panel -->
<!-- Second panel -->
</div>
{% endblock %}
The block is just for reducing the redundant work which unique to each extended file. so you can only referred it to single time in any extended file.

Passing variables to a Django template extended by several views

I have a Django template base.html that I extend in several views. Each view adds a content block and provides the information needed to render that block.
Now I want to change base.html to show some system status information. Does this mean I need to update every single view to request this info from the DB and pass it into the template, or is there some better way to do it?
base.html
<body>
<div>
{{ system.status }}
</div>
<div>
{% block content %}
{% endblock %}
</div>
</body>
view1.html, view2.html, view3.html, etc.
{% extends 'base.html' %}
{% block content %}
<div>
{{ view_specific.info }}
</div>
{% endblock %}
Should every view be made to provide the system object?
Thanks Daniel Roseman, solved it with a custom inclusion tag.

How do I wrap some html around a block in a django template?

I have a base template (base.html) like this:
<doctype html> etc etc
{% block content %}{% endblock %}
It is used by many other templates in my site, but I have a third party app that comes with its own templates which inherit from tp.html which in turn inherits from base.html. These templates are mostly fine but I need their content blocks to be wrapped in a div. I could change the third party templates to use a sub_content block and modify tp.html like so:
{% extends "base.html" %}
{% block content %}
<div class="third-party-app">
{% block sub_content %}{% endblock %}
</div>
{% endbock %}
but I don't want to have to modify all the templates in the third party app.
What I want is something similar to {$smarty.block.child} found in Smarty templates, or a way to achive the same. Any ideas?
You can use block.super like so:
3rd party template:
{% block content %}
<h1>3rd Party Content</h1>
{% endblock %}
your template:
{% block content %}
<div class="wrapper">{{ block.super }}</div>
{% endblock content %}
In base.html, add pre_content and post_content blocks either side of {% block content %}, then in tp.html add your and tags to these blocks. Slightly inelegant, but it'll work and you won't have to modify all your templates.

How to use {% with %} along with {% include %} -- Django

For example, I have a template file called:
filter.html
{{ title }}
code...
What I'd like to do is, on a separate template:
{% with "Filter by Types" as title %}
{% include "filter.html" %}
{% endwith %}
Currently it can't be done. Could someone explain why that is and an alternative way to achieve this?
Background context:
The app base is used for multiple sites. The site admin would only be able to edit the template files to give them a degree of customization, but not the views.py or other core files. So the {{ title }} variable can't really be sent by the views.py.
I might be missing something but why not just use extends and block tags?
base.html
{% block title %}Default title{% endblock %}
filter.html
{% extends "base.html" %}
{% block title %}Filter by Types{% endblock %}
Check out the documentation on extends, blocks and template inheritance for more info.