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
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.
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.
Sorry this question is unavoidably kind of long.
I have basetemplate.html which other files extend.
basetemplate.html:
<!DOCTYPE html>
<html lang="en">
<head>....</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top">...</nav>
<div class="container">
<div class="row">
<div class="col-md-3 hidden-xs hidden-sm">
{% block profile %}
<p>User details here...</p>
{% endblock %}
</div>
<div class = "col-md-6">
{% block mainBody %}
{% endblock %}
</div>
<div class = "col-md-3 hidden-xs hidden-sm">
{% block others %}
<p>Others here...</p>
{% endblock %}
</div>
</div>
</div>
</body>
</html>
I now have home.html extending basetemplate.html:
home.html:
{% extends "mysite/base.html" %}
{% block mainBody %}
{% include 'mysite/mainbody.html' %}
{% endblock %}
And mainbody.html contains:
{% for article in articles reversed %}
<div class="article-wrapper">
<div class="article-content">
<p>{{ article.content }}</p>
</div>
</div>
{% endfor %}
This works well for home.html. All my articles are displayed within <div class = "col-md-6"></div> but it doesn't for hashtags.html page. If I have, say 10 articles coming for a particular hashtag, it will display two or more within <div class = "col-md-6"></div> and may be three outside it and the rest outside <div class = "row"></div>. And sometimes some are even displayed outside <div class = "container"></div>.
hashtag.html:
{% extends "mysite/base.html" %}
{% block mainBody %}
{% include 'mysite/mainbody.html' %}
{% endblock %}
Query that fetches article for home.html is articles = Article.objects.all()[:10] while that of hashtag.html is articles = Article.objects.filter(content__icontains=hashtaggedword)[:10].
I have checked and checked to see if have any unclosed tag but couldn't find any even after using W3C Validator. I have also checked to see if there is something strange with those that display outside col-md-6 but they are okay and displayed in order of time they are created.
Probably article.content have html tags. Escape them by escape.
{{ article.content|escape }}
try using this way:
<ul class="list-group">
{% for article in articles reversed %}
<li class="list-group-item">{{ article.content }}</li>
{% endfor %}
</ul>
Result of this code is a simple list and you can put this to your column without any problem
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>