I'm using the HTML nav tag for showing the breadcrumbs in my website (built on Django/Bootstrap).
I'm trying to show a dropdown menu for Shop by Departments and then the breadcrumbs. But someone, the order is mixed up. The Shop by Departments is showing up in the end instead of being the first thing.
My code is:
<div class="animate-dropdown">
<!-- ========================================= BREADCRUMB ========================================= --><div id="top-mega-nav">
<div class="container">
<nav>
{% include "partials/nav_primary.html" with expand_dropdown=0 %}
<li class="breadcrumb-nav-holder">
<ul>
{% with category=product.categories.all.0 %}
{% for c in category.get_ancestors_and_self %}
<li class="breadcrumb-item">
{{ c.name }}
</li><!-- /.breadcrumb-item -->
{% endfor %}
<li class="active">{{ product.title }}</li>
{% get_back_button as backbutton %}
{% if backbutton %}
<li class="pull-right">
<a href="{{ backbutton.url }}">
<i class="icon-arrow-left"></i> {{ backbutton.title }}
</a>
</li>
{% endif %}
{% endwith %}
</ul>
</li><!-- /.breadcrumb-nav-holder -->
</nav>
</div>
</div><!-- /.container -->
I inspected the webpage using the inspector and the order of code is as expected. But the rendering is not. Whats wrong here?
Edit: The output in the inspector looks like
Your rendered HTML is invalid. That is what likely causes the problems.
A li element must have a parent ul (or ol) element.
So if you add an ul around your li class="breacrumb-nav-holder" it should work fine.
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 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
I seem to be having trouble to extend my background color for my 2 column layout. The user can add categories so the background color has to be able to adjust with the amount of categories the user wants to add in.
html file:
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
css file:
&--background {
background-color: $mainBackground;
padding-bottom: 2rem;
}
I feel like it has to do with the way I'm formatting my divs
Since you mentioned in comments that you are using floats, simply add a parent element that will have the background and then add something known as clearfix, at the end of it.
HTML:
<div class="parent--background">
{% for category in categories %}
<div class="row__2 sub-pages--background">
<div class="sub-pages--categories-background">
<div class="sub-pages--categories">
<a href="{% url 'blogging_logs:topics' category.id %}" class="sub-pages--categories-position ">{{ category }}
<img class="sub-pages--img" src="{{ category.category_image.url }}">
</a>
</div>
</div>
</div>
{% empty %}
<p>No categories entered yet.</p>
{% endfor %}
<div class="clearfix"></div>
</div>
CSS:
.clearfix::after {
content: "";
clear: both;
display: table;
}
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
I have a script written in Python which will pass a list to a HTML file. I have a problem in displaying the elements in the html page. As per the code written below, the elements are displayed vertically down as a list. I wanted the elements to be displayed in a single line horizontally.
<!doctype html>
<html lang="en">
<body>
<div id="content">
{% for item in VOD1 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</b></li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
{% for item in VOD2 %}
<li>ID: {{ item[0] }}</li><li> Title: {{ item[1] }}</li>
<img src="{{ item[2] }}" alt="dummy.jpg"> </img>
{% endfor %}
</div>
</body>
</html>
I tried by adding a '-' after the '%' in the for loop to trim the white spaces but don't work. If I remove the line break then assets are displayed in a line but it's in a auto fit manner.3 assets details are displayed in each line instead of the whole details in a single line. Can someone please shed some light into this?
If I get you correctly, you want the <li> elements to be displayed inline rather than as block elements:
li { display: inline-block }
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
<li><img src="//lorempixel.com/400/200"</li>
</ul>
Edit: as I think of it, you could also want each ID/Title as a header to the image, and every of those components horizontally aside each other. Like so:
div, li { display: inline-block }
img { display: block }
<div>
<ul>
<li>ID: 1</li>
<li>Title: foo</li>
</ul>
<img src="//lorempixel.com/400/200">
</div>
<div>
<ul>
<li>ID: 2</li>
<li>Title: bar</li>
</ul>
<img src="//lorempixel.com/400/300">
</div>