Working on my first Django project. New to templates and inheritance.
I'm using Bootstrap and want a splashy homepage. So I don't want sidebars, just Jumbotron.
But, my index.html inherits from base.html and displays my sidebars which I do want in every other page but my home page. I want everything else, nav, footer, etc. to inherit.
My base.html:
{% block right_panel %}
blah blah blah
{% endblock %}
Is there a way to not inherit this block in my index.html?
Or do I make a standalone index.html template with all of the block from base.html minus those I don't want to display?
What's best practice?
EDIT
Here's the offending piece in base.html:
<div class="col-md-3 right">
{% nevercache %}
{% include "includes/user_panel.html" %}
{% endnevercache %}
<div class="panel panel-default">
<div class="panel-body">
{% block right_panel %}
{% ifinstalled mezzanine.twitter %}
{% include "twitter/tweets.html" %}
{% endifinstalled %}
{% endblock %}
</div>
</div>
</div>
The CSS is rendering: <div class="panel-body">
My page.html:
{% extends "base.html" %}
<!-- no right-panel content-->
{% block right_panel %}{% endblock %}
{% load mezzanine_tags keyword_tags %}
{% block meta_title %}{{ page.meta_title }}{% endblock %}
{% block meta_keywords %}{% metablock %}
{% keywords_for page as keywords %}
{% for keyword in keywords %}
{% if not forloop.first %}, {% endif %}
{{ keyword }}
{% endfor %}
{% endmetablock %}{% endblock %}
{% block meta_description %}{% metablock %}
{{ page.description }}
{% endmetablock %}{% endblock %}
{% block title %}
{% editable page.title %}{{ page.title }}{% endeditable %}
{% endblock %}
{% block main %}
{% endblock %}
When I add:
`{% block right_panel %}{% endblock %}
to the top of page.html, the content doesn't render.
What's the best approach? Should I make a new block and wrap it around the that is being styled and then leave it empty in other templates? Or should I move the offending chunk from base.html to another template file and include it on pages where I want it rendered.
Also, another thing. If I remove {% block right_panel %}{% endblock %} from page.html and put it in gallery.html which inherits from page.html, the content still renders.
Just declare the block as an empty block in your index.html to 'mute' the content from the base.html:
ie, in index.html:
...
{% block right_panel %}{% endblock %}
...
For clarity, if you block some code in base.html:
{% block right_panel %}
<div class="footerlinks">
<ul>
<li>about us</li>
<li>contact us</li>
<li>help</li>
</ul>
</div>
{% endblock %}
It will show up in all templates that extend base.html, unless the block is overridden, thereby replacing the block.
Thus,
{% block right_panel %}{% endblock %}
Will effectively mute the section. It's up to you to then build a replacement into your template that will keep everything in one place.
If your efforts are moving things around on your page, it may be wise to only block the visible parts of the section:
<div class="footerlinks">
{% block right_panel %}
<ul>
<li>about us</li>
<li>contact us</li>
<li>help</li>
</ul>
{% endblock %}
</div>
Related
Attached is the wagtail template I have written so far.
{% load wagtailimages_tags %}
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
{% for member in self.general_member_cards %}
{% if member.photo %}
{% endif %}
{% endfor %}
</div>
</section>
Ultimately I want the code to look like:
<h2>Avatar Images</h2>
<ul>
<li><img src="img_avatar.png" alt="Avatar" class="avatar"> <h3> Bleu </h3></li>
<li><img src="img_avatar2.png" alt="Avatar" class="avatar"> <h3> Red </h3></li>
</ul>
</body>
</html>
with the image popping up next to the "h3" tag if there exists a photo of course the image will be {{}} double bracketed for dynamic template.
It's not clear whether the image is from Wagtail's image library, but if it is, you should use the {% image %} tag. See https://docs.wagtail.org/en/stable/topics/images.html#
{% with self.general_member_cards as cards %}
{% if cards %}
<ul>
{% for member in cards %}
<li>
{% if member.photo %}
{% image member.photo fill-80x80 %}
{% endif %}
<h3>{{ member.name }}</h3>
</li>
{% endfor %}
<ul>
{% endif %}
I have also used a {% with %} tag to cache self.general_member_cards in the template, in case this requires a database query. If it does not, you can skip that step.
You more or less have it already ...
<section class="container">
<h2 class="text-center">{{ self.title }}</h2>
<div class="general-alumnae-deck">
<ul>
{% for member in self.general_member_cards %}
<li>
{% if member.photo %}
{% image member.photo fill-50x50 as avatar %}
<img src="{{ avatar.url }} class='avatar">
{% endif %}
<h3 style="display:inline;">{{ member.name }}</h3>
</li>
{% endfor %}
</ul>
</div>
</section>
You said you wanted image next to the <h3>, so you need to override the display:block property of the h3 tag and make it inline as above (or create a css class for this).
EDIT: Updated to use wagtail's image template tag to get the rendition of the member photo
When I need to use a lot of {%include%} (content) in html templates - do unnecessary extensions appear for each content inclusion? Effects are also applied to each subsequent inclusion of content...
When I can add content inclusion to the first html template expander, everything is fine.
But when I use "pagination" I need to send "page=posts" to paginator.html. I can't find a way to send this variable to blog.html from layout.html...
And I think that in the future I will have the same problems, and therefore it should be solved.
layout.html
<div class="container body-content">
<div id="content">
{% block content %}
{% endblock %}
</div>
</div>
<div class="container body-content">
<footer>
<hr/>
<p>© {{ year }}. Сайт</p>
</footer>
</div>
blog.html
{% extends "app/layout.html" %}
<!--♕-->
{% block content %}
<h2>{{ title }}</h2><br>
{% for post in posts %}
<hr>
<div class="">
<h2> {{post.title}} </h2>
<p> {{post.posted}} </p>
</div>
<p>
{{ post.description }}
</p>
{% endfor %}
{% include "app/pagination.html" with page=posts %}
{% endblock %}
pagination.html
{% extends "app/blog.html" %}
<!--♕-->
{% block content %}
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Предыдущая
{% endif %}
<span class="current">
Страница {{ page.number }} из {{ page.paginator.num_pages }}
</span>
{% if page.has_next %}
Следующая
{% endif %}
</span>
</div>
{% endblock %}
The pagination should be a file that only renders pagination content, not the template around this.
This thus means that you implement the pagination without the {% extends "app/layout.html" %}, so:
{# pagination.html, no extends or block #}
<div class="pagination">
<span class="step-links">
{% if page.has_previous %}
Предыдущая
{% endif %}
<span class="current">
Страница {{ page.number }} из {{ page.paginator.num_pages }}
</span>
{% if page.has_next %}
Следующая
{% endif %}
</span>
</div>
This will prevent the pagination.html to render headers, footers, and other content. You can then simply import the pagination as a utility template.
When I display my posts using loops. My first post in my loop did gets indented unexpectedly. Below I will provide code and image of the indent.
code:
{% extends 'base.html' %}
{% block content %}
<br/>
<div class="container">
<h1>Posts</h1>
<ul>
<br/>
{% for post in object_list %}
{% if forloop.counter <= 15 %}
<li> {{post.title}}
- {{ post.author.first_name }} {{ post.author.last_name }} <br/> {{post.body}}</li>
<br/>
<style>
a {
text-transform: capitalize;
}
</style>
</ul>
{% endif %}
{% endfor %}
Back
{% endblock %}
I've notice there your <ul> tag is put outside of the loop. But your </ul> is put inside of the loop.
You should move your </ul> outside of the loop
Example
Hello I have a HTML that shows all the artworks based on their collections as bellow:now, the collection "No_COLLECTION" is empty but it shows it's collection name and an empty space. I tried to remove it but i couldn't. Please help me to remove all the collections that doesn't have artworks in them.
{% extends "base.html" %}
{% load static %}
{% block content %}
<div id="main" style='min-height:800px;'>
{% with 'No_COLLECTION woodtest Test-2 Culture KASHAN HUMAN mine' as list %}
{% for i in list.split %}
<script>
var level = 0;
</script>
<div class="row" style="position: relative;margin-bottom: 30px;">
<div>{{i}}</div>
<div class="workSeriesThumbnailStrip">
{% for obj in object_list %}
{% if obj.collection == i %}
<script>
var level = level+1;
</script>
<a href="{{ obj.get_absolute_url }}"><img src="{{ obj.image.url }}"
style="float:left;width:67px;height:87px;margin:10px;" ></a>
{% endif %}
{% endfor %}
</div>
<script>
document.write(level);
</script>
</div>
{% endfor %}
<script>
if ($('.workSeriesThumbnailStrip').is(':empty')) {
$('.row').remove();
}
</script>
{% endwith %}
</div>
<div class="clear"></div>
{% endblock content %}
Add if statement. If the list is not empty, put your div inside that if statement body. else just div an empty div.
I have a twig template used for Bootstrap popovers. The code is:
span class="popover-wrapper {% block wrapper_class %}{% endblock %}">
<button
type="button"
class="btn-link popover-link {% block link_class %}{% endblock %}"
tabindex="0"
role="button"
data-toggle="popover"
data-placement="bottom"
data-title="{% block title %}{% endblock %}"
>{% block link_text %}{% endblock %}</button>
<div class="popover-inner-content {% block content_class %}{% endblock %}">
{% block content %}{% endblock %}
</div>
</span>
when extending this template into another html.twig view,
{% embed 'fragments/popover.html.twig' %}
{% block link_class %}more-sections{% endblock %}
{% block link_text %}
<span class="fa fa-info-circle"></span>
{% endblock %}
{% block title %}<div>Contact Info</div>{% endblock %}
{% block content %} .......
When adding style="background-color: blue;" to the title div, it disables the popover appear/disappear functionality. How can I alter the backgrond color of the popover Title section>
You are breaking the HTML by using double quotes inside your title tag.
<button data-title="<div style="background-color: blue;">Contact Info</div>">...</button>
You could solve this by using single quotes
{% block title %}<div style='background-color: blue;'>Contact Info</div>{% endblock %}